vite-ts-cesium项目集成mars3d修改相关的包和配置参考

如果vite技术栈下使用原生cesium，请参考下面文件的包和配置修改，想用原生创建的viewer结合我们mars3d的功能的话。

1.

package.json文件

  "dependencies": {
    "cesium": "^1.103.0",
    "mars3d": "^3.7.18",
    "mars3d-space": "^3.7.18",
    "rollup": "^2.79.1",
    "vue": "^3.2.47"
  },
  "devDependencies": {
    "@vitejs/plugin-vue": "^4.1.0",
    "typescript": "^4.9.3",
    "vite": "^4.2.0",
    "vite-plugin-mars3d": "^4.1.0",
    "vue-tsc": "^1.2.0"
  }

2.

vite.config.ts文件

import { defineConfig } from "vite";
import vue from "@vitejs/plugin-vue";
import { mars3dPlugin } from "vite-plugin-mars3d"; // 引入插件


export default defineConfig({
  plugins: [
    vue(),
    mars3dPlugin({ cesiumPackageName: "cesium" }), // 使用cesium原生包
  ],
});

 3.参考的示例链接：

功能示例(Vue版) | Mars3D三维可视化平台 | 火星科技

4.1如果是cesium与我们Mars3d-cesium两个cesium冲突，会存在奇奇怪怪的报错，

可以安装一个，去掉另外一个。需要排除才可以。

4.2或者可以考虑静态引入也行，可以减少奇怪的问题。

4.3

相关参考与代码：

import * as mars3d from "mars3d"

function initMap() {
  // 构造地球（可以使用原生Cesium或第3方SDK方式去构造Viewer）
  const viewer = new Cesium.Viewer("mars3dContainer", {
    animation: false,
    timeline: false,
    baseLayerPicker: false, // 是否显示图层选择控件
    baseLayer: Cesium.ImageryLayer.fromProviderAsync(
      Cesium.TileMapServiceImageryProvider.fromUrl(Cesium.buildModuleUrl("Assets/Textures/NaturalEarthII"))
    )
  })
  console.log("Cesium原生Cesium构造完成", viewer) // 打印测试信息

  // mars3d.Map也可以直接传入外部已经构造好的viewer, 支持config.json所有参数
  const map = new mars3d.Map(viewer, {
    scene: {
      center: { lat: 30.054604, lng: 108.885436, alt: 17036414, heading: 0, pitch: -90 },
      fxaa: true
    },
    control: {
      contextmenu: { hasDefault: true } // 右键菜单
    }
  })

  console.log("mars3d的Map主对象构造完成", map) // 打印测试信息
}