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