開門見山
項目地址：https://github.com/tanghaojie/vue3-cesium-typescript-start-up-template
- 好用的話給個star唄，有更新可以第一時間看見
簡介
本項目是一個整合了 Vue3 + Cesium + Typescript 的啟動模板，同時還包含了各種不同類型的示例數據。在線預覽地址： https://vue3-cesium-typescript-start-up-template.vercel.app/(可能需要跨過[牆]才能訪問)
用法說明
注意：需要先安裝Node.js環境
點擊 Fork 到把項目拷貝到你自己的倉庫，或者直接git clone本倉庫，然后:
npm install
開發環境編譯和熱重載
npm run serve
生產環境編譯和壓縮
npm run build
相關依賴
- Vue3
- cesium
- typescript
- 可選的
- Element plus 使用了部分組件以方便開發。
- tailwindcss 快速 UI 樣式。
- ECharts
功能列表
- 視圖切換
- 狀態欄
- 環境控制
- 地球控制
- 3D tile 操作
- 繪圖
- 測量
- 地形采樣
- 等高線
- 設置
- 持續加入中...
指南
Cesium vue
Cesium 實例掛載在 vue 實例的全局屬性上（vue3 支持多個 vue 實例，你可以自定義選擇），然后就可以在 vue 實例中的任何地方拿到 cesium：
const { viewer, viewerContainer } = this.$cv // type CesiumVue
如果需要附件一些其他的屬性，可以添加到CesiumVue (src/libs/cesium/cesium-vue.ts) 上來擴展。
非響應式
為了更好的性能, cesium instancecesium 實例是非響應式的！
和 Vue 中的 data 等不同，即使 Vue3 使用 proxy 代替 Object.defineProperty 獲得了很大的性能提升，代理所有的 cesium 屬性以實現響應式，還是會極大的丟失性能和降低 FPS。
如何取舍：
-
如果只需要使用 cesium 的基礎功能，例如只做一些基礎的可視化、簡單交互、數據加載展示等等這些比較常規的操作，其實可以使用其他的一些用 vue 對 cesium 進行了封裝的庫，這樣可以很大程度上提升項目的構建速度。唯一需要注意的問題是，所需的功能是否已經實現。
-
但如果你要深層的進入 cesium 內部，例如自定義 shader、高級空間分析、復雜的交互操作等等，把這些功能點和 vue 綁定就是一件不合算，也不合理的事情了。
-
另一種情況，當項目很龐大，需要用到 cesium 各個模塊時，隨着用 vue 封裝 cesium 的組件越來越多以后，你會發現，其本質上又回到了代理整個 cesium 實例來實現響應式的模式，這個時候，性能又是不得不考慮的問題。
示例數據
- Tiled satellite data
- Tiled terrain data
- 3D tile buildings
- 3D tile point cloud collected with ipad pro lidar
以上數據都是本人通過公開渠道獲取或者自己采集后，制作的示例數據。如果用於測試可以直接使用，如果用於商業用途請聯系告知。謝謝。
截圖
后續計划
- Options API -> Composition API
- Dark mode
- Timeline and time data
- More sample data
- i18n
注意: 不要使用 1.81.0 - 1.82.1 版本的 cesium, 它包含一個已知的bug.