購(gòu)物網(wǎng)站開(kāi)發(fā)費(fèi)用武漢百度信息流廣告
文章目錄
- 0.引言
- 1.Cesium環(huán)境搭建
- 1.1安裝Node.js環(huán)境
- 1.2配置Cesium依賴
- 2.搭建第一個(gè)Cesium程序
- 2.1引入源碼編譯結(jié)果
- 2.2創(chuàng)建html文件
- 2.3編寫第一個(gè)Cesium程序
- 2.4申請(qǐng)?jiān)S可密鑰
- 2.5發(fā)布Cesium程序服務(wù)
- 3.界面介紹
- 4.默認(rèn)控件介紹
0.引言
現(xiàn)有的gis開(kāi)發(fā)方向較流行的是webgis開(kāi)發(fā)，其中Cesium是一款開(kāi)源的WebGIS庫(kù)，主要用于實(shí)時(shí)地球和空間數(shù)據(jù)的可視化和分析。它提供了豐富的地圖顯示和數(shù)據(jù)可視化功能，并能實(shí)現(xiàn)三維可視化開(kāi)發(fā)。Cesium適用于地球科學(xué)研究、軍事情報(bào)分析、航空航天領(lǐng)域以及虛擬現(xiàn)實(shí)應(yīng)用等方面。本文是基于Cesium教程進(jìn)行實(shí)踐操作后的總結(jié)，以使新手能快速入門Cesium。
1.Cesium環(huán)境搭建
1.1安裝Node.js環(huán)境
（1）下載Node.js安裝包
進(jìn)入Node.js官網(wǎng)的下載頁(yè)面進(jìn)行下載： https://nodejs.org/en/
??
（2）安裝Node.js
①直接雙擊Node.js。
若安裝時(shí)報(bào)錯(cuò)，這說(shuō)明需要以管理員身份運(yùn)行cmd，然后在cmd中運(yùn)行Node.js安裝程序。
??
②安裝Node.js后，為檢查是否安裝成功，在cmd中輸入：node -v，出現(xiàn)版本號(hào)說(shuō)明安裝成功。
??
1.2配置Cesium依賴
（1）下載Cesium代碼包
訪問(wèn)Cesium官網(wǎng)下載推薦代碼包： https://cesium.com/downloads/
??
（2）安裝Cesium依賴
安裝包下載完成后，將其解壓，進(jìn)入解壓縮后的目錄，輸入“npm install”，安裝Cesium依賴。
??
成功安裝Cesium依賴結(jié)果如下，有少量缺陷報(bào)紅色錯(cuò)誤，不影響依賴Cesium主要功能。
??
（3）啟動(dòng)服務(wù)
在Cesium依賴安裝完成后，先輸入“node server.js”（新版本為server.cjs）來(lái)開(kāi)啟服務(wù)，然后復(fù)制所開(kāi)啟的服務(wù)網(wǎng)址，并在瀏覽器中打開(kāi)（瀏覽器必須支持WebGL，推薦使用Chrome瀏覽器）
??
（4）通過(guò)http-server發(fā)布服務(wù)
①安裝http-server
打開(kāi)命令行，輸入“npm install http-server -g”進(jìn)行安裝。
??
②在文件目錄，輸入“http-server”，即可發(fā)布服務(wù)，復(fù)制發(fā)布后的網(wǎng)址并在瀏覽器打開(kāi)，查看發(fā)布的服務(wù)。
若文件目錄位于：D:\Cesium_Test，在該目錄下啟動(dòng)終端，并輸入指令發(fā)布服務(wù)。
??
以上兩個(gè)地址都可訪問(wèn)，訪問(wèn)結(jié)果如下。
若根目錄中有index.html，將默認(rèn)打開(kāi)該文件。
??
2.搭建第一個(gè)Cesium程序
2.1引入源碼編譯結(jié)果
Cesium程序開(kāi)發(fā)的第一步就是創(chuàng)建一個(gè)新的文件夾，并在文件夾中引入Cesium源碼中的編譯成果，即Cesium源碼中的Build文件夾。
??
2.2創(chuàng)建html文件
打開(kāi)前端編輯器（如Visual Studio Code），首先選擇并打開(kāi)我們新建的文件夾，然后新建文件名為index、后綴為.html的文件。
??
2.3編寫第一個(gè)Cesium程序
??
<!DOCTYPE html>
<html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>我的第一個(gè)Cesium程序</title> <script src="./Build/Cesium/Cesium.js"></script> <link rel="stylesheet" href="./Build/Cesium/Widgets/widgets.css"> <style> html, body, #cesiumContainer { width: 100%; height: 100%; margin: 0; padding: 0; overflow: hidden; } </style>
</head> <body> <div id="cesiumContainer"> </div> <script> Cesium.Ion.defaultAccessToken = '你的密鑰';//輸入密鑰 var viewer = new Cesium.Viewer("cesiumContainer", { geocoder: true, //是否顯示地名查找工具 homeButton: true, //是否顯示首頁(yè)位置工具 sceneModePicker: true, //是否顯示視角模式切換工具 baseLayerPicker: true, //是否顯示默認(rèn)圖層選擇工具 navigationHelpButton: true, //是否顯示導(dǎo)航幫助工具 animation: true, //是否顯示動(dòng)畫工具 timeline: true, //是否顯示時(shí)間軸工具 fullscreenButton: true, //是否顯示全屏按鈕工具 }); </script>
</body> </html>
2.4申請(qǐng)?jiān)S可密鑰
申請(qǐng)一個(gè)token，登錄網(wǎng)址注冊(cè)并申請(qǐng)token： https://cesium.com/ion/signin/tokens
??
2.5發(fā)布Cesium程序服務(wù)
在項(xiàng)目文件夾根目錄啟動(dòng)cmd，然后輸入發(fā)布服務(wù)指令：http-server。
??
訪問(wèn)第一個(gè)網(wǎng)址，結(jié)果如下：
??
3.界面介紹
??
相機(jī)漫游方式：
①住鼠標(biāo)左鍵拖曳：拖動(dòng)相機(jī)在三維地球平面平移。
②按住鼠標(biāo)右鍵拖曳：縮放相機(jī)。
③按住鼠標(biāo)右鍵拖曳：縮放相機(jī)。
④按住鼠標(biāo)滾輪拖曳：根據(jù)當(dāng)前地球的屏幕中點(diǎn)，旋轉(zhuǎn)相機(jī)。
4.默認(rèn)控件介紹
（1）Geocoder
Geocoder是位置查找工具。使用該控件可以輸入要查找的地址，且在找到后，會(huì)將相機(jī)跳轉(zhuǎn)并對(duì)準(zhǔn)找到的結(jié)果。
??
（2）HomeButton
HomeButton是首頁(yè)位置工具。單擊該控件后，會(huì)將相機(jī)跳轉(zhuǎn)到默認(rèn)全球視角，也可以通過(guò)代碼修改跳轉(zhuǎn)位置。
??
（3）SceneModePicker
SceneModePicker是視角模式切換工具。使用該控件可以設(shè)置視角模式為3D、2D及哥倫布視圖（CV）。
當(dāng)切換為2D視角模式時(shí)，地圖只可以平移，不可以旋轉(zhuǎn)；
??
當(dāng)切換為哥倫布視圖視角模式時(shí)，地圖可以平移和旋轉(zhuǎn)，但是始終保持平面顯示。
??
（4）BaseLayerPicker
BaseLayerPicker是默認(rèn)圖層選擇工具，用于選擇要顯示的地圖服務(wù)和地形服務(wù)，這里選擇修改底圖數(shù)據(jù)源為ArcGIS World Imagery。
??
（5）NavigationHelpButton
NavigationHelpButton是導(dǎo)航幫助工具，用于顯示默認(rèn)的地圖控制和幫助選項(xiàng)。
??
（6）Animation
Animation是動(dòng)畫工具，用于控制視圖動(dòng)畫的播放速度，可以設(shè)置地球暫?；蜻\(yùn)動(dòng)，及設(shè)置自轉(zhuǎn)速度。
??
（7）TimeLine
TimeLine是時(shí)間軸工具，用于指示當(dāng)前時(shí)間，并且允許用戶跳轉(zhuǎn)到指定時(shí)間。
??
（8）FullscreenButton
FullscreenButton是全屏按鈕工具。單擊該控件，可以進(jìn)入全屏模式，再次單擊該控件，即可退出全屏模式。
??
參考資料：
[1] 郭明強(qiáng). 《WebGIS之Cesium三維軟件開(kāi)發(fā)》; 2023-04-01 [accessed 2024-01-23].
[2] 獅子座的男孩. 安裝 node 過(guò)程中解決：The installer has encountered an unexpected errorinstalling this package 的問(wèn)題; 2023-06-08 [accessed 2024-01-18].