最近公司的业务逻辑需要使用到gis空间地理系统，最开始使用的是Cesium.js.涉及东西很多,对新手不是太友好,传送门:https://cesium.com/platform/cesiumjs/.
业务要使用到很多特效,刚接触到Cesium,很多效果实现起来很鸡肋,mars3d则很适合新手.文档与示例也很全,现在记录一下vue3项目如何集成mars3d.
vue3集成mars3d开发地球项目
在vue3项目的基础上
-
安装mars3d包
//安装mars3d主库
npm install mars3d --save
-
安装所需依赖
npm install vite-plugin-mars3d --save-dev
-
修改配置文件
vite.config.js
import { defineConfig } from 'vite';
import { mars3dPlugin } from 'vite-plugin-mars3d';
export default defineConfig({
plugins: [mars3dPlugin()]
});
-
在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>
至此我们会看到一个初始化的地球。文章来源：https://www.toymoban.com/news/detail-643531.html
文章来源地址https://www.toymoban.com/news/detail-643531.html
到了这里，关于【mars3d】Vue3项目集成mard3d实现gis空间地理系统的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
