一、实现效果

二、实现步骤

1. 下载依赖

npm install mars3d mars3d-cesium @turf/turf --save
npm install mars3d-space --save
npm install vite-plugin-mars3d --save-dev

2. 编写组件代码

    （1）main.ts

declare global {interface Window {mars3dFun: any}
}

    （2）/ src / components / Mars3d / index.vue

<template><div id="mars3dContainer" class="mars3d-container"></div></template><script setup lang="ts">import {onMounted} from "vue";
import {Mars3dFun} from "@/components/Mars3d/hooks/init";onMounted(() => {window.mars3dFun = new Mars3dFun() // mars3d 类window.mars3dFun.initMars3d() // 初始化
})</script><style scoped lang="scss">#mars3dContainer {width: 100vw;height: 100vh;
}</style>

    （3）/ src / components / Mars3d / init.ts

//引入cesium基础库
import "mars3d-cesium/Build/Cesium/Widgets/widgets.css";
// import * as Cesium from "mars3d-cesium";
//导入mars3d主库
import "mars3d/dist/mars3d.css";
import * as mars3d from "mars3d";
//导入mars3d插件（按需使用，需要先npm install）
import "mars3d-space";export class Mars3dFun {private map: anyconstructor() {this.map = null}/* 初始化 */initMars3d() {this.map = new mars3d.Map('mars3dContainer', {terrain: { // 开启地形服务url: "http://data.mars3d.cn/terrain",show: true}}) // 初始化地图// 方式2：在创建地球后调用addLayer添加图层(直接new对应type类型的图层类)let tileLayer1 = new mars3d.layer.GaodeLayer({ // 高德卫星图layer: "img_d",})let tileLayer2 = new mars3d.layer.GaodeLayer({ // 高德标注layer: "img_z",})this.map.addLayer(tileLayer1) // 添加高德卫星底图this.map.addLayer(tileLayer2) // 添加高德底图标注this.map.unbindContextMenu() // 解除 map 已绑定的右键菜单}}