创建一个nuxt项目
创建一个项目,安装依赖
安装mars3d ,安装mars3d-cesium
替换app.vue
<template><div id="mars3dContainer" class="mars3d-container"></div><!-- <div>123</div> -->
</template><script>
import "mars3d-cesium/Build/Cesium/Widgets/widgets.css";
import "mars3d-cesium";import "mars3d/dist/mars3d.css";
import * as mars3d from "mars3d";export default {mounted() {// 创建Mars3D地球实例const map = new mars3d.Map("mars3dContainer", {// 配置项,如底图、中心点等basemaps: [{ name: "天地图", type: "tdt", layer: "img_d", show: true }],center: { lng: 116.397428, lat: 39.90923, alt: 1181 },});},
};
</script><style>
.mars3d-container {width: 100%;height: 100vh; /* 或其他固定高度 */
}
</style>
替换nuxt.config.ts文件
// https://nuxt.com/docs/api/configuration/nuxt-configexport default defineNuxtConfig({ssr: false,compatibilityDate: "2024-04-03",devtools: { enabled: false },app: {head: {script: [{//must match the nitro config below for where the files are being served publiclychildren: `window.CESIUM_BASE_URL='_nuxt/Cesium';`,},],},},nitro: {publicAssets: [{baseURL: "_nuxt/Cesium/Assets",dir: "../node_modules/mars3d-cesium/Build/Cesium/Assets",},{baseURL: "_nuxt/Cesium/Workers",dir: "../node_modules/mars3d-cesium/Build/Cesium/Workers",},{baseURL: "_nuxt/Cesium/ThirdParty",dir: "../node_modules/mars3d-cesium/Build/Cesium/ThirdParty",},{baseURL: "_nuxt/Cesium/Widgets",dir: "../node_modules/mars3d-cesium/Build/Cesium/Widgets",},],},
});
成功
参考连接
https://community.cesium.com/t/using-cesium-npm-package-with-nuxt-3/29593/3