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:
- 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.com/創建Bing地圖的keys。在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。
另外可以獲得參考文檔:
Cesium中文網交流QQ群:807482793
Cesium中文網:http://cesiumcn.org/ | 國內快速訪問:http://cesium.coinidea.com/