文章出處

一、Cesium介紹

Cesium是國外一個基于JavaScript編寫的使用WebGL的地圖引擎。Cesium支持3D,2D,2.5D形式的地圖展示，可以自行繪制圖形，高亮區域，并提供良好的觸摸支持，且支持絕大多數的瀏覽器和mobile。

二、Cesium特點

1、一個API - 三種視圖

Cesium支持三維地球（3D），二維地圖（2D）以及2.5D哥倫布視圖（2.5D）。

2.5D

2、動態地理空間數據的可視化

通過CZML創建數據驅動的時間動態場景。
高分辨率的世界地形可視化。
使用WMS，TMS，openstreetmaps，Bind以及ESRI的標準繪制影像圖層。
使用KML，GeoJSON和TopoJSON繪制矢量數據。
使用COLLADA和glTF繪制3D模型。
使用插件擴展核心Cesium。

3、內置的高性能和高精度

優化的WebGL，充分利用硬件渲染圖形，使用低級別的幾何和渲染程序。
繪制大范圍的折線，多邊形，廣告牌，標簽，擠壓以及走廊。
控制攝像頭和創造飛行路徑。
使用動畫控件控制動畫時間。

三、Cesium示例

以下將示例如何運行一個Cesium應用程序：

1、確保瀏覽器支持Cesium

驗證Cesium在Web瀏覽器中工作的最簡單方法是運行HelloWorld例子，點擊這里。如果你看到一些像下面的圖片，恭喜你，你運行的該Web瀏覽器支持運行Cesium，那么你可以跳到下一部分閱讀；否則，繼續閱讀。

Cesium是建立在幾個新的HTML5技術之上的，其中最重要的是WebGL。雖然這些新的標準正在迅速成為廣泛采用，但一些瀏覽器和系統需要升級從而支持他們。如果示例應用程序允許失敗，你可以嘗試以下的建議：

（1）更新您的Web瀏覽器。大多數的Cesium團隊使用Google Chrome，但Firefox，IE 11以及Opera也能運行。如果你正在用這些瀏覽器，請確保更新它到最新版本。

（2）更新您的顯卡驅動從而更好地支持3D。如果你知道你正用的是什么類型的顯卡，你可以檢查進行更新。三個最流行的顯卡提供商是：Nvidia, AMD以及 Intel。

（3）如果你仍然有問題，嘗試訪問http://get.webgl.org/，它提供了額外的問題解決建議。你也可以在Cesium論壇尋求幫助。

2、選擇編輯器或IDE

如果你已經是一個經驗豐富的開發者，你很可能會有一個最喜愛的編輯器和開發環境；例如，大多數的Cesium的團隊使用日蝕。如果你剛剛開始，一個偉大的自由和開放源碼編輯器，記事本++，你可以從網上下載他們的網站。最終，任何文本編輯器會做的，所以去一個你最舒服。

3、下載Cesium

如果你還沒有這樣做，點擊這個按鈕來獲取最新的Cesium：下載Cesium。
下載完成之后將zip文件解壓到你選擇的新目錄，解壓之后文件目錄類似于下圖。

不能直接雙擊運行index.html，在實際工作中，它需要運行在Web服務器上。

4、設置Web服務器

為了運行Cesium的應用，我們需要一個本地Web服務器的主機文件。我們所有的例子將使用Node.js。當然你也可以使用自己的服務器，只要把上一節的目錄放在服務器根目錄下。

設置一個Web服務器通過Node.js是很容易的，只需要3個步驟：

（1）從安裝Node.js網站，你可以使用默認安裝設置。

（2）打開命令行，然后進入Cesium的根目錄，通過npm install下載安裝所需要的模塊。
最后，在根目錄執行node server.js啟動Web服務器。

（3）此時您將看到下圖：

5、運行Hello world!

現在我們的Cesium已經運行在Web服務器上，我們可以啟動Web瀏覽器并輸入網址http://localhost:8080/HelloWorld.html。這與我們剛開始測試WebGL時看到的Hello World應用程序是一樣的，但現在是運行在你自己的系統中，而不是在Cesium網站上。如果我們在編輯器中打開helloworld.html，我們會看到以下代碼：

<!DOCTYPE html>
<html lang="en">
<head>
  <!-- Use correct character set. -->
  <meta charset="utf-8">
  <!-- Tell IE to use the latest, best version. -->
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <!-- Make the application on mobile take up the full browser screen and disable user scaling. -->
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
  <title>Hello World!</title>
  <script src="../Build/Cesium/Cesium.js"></script>
  <style>
      @import url(../Build/Cesium/Widgets/widgets.css);
      html, body, #cesiumContainer {
          width: 100%; height: 100%; margin: 0; padding: 0; overflow: hidden;
      }
  </style>
</head>
<body>
  <div id="cesiumContainer"></div>
  <script>
    var viewer = new Cesium.Viewer('cesiumContainer');
  </script>
</body>
</html>

以下四行將添加到你的應用程序中：

（1）引入cesium.js。該文件定義了Cesium對象，它包含了我們需要的一切。

<script src="../Build/Cesium/Cesium.js"></script>

（2）為了能使用Cesium各個可視化控件，我們需要引入widgets.css。

@import url(../Build/Cesium/Widgets/widgets.css);

（3）在HTML的body中我們創建一個DIV，用來作為三維地球的容器。

<div id="cesiumContainer"></div>

（4）最后，在js中初始化CesiumViewer實例。

var viewer = new Cesium.CesiumViewer('cesiumContainer');

6、接下來干嘛

通過以上的學習，恭喜你，你已經開始寫你自己的Cesium應用和網頁了。那么根據自己的情況，你可能對其他Cesium教程感興趣。如果你是一個新手，通過Cesium Sandcastle這個編碼的應用，您不僅可以查看幾十個實例，也可以查看和編輯自己的源代碼，從應用程序中運行查看你的改變。最后，無論你如何學習，參考文獻對每個人來說都是一個非常寶貴的資源。