Cesium中級教程2 - 圖層

Cesium支持從幾個標準服務繪製和添加高分辨率圖像（地圖）圖層。圖層能夠按順序排列，並混合在一塊兒。每一層的亮度、對比度、伽瑪、色調和飽和度能夠動態地改變。本節教程介紹了圖層的概念以及相關的Cesuim APIs。

快速入門

咱們暫時忽略細節，直接編寫代碼來添加一些圖像層。在Sandcastle中打開Hello World示例。此示例建立一個Viewer組件，默認狀況下，該組件呈現Bing Maps圖層。咱們能夠經過向Viewer構造函數提供附加參數來指定不一樣的基礎圖層。讓咱們使用來自Esri ArcGIS MapServer的圖層：

var viewer = new Cesium.Viewer('cesiumContainer', {
    imageryProvider : new Cesium.ArcGisMapServerImageryProvider({
        url : '//services.arcgisonline.com/ArcGIS/rest/services/World_Street_Map/MapServer'
    }),
    baseLayerPicker : false
});

修改樣例後，按F8來運行：

咱們能夠經過滑動鼠標滾輪放縮，來看到實際的圖層流的變化。

接下來, 添加另外一個圖層: NASA Black Marble imagery 基於 Tile Map Service (TMS):

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

由於黑色大理石層是最後加上的一層，覆蓋了整個地球，因此黑色大理石圖層覆蓋了 Esri圖層。咱們能夠把黑色大理石圖層移到底部layers.lower(blackMarble);，可是爲了讓咱們能更好地理解這兩層之間的關係，讓咱們把它和Esri圖層混合：

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

下一步，調高燈光的亮度：

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

最後，添加一個單獨的圖像做爲第三層做爲特定的擴展。

layers.addImageryProvider(new Cesium.SingleTileImageryProvider({
    url : '../images/Cesium_Logo_overlay.png',
    rectangle : Cesium.Rectangle.fromDegrees(-75.0, 28.0, -67.0, 29.75)
}));

完整代碼以下：

var viewer = new Cesium.Viewer('cesiumContainer', {
    imageryProvider : new Cesium.ArcGisMapServerImageryProvider({
        url : '//services.arcgisonline.com/ArcGIS/rest/services/World_Street_Map/MapServer'
    }),
    baseLayerPicker : false
});

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

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

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

layers.addImageryProvider(new Cesium.SingleTileImageryProvider({
    url : '../images/Cesium_Logo_overlay.png',
    rectangle : Cesium.Rectangle.fromDegrees(-75.0, 28.0, -67.0, 29.75)
}));

在Sandcastle中查看完整樣例

現有的圖層

ion Assets tab in Sandcastle包含由Cesiumion託管的圖層應用，能夠在Cesium的應用中添加幾行代碼來使用圖層服務。

ImageryProvider

上面使用的前兩層這樣的高分辨率圖像太大，沒法放入內存，甚至沒法放入單個磁盤，所以圖像被劃分爲較小的圖像，稱爲tiles（瓦片），能夠根據視圖將圖像流傳輸到客戶端。Cesium支持使用ImageryProvider請求瓦片圖的幾種標準。大多數ImageryProvider使用HTTP上的REST接口來請求瓦片圖。ImageryProvider根據請求的格式和組織方式的不一樣而不一樣。Cesium內置如下ImageryProvider：

• Web Map Service (WMS) - OGC標準，用於從分佈式地理空間數據庫中請求地理區域的地圖塊。在Cesium中，請參見WebMapServiceImageryProvider。
• Tile Map Service (TMS) - 訪問瓦片圖的Rest接口。瓦片圖被轉換爲MapTiler或GDAL2Tiles.參見TileMapServiceImageryProvider。
• OpenGIS Web Map Tile Service (WMTS) - 一個OGC標準，用於在互聯網上提供預先繪製的地理參考瓦片圖。在Cesium中，請參見WebMapServiceImageryProvider。
• OpenStreetMap - 訪問OpenStreetMap瓦片圖或任何Slippy瓦片圖。有幾種方式能夠host these tiles 在Cesium中，請參加createOpenStreetMapImageryProvider。
• Bing Maps - 使用Bing Maps REST Services訪問瓦片圖。 在https://www.bingmapsportal.co...。在Cesium中, 請參見BingMapsImageryProvider。
• Esri ArcGIS MapServer - 使用ArcGIS Server REST API來訪問ArcGIS MapServer上的瓦片圖. 在Cesium中,請參見ArcGisMapServerImageryProvider。
• Google Earth Enterprise - 提供對存儲Google Earth Enterprise服務器中的圖層的訪問。在Cesium中，請參見GoogleEarthImageryProvider。
• Mapbox - 使用Mapbox API訪問瓦片圖. 建立一個帳戶並提供access token. 在Cesium中, 請參見MapboxImageryProvider。
• Standard image files - 從圖片中建立圖層。在Cesium中, 請參見SingleTileImageryProvider。
• Custom tiling schemes - 使用UrlTemplateImageryProvider,經過使用URL模板，咱們能夠鏈接到大量圖像源。 例如, TMS的url模板是 //cesiumjs.org/tilesets/imagery/naturalearthii/{z}/{x}/{reverseY}.jpg.
• Tile coordinates - 經過繪製每一個瓦片圖周圍的邊界並用其水平、X和Y座標標記它，顯示如何在特定的瓦片方案中將地球劃分爲多個瓦片圖。

咱們能夠經過實現ImageryProvider接口來訪問其餘圖層服務。若是你這樣作，並認爲它是廣泛有用的，請貢獻給Cesium爲每一個人的利益。

查看參考文檔以瞭解如何構建特定的imagery provider。咱們能夠查看SingleTileImageryProvider由於不少imagery providers共享它的構造屬性：

• url -圖像的url。像許多imagery provider，這是唯一須要的屬性。在其餘imagery providers中，這個url指向服務器或服務的根url。
• extent - 可選參數，圖像應該覆蓋的經緯度矩形。默認狀況是覆蓋整個地球。
• credit - 可選參數，數據源的字符證書, 將顯示到canvas上。 一些imagery providers, 好比 BingMapsImageryProvider 和 ArcGIS Server REST API, 能夠直接從他們的服務獲取字符證書或logo。
• proxy - 可選參數，用於請求服務的代理，能夠帶給咱們跨域共享資源。

跨域資源共享

基於安全考量，今天的Web瀏覽器會努力防止Javascript代碼讀取來自不一樣站點的圖像像素。特別是，若是像Cesium這樣的WebGL應用程序，訪問來自不一樣的主機名或端口，而且服務器不顯式地容許以這種方式使用圖像，則禁止將圖像用做紋理。服務器指示圖像不包含機密信息，所以經過在HTTP響應中包括跨源資源共享(CORS)頭部，其餘站點讀取它們的像素是安全的。

不幸的是，並不是全部的圖像服務都支持CORS。對於那些不是，必須使用與託管Cesium的網站同源的代理服務器。當使用這種代理時，對於Web瀏覽器和Cesium客戶機來講，tile就好像它們來自與基於Cesium的網站相同的起源同樣。若要與圖像提供程序一塊兒使用代理，請在構造圖像提供程序時使用代理屬性。Cesium包含一個用Node.js編寫的用於開發的簡單代理。

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

若是您正在託管公共圖層，咱們鼓勵啓用本文所述的CORS，而不是使用代理。

ImageryProvider與圖層

到目前爲止，咱們尚未明確區分ImageryProvider和圖層。ImageryProvider使用特定服務請求圖層，而圖層表示來自ImageryProvider的顯示圖層。代碼以下：

var layer = layers.addImageryProvider(imageryProvider);

是下列代碼的簡寫

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

咱們一般構造一個imagery provider僅用於建立一個圖層，而後咱們利用他的屬性，例如show, alpha, brightness和contrast。參見ImageryLayer。將imagery provider和圖層解耦使得添加新的imagery provider變得容易。

像上面例子中的layers同樣，圖層集合肯定繪製層的順序。根據添加的順序從下到上繪製圖層。像Cesium中任何其餘集合同樣，使用add、remove和get等函數對圖層集合進行操做。此外，可使用raise、raiseToTop、lower和lowerToBottom對層進行從新排序。參見ImageryLayerCollection。

資源

能夠從Sandcastle中得到imagery layers:

• Imagery Layers - 教程中的代碼樣例
• Imagery Layers Manipulation - 從多數據源中得到的圖層，支持獨立的透明度調整。
• Imagery Adjustment - 調整圖層的brightness, contrast, gamma, hue和saturation。

另外能夠得到參考文檔：

• All imagery providers
• ImageryLayer
• ImageryLayerCollection

Cesium中文網交流QQ羣：807482793

本文由 admin 創做，採用 知識共享署名 3.0 中國大陸許可協議 進行許可。 可自由轉載、引用，但需署名做者且註明文章出處。