Vue3项目中集成mars3D简单三部曲

这里是参考网址，大佬可以点击一件跳转

1.安装依赖

npm install vite-plugin-mars3d --save-dev

2.修改 vite.config.ts 配置文件

import { defineConfig } from 'vite';
import { mars3dPlugin } from 'vite-plugin-mars3d';export default defineConfig({plugins: [mars3dPlugin()]
});

3. 新建DIV容器 + 创建地图

新建map.ts文件，以下代码闭眼直接copy

import * as mars3d from "mars3d"
import { Cesium } from "mars3d"import "mars3d/dist/mars3d.css";
import "mars3d-cesium/Build/Cesium/Widgets/widgets.css";
//必须有这两行css,否则地球出来了，样式还是乱的
export function initMap() {// 创建三维地球场景const map = new mars3d.Map("mars3dContainer", {scene: {center: { lat: 30.054604, lng: 108.885436, alt: 17036414, heading: 0, pitch: -90 },showSun: true,showMoon: true,showSkyBox: true,showSkyAtmosphere: false, // 关闭球周边的白色轮廓 map.scene.skyAtmosphere = falsefog: true,fxaa: true,globe: {showGroundAtmosphere: false, // 关闭大气（球表面白蒙蒙的效果）depthTestAgainstTerrain: false,baseColor: "#546a53"},cameraController: {zoomFactor: 3.0,minimumZoomDistance: 1,maximumZoomDistance: 50000000,enableRotate: true,enableZoom: true},mapProjection: mars3d.CRS.EPSG3857, // 2D下展示墨卡托投影mapMode2D: Cesium.MapMode2D.INFINITE_SCROLL// 2D下左右一直可以滚动重复世界地图},control: {baseLayerPicker: false, // basemaps底图切换按钮homeButton: false, // 视角复位按钮sceneModePicker: false, // 二三维切换按钮navigationHelpButton: false, // 帮助按钮fullscreenButton: true, // 全屏按钮contextmenu: { hasDefault: false } // 右键菜单},terrain: {url: "//data.mars3d.cn/terrain",show: true},basemaps: [{name: "天地图影像",icon: "img/basemaps/tdt_img.png",type: "tdt",layer: "img_d",show: true}] as any,})// 打印测试信息console.log("mars3d的Map主对象构造完成", map)console.log("其中Cesium原生的Cesium.Viewer为", map.viewer)return map
}

vue文件引入map.ts,以下代码闭眼直接copy

<template><div><div id="mars3dContainer" class="mars3d-container"></div> //新建DIV容器</div>
</template><script setup lang="ts">import { onMounted, ref } from 'vue';
import * as WorkerMap from "./map";
onMounted(async () => {WorkerMap.initMap();
});
</script><style scoped lang="scss">
</style>