cesiumjs詳細教程（cesium開發教程）

本文目錄一覽：

• 1、Cesium在js中調用entity的infobox單機事件
• 2、Cesium初始化選項
• 3、Cesium隨筆：視錐繪製（上）
• 4、cesium如何搭建dat.gui
• 5、Cesium實戰項目
• 6、cesium 怎樣設置web服務器

Cesium在js中調用entity的infobox單機事件

第步創建靜態頁面von.html並引入vue.js關鍵核js文件第二步主題元素插入div標籤元素並其插入input輸入框按鈕利用v-on指令綁定點擊事件queryDate第三步div標籤編寫vue.js點擊事件事件獲取前期第四步讓輸入框按鈕間距設置body元素第五步預覽該靜態

Cesium初始化選項

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

常用的選項如下：

Cesium隨筆：視錐繪製（上）

第一篇CesiumJS技術日記，不管技術難不難，認真歸納是個好習慣。本文繞彎太多，要直接繪製視錐的請移步 這裡 。

最近在研究視域分析，思路：使用ShadowMap.js接口開放的陰影繪製功能，指定點光源的相關參數。然而在調試的過程中發現並沒有那麼簡單，生成ShadowMap對象時會拋出無法在參數中找到Context對象的異常，這個Context對象在Api文檔中並沒有提及，這個問題在 中提及，Cozzi說不支持，索性視域分析就放一放，先將視錐繪製出來。這裡只說關鍵的地方，primitive的加載、鼠標事件等過程就不多說了。

方案1：確定攝像機位置-確定攝像機方向-生成新相機實體-使用lookAt(target,offset)設置相機位置姿態-獲取相機視錐-繪製視錐，該方案應該是標準方法，但是調試過程中繪製的視錐總是出現在地心處，多次嘗試無果（和下漫畫如出一轍）：

切忌鑽牛角尖，嘗試方案2：

方案2：確定相機位置-確定攝像機方向-生成視錐幾何體-計算視錐俯仰角度-計算視錐航向角度-繪製視錐。方案2相對於前者的難點在於相機姿態的計算，原本使用myCamera.lookAt(target,offset)可以直接計算出視錐的姿態，無奈該方法繪製出錯，現在只能自己算了（筆者沒有找到根據兩點計算姿態的函數）。

視錐的形態和初始姿態（yaw-0,pitch-0,roll-0）如下圖。

視錐構造參數如下：

frustum:視錐本體，下面詳細說明，

origin:軸心，就是那個尖的位置，

orientation:決定相機看的方向，後面再詳細說明,

vertexFormat:該參數和視錐繪製沒有關係，保持默認即可。

我們選用PerspectiveFrustum，如下是官方doc的構造函數參數。

near和far參數作用如下圖，其中虛線是輔助線，不屬於繪製的視錐幾何體。

fov:查看的視場角，繞z軸旋轉，以弧度方式輸入。

aspectRatio:垂直邊和水平邊的比值，如下圖的aspectRatio為n。

far,near,fov,aspectRatio四個參數確定了便可以確定視錐的形狀。

在程序啟動之後的第一件事是通過鼠標選取兩個點：起點和瞄準的點，通過這兩個點來計算出視錐的姿態，如下圖from點便是視錐的origin，這裡我們只關心航向（yaw/heading）和俯仰（pitch）兩個參數，不關心橫滾（roll），我們希望計算出來的航向角和俯仰角通過如下圖的這種方式來表示相機瞄準的方位，下圖中粉色線是視錐所表示相機所發射的射線。即航向角和俯仰角為0時射線指向x軸方向，航向角增加射線繞着z軸順時針轉動，俯仰角增加射線繞着y軸轉動。

計算出的姿態換算成四元素（Quaternion）,用作視錐的orientation參數。

不過視錐初始化狀態發射的射線（表示的相機所發射）並不是指向x軸方向，而是指向z方向，且航向沿着x的反方向，將視錐航向角-180°，俯仰角-90°，便是視錐理想的初始姿態。

Cesium中的經緯度坐標系和笛卡爾坐標系該選誰呢？上文中提到的姿態所參考的xyz軸是以橢球地表為參考的（x指向正東，y指向正北，z垂直於地面向上），因此選擇經緯度更為直觀，但是只限於短距離的計算。

俯仰角計算 ，先計算絕對值：

再根據h的正負判斷俯仰角的正負值（仰為正，俯為負）。

航向角計算 ，先計算第一象限的值：

現在判斷To點的位置，結合之前視錐的初始姿態，計算出最終的航向弧度。

case 區域1：

case 區域2：

case 區域3：無需操作

case 區域4：

當然，這種方法僅僅適用於短距離和靠近赤道的地區，對於筆者的用途足夠了。

其實並不推薦這樣的方法來計算視錐（不過好歹筆者調試了半天才試出來，也記錄一下），後面將敘述推薦的方法。

cesium如何搭建dat.gui

先引入dat.giu.min.js(壓縮版)

script src=”js/dat.gui.min.js”/script

在js中初始化配置

var viewModel = {emissionRate : 5.0,gravity : 0.0,miniParticleLife : 1.0,maxiParticleLife : 1.0,fly:true}window.onload = function() {gui = new dat.GUI();gui.add(viewModel, ’emissionRate’,0,100);gui.add(viewModel, ‘particleSize’,2 ,60);gui.add(viewModel, ‘miniParticleLife’,0.1,29.1);gui.add(viewModel, ‘maxiParticleLife’,0.1,29.1);//複選框按鈕gui.add(viewModel, ‘fly’)}

當數值變化時賦值給對象屬性onchange 事件會在域的內容改變時發生

window.onload = function() {var gui = new dat.GUI();gui.add(viewModel, ’emissionRate’,0,100).onChange(function (val) {//操作_this.particleSystem.emissionRate = parseFloat(val);});gui.add(viewModel, ‘particleSize’,2 ,60).onChange(function (val) {_this.particleSystem.particleSize = parseFloat(val);});gui.add(viewModel, ‘miniParticleLife’,0.1,29.1 ).onChange(function (val) {_this.particleSystem.miniParticleLife = parseFloat(val);});gui.add(viewModel, ‘maxiParticleLife’,0.1,29.1 ).onChange(function (val) {_this.particleSystem.maxiParticleLife = parseFloat(val);});}

這裡就可以完成了。

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 怎樣設置web服務器

1.安裝node.js

雙擊運行安裝包，安裝路徑可以自定義，或者默認都可以，安裝完成後，打開命令行，輸入node -v，如果結果為版本號，表明安裝成功。如下圖所示。

如果結果為版本號，表明安裝成功

2.開啟電腦自帶的IIS服務

     打開控制面板（直接搜索即可）

     點擊程序

選擇 啟用或關閉Windows功能

在對話框中根據自己需求選擇功能，不知道怎麼選擇可以全選，來防止因為忘記選擇某一個功能而報錯！

等待下載完成，進度條走完就行了。到此，IIS已開啟。

3.配置cesium到IIS。

右擊 此電腦 ，選擇管理

按照下圖，依次展開，然後在網站上右鍵，選擇添加網站。

在這個框中設定網站名稱，在物理路徑處，選擇cesium的安裝路徑即可。選擇一個IP地址即可，選擇自己所連wifi的某個地址就行。然後確定即可。配置完成。

在瀏覽器中輸入自己剛配置的IP地址，彈出cesium的頁面，就說明環境搭建完成。