项目:vue+vite
vite创建vue项目
node -v
npm -v
npm init vite@latest project-name -- --template vue
集成Mars3D
# 安装mars3d依赖库
npm install mars3d mars3d-cesium @turf/turf --save
npm install vite-plugin-mars3d --save-dev
import { defineConfig } from 'vite';
import { mars3dPlugin } from 'vite-plugin-mars3d';
export default defineConfig({
plugins: [mars3dPlugin()]
});
<script setup lang="ts">
import * as mars3d from "mars3d";
import "mars3d-cesium/Build/Cesium/Widgets/widgets.css";
import "mars3d/dist/mars3d.css";
var mapOptions = {
basemaps: [{ name: "天地图", type: "tdt", layer: "img_d", show: true }]
};
// 注意 这里加个定时器处理一下,否则cesium会报错
setTimeout(() => {
var map = new mars3d.Map("mars3dContainer", mapOptions);
}, 1000);
</script>
<template>
<div id="mars3dContainer" class="mains mars3d-container"></div>
</template>
<style scoped>
.mains {
height: 100vh;
width: 100vw;
background: #8edfe2;
}
</style>
npm run dev
![](https://i-blog.csdnimg.cn/blog_migrate/c07147f8b2f638134930a38342748435.png)