Mars3D/Cesium + VUE3

不定期更新

1、环境搭建

1、Vite架构项目引入Mars3D

参考官网：

http://mars3d.cn/dev/guide/start/import.html#_3-3-vite-技术栈时-的项目配置修改

：已亲测vite框架，可以运行，具体见下main

1、插件 vite-plugin-mars3d

vite中需要安装插件 vite-plugin-mars3d，

作用：vite不使用不支持require引入动态资源，支持 import导入，Mars3D.js中使用的是require，经测试，该插件的作用应该就是解决这个问题。

2、项目环境与使用细节

1、项目环境

vite vue3 若依 Mars3D 3版本

2、安装 Mars3D 库

npm install mars3d --save

3、安装 vite-plugin-mars3d 库

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

4、修改vite.config.js文件

引入 vite-plugin-mars3d 库

1.  
   import { vitePluginMars3d } from 'vite-plugin-mars3d';
2.  
    
3.  
   export default defineConfig(({ mode, command }) => {
4.  
   const env = loadEnv(mode, process.cwd())
5.  
   const { VITE_APP_ENV } = env
6.  
   return {
7.  
   // 部署生产环境和开发环境下的URL。
8.  
   // 默认情况下，vite 会假设你的应用是被部署在一个域名的根路径上
9.  
   // 例如 https://www.ruoyi.vip/。如果应用被部署在一个子路径上，你就需要用这个选项指定这个子路径。例如，如果你的应用被部署在 https://www.ruoyi.vip/admin/，则设置 baseUrl 为 /admin/。
10.  
    base: VITE_APP_ENV === 'production' ? '/' : '/',
11.  
    plugins: [createVitePlugins(env, command === 'build'),vitePluginMars3d()],

5、引入 基本使用

基本如下，其余功能参考官网开发即可

1.  
   // 引入cesium基础库
2.  
   import "mars3d-cesium/Build/Cesium/Widgets/widgets.css";
3.  
   import * as Cesium from "mars3d-cesium";
4.  
   // 导入mars3d主库
5.  
   import "mars3d/dist/mars3d.css";
6.  
   import * as mars3d from "mars3d";
7.  
    
8.  
   // 初始化地图
9.  
   export function initMap(elem) {
10.  
    let options = null
11.  
    const configUrl = "/config/config.json";
12.  
    mars3d.Util.fetchJson({ url: configUrl }).then((data) => {
13.  
    initMars3d({
14.  
    // 合并配置项
15.  
    ...data.map3d,
16.  
    ...options
17.  
    })
18.  
    })
19.  
    }
20.  
     
21.  
    function initMars3d(option){
22.  
    var map = new mars3d.Map('mars3dContainer',option)
23.  
    }