Cesium中級教程1 - 空間數據可視化（一）

Cesium中文網：http://cesiumcn.org/ | 國內快速訪問：http://cesium.coinidea.com/

本教程將教讀者如何使用Cesium的實體（Entity）API繪製空間數據，如點、標記、標籤、線、模型、形狀和物體。不須要Cesium的先驗知識，可是若是讀者徹底沒有這方面的經驗，那麼讀者可能但願從「新手入門中文教程（原創）」開始學習。

什麼是實體（Entity）API？

Cesium具備豐富的用於空間數據的API，能夠分爲兩類：面向圖形開發人員的低級API（一般稱爲原始(Primitive)API）和用於數據驅動的可視化的高級API（稱爲實體(Entity)API）。

原始API的主要目標是暴露手頭執行任務所需的最小抽象量。它但願咱們像圖形程序員同樣思考，並使用圖形術語。它的結構是爲給定的可視化類型提供最有性能和靈活性的實現，而不是爲了API的一致性。加載一個模型不一樣於建立一個廣告牌，二者都與建立多邊形徹底不一樣。每種類型的可視化都有其獨特的特徵。此外，它們各自具備不一樣的性能特徵，而且須要遵循不一樣的最佳實踐。雖然它功能強大且靈活，但大多數應用程序都比Primitive API提供的抽象級別更高。原始API的主要目標是開放手頭當前研發工做的所需的最小抽象量。它但願咱們像圖形程序員同樣思考，並使用圖形術語。它的結構是爲給定的可視化類型提供最有性能和靈活性的實現，而不是爲了API的一致性。加載一個模型不一樣於建立一個廣告牌（Billboard ），二者都與建立多邊形徹底不一樣。每種類型的可視化都有其獨特的特徵。此外，它們各自具備不一樣的性能特徵，而且須要遵循不一樣的最佳實踐。雖然它功能強大且靈活，但大多數應用程序都提供比Primitive API的抽象級別更高的服務接口。

實體API的目的是公開一組設計一致的高級對象，這些對象將相關的可視化和信息聚合到一個統一的數據結構中，咱們稱之爲實體。它讓咱們專一於展現咱們的數據，而不是擔憂可視化的潛在機制。它還提供了易於構建複雜的、時間動態可視化的構造，這種可視化方式與靜態數據天然相適應。雖然實體API實際上在背後使用了原始API(Primitive API)，但這是咱們（幾乎）永遠沒必要關注的實現細節。經過將各類啓發式應用到咱們提供的數據，實體API可以提供靈活的、高性能的可視化，同時公開一致的、易於學習和易於使用的接口。

咱們的第一個實體

學習實體API的基本方法之一是經過查看一些代碼。爲了讓事情簡單化，咱們將在CesiumSandcastle的Hello World例子中構建。若是讀者在本地開發Cesium，能夠自由地使用本身的應用程序。

假設咱們想從經度和緯度的列表中添加一個美國州懷俄明的多邊形。（懷俄明之因此被選中是由於它是一個簡單的多邊形）咱們能夠把下面的代碼複製粘貼到Sandcastle去作：

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

var wyoming = viewer.entities.add({
  name : 'Wyoming',
  polygon : {
    hierarchy : Cesium.Cartesian3.fromDegreesArray([
                              -109.080842,45.002073,
                              -105.91517,45.002073,
                              -104.058488,44.996596,
                              -104.053011,43.002989,
                              -104.053011,41.003906,
                              -105.728954,40.998429,
                              -107.919731,41.003906,
                              -109.04798,40.998429,
                              -111.047063,40.998429,
                              -111.047063,42.000709,
                              -111.047063,44.476286,
                              -111.05254,45.002073]),
    height : 0,
    material : Cesium.Color.RED.withAlpha(0.5),
    outline : true,
    outlineColor : Cesium.Color.BLACK
  }
});

viewer.zoomTo(wyoming);

點擊運行按鈕（或者F8）能看到下面的圖像：

由於咱們的一個目標是讓Cesium的代碼易於理解，但願這是不言自明的。咱們建立了Viewer widget，它充當幾乎全部Cesium應用程序的基礎，而後經過viewer.entities.add. 添加一個新的Entity。咱們傳遞的需add的對象只是一個提供初始值的選項參數。返回值是實際的實體實例。最後，咱們調用 viewer.zoomTo 以確保實體處於視圖中。 有不少實體選項可用，可是如今咱們指定polygon內部的半透明紅色和邊界的黑色輪廓。咱們也給實體一個「Wyoming 懷俄明」的顯示名稱。

形狀和物體

有了建立多邊形的基本知識，而且因爲實體API的同質性，咱們如今能夠經過簡單地使用Sandcastle中的示例做爲參考來建立各類圖形。下面是支持的形狀和物體的完整列表。

材質和輪廓

無論它們的幾何定義如何，全部形狀和物體都有一組共同的屬性來控制它們的外觀。fill屬性是一個布爾值，它指定是否填充了表面的內部，而outline屬性控制形狀的邊緣是否被輪廓化。 當fill設爲true，material屬性決定填充物是什麼。在接下來的例子中，讓咱們建立一個半透明的藍色橢圓。默認狀況下，fill是true，outline是false，因此咱們只須要指定material。

var entity = viewer.entities.add({
  position: Cesium.Cartesian3.fromDegrees(-103.0, 40.0),
  ellipse : {
    semiMinorAxis : 250000.0,
    semiMajorAxis : 400000.0,
    material : Cesium.Color.BLUE.withAlpha(0.5)
  }
});
viewer.zoomTo(viewer.entities);

var ellipse = entity.ellipse; // For upcoming examples

Image

咱們也能夠將材質指定爲一個圖片連接：

ellipse.material = '//cesiumjs.org/tutorials/images/cats.jpg';

在上述兩種狀況下，在賦值時自動爲咱們建立一個ColorMaterialProperty屬性或ImageMaterialProperty屬性。對於更復雜的材料，咱們須要本身建立一個材料屬性實例。目前，實體形狀和物體支持顏色、圖像、棋盤、條紋和網格材料。

棋盤

ellipse.material = new Cesium.CheckerboardMaterialProperty({
  evenColor : Cesium.Color.WHITE,
  oddColor : Cesium.Color.BLACK,
  repeat : new Cesium.Cartesian2(4, 4)
});

條紋

ellipse.material = new Cesium.StripeMaterialProperty({
  evenColor : Cesium.Color.WHITE,
  oddColor : Cesium.Color.BLACK,
  repeat : 32
});

網格

ellipse.material = new Cesium.GridMaterialProperty({
  color : Cesium.Color.YELLOW,
  cellAlpha : 0.2,
  lineCount : new Cesium.Cartesian2(8, 8),
  lineThickness : new Cesium.Cartesian2(2.0, 2.0)
});

輪廓

與fill屬性不一樣，outline沒有相應的材料，而是依賴於兩個獨立的outlineColor和outlineWidth屬性。outlineWidth只適用於非Windows系統，如Android、iOS、Linux和OS X。這是因爲WebGL是如何在Windows上的全部三個主要瀏覽器引擎中實現所限制的。

ellipse.fill = false;
ellipse.outline = true;
ellipse.outlineColor = Cesium.Color.YELLOW;
ellipse.outlineWidth = 2.0;

折線

折線是一種特殊狀況，由於它們沒有填充或輪廓屬性。相反，他們依靠專門的材料來代替顏色。因爲這些特殊材料，不一樣寬度和輪廓寬度的折線將對全部系統起做用。

var entity = viewer.entities.add({
    polyline : {
        positions : Cesium.Cartesian3.fromDegreesArray([-77, 35,
                                                        -77.1, 35]),
    width : 5,
    material : Cesium.Color.RED
}});
viewer.zoomTo(viewer.entities);

var polyline = entity.polyline // For upcoming examples

折線輪廓

polyline.material = new Cesium.PolylineOutlineMaterialProperty({
    color : Cesium.Color.ORANGE,
    outlineWidth : 3,
    outlineColor : Cesium.Color.BLACK
});

折現光暈

polyline.material = new Cesium.PolylineGlowMaterialProperty({
    glowPower : 0.2,
    color : Cesium.Color.BLUE
});

高度與擠壓

覆蓋在地球上的全部形狀，當前是圓、橢圓、多邊形和矩形，也能夠放置在海拔高度或擠壓成一個物體。在這兩種狀況下，形狀或物體仍然符合其下方的地球曲率。

對於高度，咱們所要作的就是在相應的圖形對象上設置高度屬性，對於上面列出的全部形狀都是同樣的。這多是提到Cesium老是使用米、弧度和秒做爲單位的好時機，除非函數明確地表示了其餘狀況，好比Cartesian3.fromDegrees。下面的代碼行將多邊形提高到地球上方250000米處。

wyoming.polygon.height = 250000;

將形狀擠壓成物體一樣容易，咱們只須要設置extrudedHeight 屬性。物體將在height和extrudedHeight 之間產生。若是height是undefined，則物體從0開始。爲了創造一個物體從200000米開始，延伸到250000米，咱們可使用下面的代碼。這固然意味着物體自己是50000米高。

wyoming.polygon.height = 200000;
wyoming.polygon.extrudedHeight = 250000;

Cesium中文網交流QQ羣：807482793

Cesium中文網：http://cesiumcn.org/ | 國內快速訪問：http://cesium.coinidea.com/