vue3 + ts + vite 初始化 Mars3D

一、实现效果

二、实现步骤

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: any

    constructor() {
        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 已绑定的右键菜单
    }

}