cesium.js開發,Cesiumjs

本文目錄一覽：

• 1、Cesium實戰項目
• 2、cesium 和 Three.js有什麼區別，以及二者與WebGL 的關係
• 3、Cesium的擴展工具包-EarthSDK使用指南1
• 4、Cesium初始化選項
• 5、構建一個 Vite + Vue3 項目 開發Cesium

Cesium實戰項目

本人所學GIS專業，畢業後一直從事Cesium相關的GIS開發工作，在業餘時間將Ceium中常用的一些功能進行封裝，形成能夠高效復用的組件。實戰項目中的多數功能均來源於實際項目，緊貼業務特性，實用性強，能夠在最大程度上幫助個人、團隊、公司、企業提高工作效率，節省開發成本。

Cesium實戰項目目前共111個實例（後面會繼續增加），項目基於Cesium1.7.2+VUE 實現，現有實例如下：

基礎底圖

1.ArcGIS在線底圖

2.谷歌在線底圖

3.高德在線底圖

4.天地圖在線底圖

5.本地單張圖片

點狀對象

6.Cesium點聚合1

7.Cesium點聚合2

8.Billboard加載Gif圖片

9.Cesium 閃爍點

10.Primitives加載大量圖標點

11.div文本點

12.動態效果點

13.圖標點+文字(primitive方式)

單體化

14.傾斜模型分棟單體化 （基於geoserver）

15.傾斜模型分層單體化（基於geoserver）含教程

16.傾斜模型分戶單體化（基於geoserver）含教程

編輯繪製

17.點線面繪製

18.點線面編輯

19.點線面繪製擴展

20.點線面編輯擴展

自定義信息框

21.多字段自適應信息框

22.氣泡窗口樣式1

23.氣泡窗口樣式2

標註標繪

24.自定義html標註圖層

25.軍事標繪

26.軍事標繪編輯

27.gltf 標繪繪製

28.gltf 標繪編輯

29.行政區標註

30.體對象繪製編輯

軌跡漫遊

31.軌跡回放

32.跟隨視角漫遊

33.第一人稱漫遊

34.上帝視角漫遊

分析

35.Cesium 2維點轉3維點

36.Cesium 空間線段等分

37.地表透明（地下模式）

38.通視分析

39.可視域分析

40.緩衝區分析

41.地表開挖（材質貼圖）

42.地形開挖（材質貼圖）

43.模型裁剪（Planes）

44.礦區岩層效果

45.雙屏對比

46.二三維聯動（基於openlayers)

場景

47.場景出圖（導出圖片）

48.自定義天空盒

49.位置信息狀態欄控件

50.雨雪霧天氣效果

51.限定視角範圍

52.繪製反選遮罩

53.自定義空間背景

54.宏觀數字地球

55.鷹眼地圖（基於openlayers）

56.導航控件

57.雲層

58.Tooltip鼠標移入信息

59.書籤管理

60.旋轉的地球

61.繞點旋轉

62.場景泛光

工具

63.場景測量工具

64.鼠標位置拾取工具

特效

65.動態線、流動線

66.流向動態線

67.動態水面效果

68.動態擴散圓

69.動態立體牆

70.粒子系統

71.圓形波紋效果

72.矢量白膜自定義shader（不改源碼）

73.光暈線

74.動態立體牆（升級）

75.圓形、規則多邊形動態圍牆

76.圍牆擴散動畫

77.光柱椎體

78.數字工廠

79.六邊形擴散掃描

80.圓形擴散掃描

81.模型熱力圖

82.動態傳輸線

83.掃描線

行業應用

84.雷達掃描效果

85.雷達追蹤圓錐體

86.雷達追蹤四稜錐體

87.雷達遮罩掃描

88.相控陣雷達範圍

89.雷達放射波

90.衛星視椎體（四稜錐體）

91.視頻貼圖參數調整

92.視頻融合

93.目標跟蹤

94.動態目標檢測

95.視頻窗口（普通視頻）

96.視頻窗口（rtmp視頻）

97.視頻牆（含編輯）

98.動態水域

99.水閘放水效果

Echarts可視化支持

100.Echarts 遷徙圖1

101.Echarts 遷徙圖2

102.Echarts 散點圖

103.Echarts 流入線

104.Echarts 流出線

MapV可視化支持

105.MapV 遷徙圖

106.MapV 大遷徙圖

107.MapV 熱力圖

108.MapV 強邊界圖

其他

109.3dtiles高度調整

110.文字貼圖

111.熱力圖（基於heatmap.js插件）

在線預覽地址   在線預覽地址  用戶名cesium 密碼cesium@sz

cesium 和 Three.js有什麼區別，以及二者與WebGL 的關係

二者都是基於WebGL技術開發的js庫

Threejs受眾面比較廣，是封裝了webgl的一些底層用法，讓初學者更容易上手；例如繪製一個立方體，使用webgl原生api可能要寫50行代碼，包括構建坐標點，頂點組織、着色器等信息；在threejs裡面可能只要一句代碼就可以構建(實際上也是調用webgl原生api)，只是做了更大粒度的封裝

Cesium受眾面相對較小，是Gis相關的，也是基於WebGL開發的，它主要是三維地球相關的js庫，可以展示二維地圖服務(百度高德)、傾斜攝影模型；還可以在上面做一些三維分析，可以參考

Cesium的擴展工具包-EarthSDK使用指南1

Cesium作為三維GIS和BIM應用的主力引擎，目前已經受到越來越多的開發者的青睞。這兩年筆者也一直做Cesium相關的開發工作，真切地感受到Cesium的強大，其豐富的API、豐富的示例為開發三維GIS/BIM應用提供了極大的便利。

為了進一步豐富Cesium的開發生態，我們把之前在Cesium基礎上開發的功能，以及大量的改良功能，封裝成若干個獨立的js包。這樣也避免開發者重複造輪子。對於大屏展示、C端替代等直接本地部署Cesium的應用場景，可以直接免費使用我們封裝的EarthSDK擴展包。

EarthSDK中主要包括XbsjEarth.js和XbsjCesium.js兩個js包。

XbsjCesium.js用來擴展Cesium所不具備的三維可視化功能，例如視頻融合、分析工具、模型壓平等。

XbsjEarth.js則主要目標在於封裝出更加易於使用的API接口，儘可能屏蔽掉前端開發工程師所不熟悉的圖形學、GIS相關內容。會在Cesium的基礎上封裝好一些複雜的交互操作，並提供極其簡單的API接口方便調用。

EarthSDK從前端開發者的角度考慮設計API，大部分類的屬性都是響應式設計，通過簡單操作即可監控相應的屬性變化，通過bind方便可以實現屬性的相互綁定。特別針對Vue的開發者，實現了和vue的響應式屬性的無縫融合。具體可以參考這篇文章的介紹： 三維應用的響應式設計探索 。

之前使用過ECharts的同學可能對ECharts的操作簡單印象深刻。ECharts相當於把大量的API轉成配置式，真正使用時，只需要通過setOptions來進行一個大JSON對象的配置，即可完成圖表的創建。

EarthSDK的API設計也是受ECharts的啟發，會盡量減少不需要的API，減輕開發者的記憶負擔。只需要通過一個大JSON配置，就可以完成整個場景的搭建。

而且，EarthSDK比ECharts更進一步，可以直接修改相應的屬性，即可完成三維場景的動態變化。而ECharts則需要不停地調用setOption來進行配置。以後的文章中會詳細說明此特性。

EarthSDK創建場景後，內置viewer和scene對象，用戶可以通過viewer或者scene來向場景中添加Cesium的原生對象，和調用所有原生的Cesium API函數。

為了更易於理解EarthSDK的使用，我們開發了一個樣例程序 XbsjEarthUI(這個程序也同時集成到了CesiumLab中)。此樣例程序已經開源放在Github和Gitee上，基於MIT協議，用戶可以任意修改。

XbsjEarthUI在github上的地址：

XbsjEarthUI在gitee上的地址：

EarthSDK可以加載百度地圖、高德地圖等三十多種地圖數據，並可以做到實時糾偏。

交通安防領域需要用到的視頻監控、視頻融合功能。可以將視頻映射到傾斜攝影、BIM模型上（3dtiles模型），視頻會覆蓋到非平面物體上，不會出現閃爍等現象。

針對模型位置、姿態進行編輯。方便進行多個模型數據組合使用。並且這裡的模型位置編輯可以很方便的在全球任意位置拖放。

結合CesiumLab數據生產，使用EarthSDK調整數據後期亮度，可以做出較好的特效。方便進行大屏展示。

可以指定模型數據顯示在某一個視口，方便進行方案對比等操作。

Cesium的地面本身不能做到透明顯示，我們進行改進，使得透明度可以實時調節。

動態實現視域分析效果。

可以對路徑進行編輯，編輯好的路徑，可以用於控制相機的漫遊，也可以控制物體的移動。

對原始Cesium的標籤效果進行改進，並可以使用類似html5標籤增加onClick屬性，來自動執行自定義操作。

Cesium初始化選項

基於cesium開發地圖時用到的組件是：new Cesium.Viewer(container, options)，container為地圖在頁面中放置位置的id，options是初始化設置的選項，包括是否顯示homeButton，動畫組件，時間軸以及底圖等。具體開發過程中用到的選項可參考官方api（ ）

常用的選項如下：

構建一個 Vite + Vue3 項目 開發Cesium

由於 Cesium 不是一個普通的 npm 包，需要依賴一些 css ，圖片，json 啥的。我們要參考 Cesium 官方的 webpack 教程 來做一堆額外的工作。

值得慶幸的是現在 Vite 有了 vite-plugin-cesium 插件，來幫我們完成這些配置。

vite.config.js

App.vue