開門見山

專案地址：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

相關依賴

功能列表

  • 檢視切換
  • 狀態列
  • 環境控制
  • 地球控制
  • 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 例項來實現響應式的模式，這個時候，效能又是不得不考慮的問題。

示例資料

以上資料都是本人通過公開渠道獲取或者自己採集後，製作的示例資料。如果用於測試可以直接使用，如果用於商業用途請聯絡告知。謝謝。

截圖

後續計劃

  • Options API -> Composition API
  • Dark mode
  • Timeline and time data
  • More sample data
  • i18n

注意: 不要使用 1.81.0 - 1.82.1 版本的 cesium, 它包含一個已知的bug.