最近公司的业务逻辑需要使用到gis空间地理系统,最开始使用的是Cesium.js.涉及东西很多,对新手不是太友好,传送门:https://cesium.com/platform/cesiumjs/
.
业务要使用到很多特效,刚接触到Cesium,很多效果实现起来很鸡肋,mars3d则很适合新手.文档与示例也很全,现在记录一下vue3项目如何集成mars3d.
vue3集成mars3d开发地球项目
在vue3项目的基础上
//安装mars3d主库
npm install mars3d --save
npm install vite-plugin-mars3d --save-dev
import { defineConfig } from 'vite';
import { mars3dPlugin } from 'vite-plugin-mars3d';
export default defineConfig({
plugins: [mars3dPlugin()]
});
<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>
至此我们会看到一个初始化的地球。