翻譯 Cesium入門教程(二)------圖層 Imagery Layers

轉載請註明出處 http://my.oschina.net/u/149294/blog/202464

本人建了一個QQ羣：115883691，歡迎你們一塊兒來討論Cesium相關技術

Cesium支持經過許多標準的服務，渲染和以圖層的方式組織高分辨率的地圖，圖層能夠是有序的而且能夠融合（blend）在一塊兒。每一個圖層的亮度、對比度、伽馬值、色調以及飽和度都能動態的更改。本教程將介紹一個圖層方面的概念和相關的Cesium APIs。

開搞

咱們先暫時忽略掉一些細節，直接開始寫幾句代碼來添加一些圖層。首先打開Sandcastle中得HelloWorld。這個例子建立了一個CesiumWidget，它包含了一個渲染Bing maps的單一圖層。經過個CesiumWidget的構造函數傳遞一個附加參數，咱們能夠另外定義一個底圖圖層。咱們使用Esri ArcGIS MapServer的數據做爲底圖。

var widget = new Cesium.CesiumWidget('cesiumContainer', {
    imageryProvider : new Cesium.ArcGisMapServerImageryProvider({
        url : 'http://server.arcgisonline.com/ArcGIS/rest/services/World_Street_Map/MapServer',        proxy : new Cesium.DefaultProxy('/proxy/')
})});

修改完之後，按F8來運行。

如今咱們能夠對它進行放大縮小，數據是根據當前須要進行載入的。因爲Esri的服務不支持跨域資源共享，因此咱們提供了一個代理（其實它的代理被牆了，因此也訪問不了）。

接下來，使用Tile Map Service(TMS)再添加一個NASA Black Marble的圖層。

var blackMarble = layers.addImageryProvider(new Cesium.TileMapServiceImageryProvider({
    url : 'http://cesiumjs.org/blackmarble',    maximumLevel : 8,
    credit : 'Black Marble imagery courtesy NASA Earth Observatory'
}));

因爲它是最後添加的而且覆蓋整個地球，因此Black Marble覆蓋了Esri的圖層。固然咱們能夠經過layers.lower(blackMarble);將它移到Esri的下面，可是跟清晰的展現圖層一件的聯繫，咱們最好是將它與Esri圖層進行一個混合。

blackMarble.alpha = 0.5; // 0.0 is transparent.  1.0 is opaque.

接下來咱們增長blackMarble的亮度。

blackMarble.brightness = 2.0; // > 1.0 increases brightness.  < 1.0 decreases.

最後，咱們添加第三個圖層，在一個特定的範圍內渲染一張圖片。

layers.addImageryProvider(new Cesium.SingleTileImageryProvider({
    url : '../images/Cesium_Logo_overlay.png',
    extent : new Cesium.Extent(
        Cesium.Math.toRadians(-75.0),
        Cesium.Math.toRadians(28.0),
        Cesium.Math.toRadians(-67.0),
        Cesium.Math.toRadians(29.75))
}));

最終的完整代碼以下：

var widget = new Cesium.CesiumWidget('cesiumContainer', {
    imageryProvider : new Cesium.ArcGisMapServerImageryProvider({
        url : 'http://server.arcgisonline.com/ArcGIS/rest/services/World_Street_Map/MapServer',        proxy : new Cesium.DefaultProxy('/proxy/')
})});

var layers = widget.centralBody.getImageryLayers();
var blackMarble = layers.addImageryProvider(new Cesium.TileMapServiceImageryProvider({
    url : 'http://cesiumjs.org/blackmarble',    
    maximumLevel : 8,
    credit : 'Black Marble imagery courtesy NASA Earth Observatory'
}));

blackMarble.alpha = 0.5;
blackMarble.brightness = 2.0;

layers.addImageryProvider(new Cesium.SingleTileImageryProvider({
    url : '../images/Cesium_Logo_overlay.png',
    extent : new Cesium.Extent(
        Cesium.Math.toRadians(-75.0),
        Cesium.Math.toRadians(28.0),
        Cesium.Math.toRadians(-67.0),
        Cesium.Math.toRadians(29.75))
}));

能夠在Sandcastle中查看完整的例子。

接下來，我將詳細的探討有關圖層的重要功能。首先是imagery providers，它支持許多獲取地圖數據的標準協議。

轉載請註明出處 http://my.oschina.net/u/149294/blog/202464

Imagery providers

像前面用到的兩個高分辨率的地圖數據，對於咱們電腦的內存甚至單一的硬盤來說都太大了。因此咱們把它分割成許多小的圖片，或者叫瓦片（tiles），這樣咱們就能夠根據視圖所在位置動態的按需載入。對於使用imagery providers請求瓦片數據，Cesium支持很是多的標準，多數是使用REST風格的接口經過HTTP來請求瓦片。不一樣的Imagery provider的區別在於請求的格式和瓦片的組織方式。Cesium支持一下幾種imagery provider：

• Web Map Service(WMS) - 一個向分佈式地理空間數據庫請求瓦片數據的OGC標準。在Cesium中參見，WebMapServiceImageryProvider。

• Tile Map Service(TMS) - 訪問地圖瓦片的REST風格接口。瓦片可使用MapTiler或者GDAL2Tiles生成。在Cesium中參見，TileMapServiceImageryProvider。

• OpenStreetMap - 訪問OpenStreetMap地圖瓦片或者其餘Slippy map tiles。有多種方式來host there tiles。參見OpenStreetMapImageryProvider。

• Bing Maps - Uses Bing Maps REST Services to access tiles.參見BingMapsImageryProvider.

• Esri ArcGIS MapServer - 經過ArcGIS Server REST API 來訪問託管在 ArcGIS MapServer上的瓦片。參見ArcGIsMapServerImageryProvider。

• Google Earth Enterprise - 提供對託管在Google Earth企業服務器上的數據的訪問。參見GoogleEarthImageryProvider。

• Standard image files - 經過一張單一圖片來建立瓦片。參見SingleTileImageryProvider。

• Tile coordinates - 經過特殊的瓦片來展現地球是怎樣被劃分紅一個一個的瓦片的。

經過實現ImageryProvider接口，咱們也能夠實現對其餘地圖服務的訪問。假如你這樣作過，但願你能將你的代碼貢獻給Cesium，這樣你們都能從中獲益。

關於怎樣建立一個自定義的imagery provider請參見文檔。咱們來看看SingleTileImageryProvider的構造函數參數，其餘的跟他是同樣的。

• url - 圖片的url。和其餘Imagery Provider同樣，這個參數是必須的。在其餘Imagery Provider中這個地址一般指向服務器或者服務的根目錄。

• extent - 可選參數，以經緯度來定義的圖片的覆蓋範圍。默認是整個地球。

• credit - 可選參數，數據的版權說明，顯示在畫布的左下角，有的provider像BingMapsImageryProvider和Arcgis server REST API還會有一個logo或者指向服務的字符串。

• proxy - 可選參數，代理，用來解決資源跨域共享的問題。

資源跨域共享

做爲一種安全機制，當今的瀏覽器一般蛋疼的阻止javascript讀取那些來自其餘網站的圖片數據。特別是Cesium這樣的WebGL程序，禁止使用那些來自不一樣主機或端口而且服務器沒有顯示聲明能夠那麼用的圖片（在本例中是瓦片數據）來做爲紋理。服務器能夠經過在HTTP響應中包含Cross Origin Resource Sharing（CORS）頭，來代表圖像數據不包含機密數據，而且能夠安全的被其餘網站讀取。

不幸的是，並非全部的地圖服務都支持CORS。對於那些不支持的，那就必須在託管Cesium程度網站上添加一個代理。使用代理之後，這些瓦片數據對於瀏覽器和Cesium程序來講就像他們原本就是同源的同樣了。要使用代理，能夠在imagery provider的構造的時候，使用proxy屬性便可。Cesium包含有一個java寫的簡單的代理，最好不要用於生產環境下，就像前面看到的：

layers.addImageryProvider(new Cesium.ArcGisMapServerImageryProvider({
    url : 'http://server.arcgisonline.com/ArcGIS/rest/services/World_Street_Map/MapServer',        proxy : new Cesium.DefaultProxy('/proxy/')
}));

假如你正想託管你的地圖數據，咱們建議你使用這裏的方式，而不是使用代理。

Imagery providers（數據源） vs layers（圖層）

到目前爲止，咱們尚未解釋imager providers 和圖層（layers）之間的不一樣。imagers providers負責從一個指定的服務地址請求瓦片數據，而layers負責組織和顯示這些瓦片。代碼以下：

var layer = layers.addImageryProvider(imageryProvider);

分解開就是

var layer = new ImageryLayer(imageryProvider);
layers.add(layer);

咱們一般先構建一個imagery provider，再用它來構建一個圖層，而後咱們就能夠經過圖層提供的一些屬性（像show，alpha，brightness，contrast）來改變地圖的外觀了。參見ImageryLayer。對imagery provider和layers進行解耦，可讓咱們更方便的建立新的數據源。

一個圖層的集合，如上面提到的layers，決定了圖層被渲染的順序。圖層是以他們被添加的前後，從下到上的順序被渲染的。對於這個集合，你能夠像操做其餘集合同樣操做它，調用add，remove以及get這些函數。另外你還可使用raise，raiseToTop，lower或者lowerToBottom來改變圖層的順序。

其餘資源

沒事多看看Sandcastle中關於圖層的例子

• Imagery Layers - 就只這篇

• Imagery Layers Manipulation - 組織來自多個數據源的圖層以及單獨修改他們的alpha值。

• Imagery Adjustment - 調整亮度、對比度、伽馬值等。

• Black Marble - NASA Black Marble imagery.

另外能夠看看文檔

All imagery providers

ImageryLayer

ImageryLayerCollection

再不行，去論壇請教大神，附上地址