建设图片展示网站/武汉网络关键词排名

最近公司的业务逻辑需要使用到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 maplet 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>

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