创建一个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-config
export 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 publicly
children: `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