1.从npm安装获取SDK

//安装mars3d主库，其中mars3d-cesium  @turf/turf为依赖库
npm install mars3d mars3d-cesium  @turf/turf  --save

//安装mars3d插件（按需安装）
npm install mars3d-space --save

2.增加DIV展示容器

<template>
  <div id="mars3dContainer" class="mars3d-container"></div>
</template>

<script setup>
import { getCurrentInstance, onMounted, reactive } from "vue";
const { proxy } = getCurrentInstance();

const initMap = () => {
  // Map的参数请看API文档：http://mars3d.cn/api/Map.html
  const map = new proxy.$mars3d.Map("mars3dContainer", {
    basemaps: [{ name: "天地图", type: "tdt", layer: "img_d", show: true }],
  });
};

onMounted(() => {
  initMap();
});
</script>

<style scoped>
.mars3d-container {
  height: 100%;
  width: 100%;
}
</style>

3.在main.js中import导入SDK

import { createApp } from 'vue'
import './style.css'
import App from './App.vue'
// 引入css
import "mars3d-cesium/Build/Cesium/Widgets/widgets.css"
import "mars3d/mars3d.css" // v3.8.6及之前版本使用 import "mars3d/dist/mars3d.css";

import * as mars3d from "mars3d"
import "mars3d-space" // 导入mars3d插件，导入即可，自动注册（按需使用，需要先npm install mars3d-space）
// import "mars3d-heatmap"; // 其他插件类型，自行修改名称

const app = createApp(App);
app.config.globalProperties.$cesium = mars3d.Cesium;
app.config.globalProperties.$mars3d = mars3d;
app.mount('#app')

4.修改相关配置

因为 mars3d 所依赖的 Cesium 是一个多文件资源的js库，需要对其依赖的一些资源文件进行拷贝处理（这也是容易出问题的地方），所以需要修改相关配置。 90%的集成问题都是出现在对 cesium 库的拷贝处理上，项目运行没有正确识别 Cesium 主目录造成各种问题。

• 安装依赖库

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

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

import { defineConfig } from "vite"
import { mars3dPlugin } from "vite-plugin-mars3d"

export default defineConfig({
  plugins: [mars3dPlugin()]
})
```![在这里插入图片描述](https://i-blog.csdnimg.cn/direct/5a5ccba15feb4702b0d967cc66081f65.png)