Cesium應用篇:1快速搭建
範例中所有範例可以在Github中搜索:ExamplesforCesium
Cesium ['siːzɪəm]是一款開源的JavaScript開源庫,開發者通過Cesium,實現無外掛的建立三維球和二維地圖。Cesium通過WebGL技術實現圖形的硬體加速,並且跨平臺,跨瀏覽器,並提供動態資料的視覺化展現。
Cesium本意是化學元素銫,其是定義秒的最精確標準,普遍地用於製作精細的原子鐘,而Cesium專案專注於動態視覺化方面,這也是其取名為Cesium的內在涵義。
準備工作
- 瀏覽器
確保你的瀏覽器支援WebGL,推薦Chrome
如果無法確定你的瀏覽器是否支援,可以訪問 - Tomcat
在本系列中,使用tomcat,且預設讀者瞭解如何通過tomcat釋出服務 - 開發環境
如果沒有特殊喜好,如果自己的開發機器不是特別差,推薦使用WebStorm。該IDE是收費的,不過,你懂的 - Cesium產品包
本文中,使用的是Cesium-1.25。通過官網可以方便獲取
產品包清單
- Apps
Cesium詳細的範例程式,建議都自己仿照著敲一遍,會有不少收穫 - Build
Release包,打包後的指令碼以及CSS,Workers等,以及文件 - Source
原始碼 - Specs
Cesium的自動化單元測試,採用Jasmine框架 ,這個也是非常好用的,可以實現自動化測試框架以及介面覆蓋率等統計效果,會面會有一個具體章節來介紹 - 其他
gulpfile.js:打包指令碼,後續會有專門介紹
Hello,World
看到index.html,相信你已經忍不住的雙擊了。很遺憾,WebGL出於安全性的考慮,不允許以本地file的方式開啟,因此,你需要將Cesium資料夾放到tomcat中webapps下發布,以localhost的方式釋出。(如果你不瞭解如何在tomcat中釋出網站,不用擔心,這個過程非常簡單,Google一下,相信會有很多相關博文可供參考。)
下面,我們試著完成一個頁面,建立一個Cesium三維球。
首先,新建examples資料夾,並在examples資料夾中新建檔案hello.html,實現我們第一個範例。
接著,在hello.html中貼上如下程式碼:
該程式碼內容如下:1引入Cesium.js指令碼和對應的css檔案,我們就完成了相關指令碼的載入工作;2同時建立id= cesiumContainer的div,並且建立Cesium.Viewer視窗,且該視窗對應剛才建立的div。執行該html檔案,我們很輕鬆的建立了第一個WebGL Globe,效果如下:
Hello World2
如上,我們輕鬆愉快的體驗了一把Cesium,但這只是萬里長征的一小步。萬事開頭難,所以這個頭一定要做好。
上面的hello.html本身沒有什麼問題,但對於開發人員,或多或少都需要以原始碼方式載入,便於除錯和問題的定位,但如上的範例直接載入Build下的Release指令碼,對開發人員來說略顯不足,下面我們就升級一下這個範例。
Cesium採用Require.js的框架,用興趣的同學可以在網上了解一下Require.js的基本概念。我們下載require.min.js指令碼,儲存在Cesium/examples/js/資料夾中,統一管理指令碼。並在examples資料夾中,新建hello2.html.
在hello2.html中,程式碼如下:
和hello.html的程式碼相似,但我們並沒有直接引用Build下的Cesium.js指令碼,而是引用了require.js指令碼:
<script src="./js/require.min.js" data-main="./js/main"></script>
data-main屬性可以在require指令碼載入結束後,指定載入的第一個檔案,這裡是main.js(儲存在Cesium/examples/js/下)。
main.js中程式碼如下:
在該指令碼中,變數developMode來記錄是否以Release或原始碼方式來載入指令碼,並根據該變數值來設定對應的檔案路徑。最後,呼叫onload函式,結束main.js指令碼的使命。
Onload函式?這個函式在哪裡定義的?細心的使用者不難發現,該函式的實現是在hello2.html中,在該函式中,使用者建立div,並建立Cesium.Viewer視窗繫結該div,實現三維球的載入,其邏輯和hello.html完全一樣,只是封裝在了onload函式內。
這樣,我們基本上完成了一個完整的範例,可以設定developMode的值,選擇是否需要載入原始碼進行除錯。