【mars3d】Vue3项目集成mard3d实现gis空间地理系统_vue 地球项目

最近公司的业务逻辑需要使用到gis空间地理系统，最开始使用的是Cesium.js.涉及东西很多,对新手不是太友好,传送门:https://cesium.com/platform/cesiumjs/.

业务要使用到很多特效,刚接触到Cesium,很多效果实现起来很鸡肋,mars3d则很适合新手.文档与示例也很全,现在记录一下vue3项目如何集成mars3d.

vue3集成mars3d开发地球项目

在vue3项目的基础上

• 安装mars3d包

//安装mars3d主库
npm install mars3d --save
1
2

• 安装所需依赖

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

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

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

export default defineConfig({
  plugins: [mars3dPlugin()]
});
1
2
3
4
5
6

• 在vue组件中使用

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

<script setup>
import { onMounted } from 'vue'
import * as mars3d from 'mars3d'
import 'mars3d-space'

let map

let mapOptions = {
  basemaps: [{ name: '天地图', type: 'tdt', layer: 'img_d', show: true }]
}

onMounted(() => {
  map = new mars3d.Map('mars3dContainer', mapOptions)
})
</script>

<style scoped>
#mars3dContainer {
  width: 100vw;
  height: 100vh;
}
</style>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

至此我们会看到一个初始化的地球。