在nuxt中集成mars3d

2024/10/25 14:33:39 来源：https://blog.csdn.net/weixin_44689966/article/details/142518004 浏览: 次关键词：在nuxt中集成mars3d

创建一个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",},],},
});

成功
在这里插入图片描述