Vue3项目中集成mars3D简单三部曲
1.安装依赖
js
npm install vite-plugin-mars3d --save-dev
2.修改 vite.config.ts 配置文件
js
import { defineConfig } from 'vite';
import { mars3dPlugin } from 'vite-plugin-mars3d';
export default defineConfig({
plugins: [mars3dPlugin()]
});
3. 新建DIV容器 + 创建地图
新建map.ts文件,以下代码闭眼直接copy
js
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 = false
fog: 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
js
<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>
快去试试吧~