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。經過官網能夠方便獲取

 

產品包清單

• 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的值，選擇是否須要加載源碼進行調試。