vite创建的项目实现Mars3d地图

项目：vue+vite

---

vite创建vue项目

• 在终端中查看node、npm版本

node -v

npm -v

• 使用npm创建项目 

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

• 修改vue.config.js配置文件

import { defineConfig } from 'vite';
import { mars3dPlugin } from 'vite-plugin-mars3d';

export default defineConfig({
  plugins: [mars3dPlugin()]
});

• App.vue

<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