1. 程式人生 > >Cesium應用篇:1快速搭建

Cesium應用篇:1快速搭建

       範例中所有範例可以在Github中搜索:ExamplesforCesium

       Cesium ['siːzɪəm]是一款開源的JavaScript開源庫,開發者通過Cesium,實現無外掛的建立三維球和二維地圖。Cesium通過WebGL技術實現圖形的硬體加速,並且跨平臺,跨瀏覽器,並提供動態資料的視覺化展現。

       Cesium本意是化學元素銫,其是定義秒的最精確標準,普遍地用於製作精細的原子鐘,而Cesium專案專注於動態視覺化方面,這也是其取名為Cesium的內在涵義。 

準備工作

  • 瀏覽器
    確保你的瀏覽器支援WebGL,推薦Chrome
    如果無法確定你的瀏覽器是否支援,可以訪問
    webglreport
    網站獲取詳情
  • Tomcat
    在本系列中,使用tomcat,且預設讀者瞭解如何通過tomcat釋出服務
  • 開發環境
    如果沒有特殊喜好,如果自己的開發機器不是特別差,推薦使用WebStorm。該IDE是收費的,不過,你懂的
  • Cesium產品包
    本文中,使用的是Cesium-1.25。通過官網可以方便獲取

產品包清單

clip_image001

  • 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,實現我們第一個範例。

clip_image002

       接著,在hello.html中貼上如下程式碼:

clip_image004

       該程式碼內容如下:1引入Cesium.js指令碼和對應的css檔案,我們就完成了相關指令碼的載入工作;2同時建立id= cesiumContainer的div,並且建立Cesium.Viewer視窗,且該視窗對應剛才建立的div。執行該html檔案,我們很輕鬆的建立了第一個WebGL Globe,效果如下:

clip_image006

Hello World2

       如上,我們輕鬆愉快的體驗了一把Cesium,但這只是萬里長征的一小步。萬事開頭難,所以這個頭一定要做好。

       上面的hello.html本身沒有什麼問題,但對於開發人員,或多或少都需要以原始碼方式載入,便於除錯和問題的定位,但如上的範例直接載入Build下的Release指令碼,對開發人員來說略顯不足,下面我們就升級一下這個範例。

       Cesium採用Require.js的框架,用興趣的同學可以在網上了解一下Require.js的基本概念。我們下載require.min.js指令碼,儲存在Cesium/examples/js/資料夾中,統一管理指令碼。並在examples資料夾中,新建hello2.html.

clip_image007

       在hello2.html中,程式碼如下:

clip_image009

       和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中程式碼如下:

clip_image010

       在該指令碼中,變數developMode來記錄是否以Release或原始碼方式來載入指令碼,並根據該變數值來設定對應的檔案路徑。最後,呼叫onload函式,結束main.js指令碼的使命。

       Onload函式?這個函式在哪裡定義的?細心的使用者不難發現,該函式的實現是在hello2.html中,在該函式中,使用者建立div,並建立Cesium.Viewer視窗繫結該div,實現三維球的載入,其邏輯和hello.html完全一樣,只是封裝在了onload函式內。

       這樣,我們基本上完成了一個完整的範例,可以設定developMode的值,選擇是否需要載入原始碼進行除錯。