如果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) // 打印测试信息 }