cesiumjs分屏,CesiumJS

本文目錄一覽：

• 1、Cesium指南-自定義vue組件
• 2、Cesium初始化選項
• 3、Cesium實戰項目
• 4、cesium 和 Three.js有什麼區別，以及二者與WebGL 的關係

Cesium指南-自定義vue組件

前面介紹了使用原生的 Widget ，其實現思想也是基於 MVVM ，只是用的 knockout.js 庫，大夥都不怎麼用這個 js 庫，用起來也比較麻煩，這裡使用大家主流的 vue 來實現一個放大縮小的組件。

這裡跟其它創建組件的方式是一樣的，但有一點需要注意的是，引入第三方組件時，如果是在 main.js 中引入的，這裡還需要重新引入一次，是因為這裡使用的是 createApp 來掛載組件的。

首先引入組件

cesium 中都是採用 appendChild 的方法來添加元素，所以在使用 vue 組件時，可以使用 createApp 來創建組件，並掛載到對應的元素上。如下所示：

Cesium初始化選項

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

常用的選項如下：

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庫，可以展示二維地圖服務(百度高德)、傾斜攝影模型；還可以在上面做一些三維分析，可以參考