Cesium中級教程2 - 圖層


Cesium中文網:http://cesiumcn.org/ | 國內快速訪問:http://cesium.coinidea.com/
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:

我們可以通過實現ImageryProvider接口來訪問其他圖層服務。如果你這樣做,並認為它是普遍有用的,請貢獻給Cesium為每個人的利益。

查看參考文檔以了解如何構建特定的imagery provider。我們可以查看SingleTileImageryProvider因為很多imagery providers共享它的構造屬性:

  • url -圖像的url。像許多imagery provider,這是惟一需要的屬性。在其他imagery providers中,這個url指向服務器或服務的根url。
  • extent - 可選參數,圖像應該覆蓋的經緯度矩形。默認情況是覆蓋整個地球。
  • credit - 可選參數,數據源的字符證書, 將顯示到canvas上。 一些imagery providers, 比如 BingMapsImageryProviderArcGIS 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, brightnesscontrast。參見ImageryLayer。將imagery provider和圖層解耦使得添加新的imagery provider變得容易。

像上面例子中的layers一樣,圖層集合確定繪制層的順序。根據添加的順序從下到上繪制圖層。像Cesium中任何其他集合一樣,使用addremoveget等函數對圖層集合進行操作。此外,可以使用raiseraiseToToplowerlowerToBottom對層進行重新排序。參見ImageryLayerCollection

資源

可以從Sandcastle中獲得imagery layers:

另外可以獲得參考文檔:

Cesium中文網交流QQ群:807482793
Cesium中文網:http://cesiumcn.org/ | 國內快速訪問:http://cesium.coinidea.com/


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM