Cesium官方教程4--影像圖層

原文地址：https://cesiumjs.org/tutorials/Imagery-Layers-Tutorial/

影像圖層

Cesium支持多種服務(wù)來(lái)源的高精度影像（地圖）數(shù)據(jù)的加載和渲染。圖層支持排序和透明混合。每個(gè)圖層的 亮度（brightness）,對(duì)比度（ contrast）, gamma, hue, and saturation 都可以動(dòng)態(tài)修改。

快速開(kāi)始

我們忽略細(xì)節(jié)，直接寫代碼去添加一些影像圖層。打開(kāi)SandCastle中的 Hello World 示例. 這個(gè)示例創(chuàng)建了一個(gè)Viewer控件，并且只包含一個(gè)Bing影像圖層。可以在Viewer的構(gòu)造函數(shù)里設(shè)定一個(gè)不同類型的底圖圖層。我們用一個(gè) Esri ArcGIS 在線服務(wù)圖層：

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

修改代碼后，按F8運(yùn)行。

ArcGIS在線圖層

當(dāng)放大縮小的時(shí)候，圖層數(shù)據(jù)按需漸進(jìn)加載。
下來(lái)，添加另一個(gè)圖層：NASA Black Marble 影像 ，它使用 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'
}));
NASA Black Marble 影像

因?yàn)樗呛筇砑拥牟⑶腋采w了整個(gè)地球， Black Marble 圖層完全蓋住了Esri圖層。我們可以使用layers.lower(blackMarble);把Black Marble圖層移到下面。我們也可以讓這個(gè)圖層和Esri圖層混合，這樣看起來(lái)兩個(gè)圖層融合在一起了：

blackMarble.alpha = 0.5; // 0.0  全透明.  1.0 不透明.
半透明圖層

接著，增加一下亮度:

blackMarble.brightness = 2.0; // > 1.0 增加亮度  < 1.0減少亮度
亮度調(diào)整

添加第三個(gè)單一圖片的圖層，它只覆蓋某個(gè)范圍：

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; 

blackMarble.brightness = 2.0; 

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

可以查看Sandcastle的 完整示例 .
接著，我們會(huì)看到更詳細(xì)的更重要的影像圖層功能。首先，我們來(lái)看看提供了影像圖層訪問(wèn)數(shù)據(jù)標(biāo)準(zhǔn)的各種Provider。

可以使用的影像圖層

使用CesiumLab可以很方便的把你的影像圖層切片，并且它自帶了加載示例代碼，很容易就添加到你的Cesium項(xiàng)目里了。

影像providers

像前面兩個(gè)高精度影像數(shù)據(jù)非常大，大到甚至占用一整塊硬盤。所以為了客戶端能依據(jù)當(dāng)前視野范圍漸進(jìn)加載，影像經(jīng)常被切分成很多小的圖片，這個(gè)過(guò)程叫 切片（tiles）。 Cesium使用imagery providers屬性支持若干種切片請(qǐng)求標(biāo)準(zhǔn)。大部分影像providers使用HTTP協(xié)議 REST 接口方式請(qǐng)求數(shù)據(jù)。依據(jù)切片的組織形式和請(qǐng)求形式不同，影像數(shù)據(jù)分為幾種providers。Cesium支持下列標(biāo)準(zhǔn)：

也可以通過(guò)實(shí)現(xiàn) ImageryProvider 接口支持其他類型的影像服務(wù)。如果你這么做了，那么肯定非常有用，請(qǐng) 貢獻(xiàn)給Cesium，每個(gè)人都能使用。
如何去創(chuàng)建某種特定的影像provider，看一下詳細(xì)文檔 。因?yàn)楹芏嘤跋駊rovider都有這些屬性，所以我們重點(diǎn)看下 SingleTileImageryProvider。

  • url - 圖片地址。對(duì)于大部分影像provider，這個(gè)屬性是唯一必須的屬性。其他影像provider，這個(gè)url一般指的是影像服務(wù)的根路徑。
  • extent - 可選屬性，影像覆蓋的經(jīng)緯度范圍 ，默認(rèn)是全球。
  • credit - 可選屬性，數(shù)據(jù)源的版權(quán)信息，它會(huì)在地圖上顯示出來(lái)。一些影像provider，像 BingMapsImageryProvider 和ArcGIS Server REST API, 會(huì)自動(dòng)從服務(wù)獲取版權(quán)信息。
  • proxy -可選屬性，請(qǐng)求服務(wù)的代理服務(wù)器，一般用來(lái)解決跨域問(wèn)題。

跨域資源訪問(wèn)

基于安全性考慮，當(dāng)今的瀏覽器煞費(fèi)苦心的去防止javascipt代碼讀取來(lái)自其他網(wǎng)站的圖片像素信息。像Cesium這樣的基于WebGL的項(xiàng)目，在一些條件下是不能把圖片轉(zhuǎn)成紋理 ，這個(gè)條件是：圖片來(lái)自其他服務(wù)器或者其他端口，并且服務(wù)器也沒(méi)有明確聲明允許跨域訪問(wèn)。為了解決這個(gè)問(wèn)題：服務(wù)器通過(guò)設(shè)置HTTP響應(yīng)的 Cross-Origin Resource Sharing (CORS) 頭(header）來(lái)明確表示圖片里不包含機(jī)密信息，因此被其他網(wǎng)站讀取像素值是安全的。
很可惜，不是所有的影像服務(wù)器都支持CORS。如果沒(méi)有這個(gè)頭，那么應(yīng)該設(shè)置一個(gè)Cesium所在服務(wù)器的代理服務(wù)器地址。當(dāng)使用這個(gè)代理，圖片就像來(lái)源于這個(gè)基于Cesium的網(wǎng)站，最終到達(dá)瀏覽器和Cesium客戶端中。當(dāng)創(chuàng)建一個(gè)影像Provider的時(shí)候，填充proxy屬性。Cesium包含一個(gè)簡(jiǎn)單的代理服務(wù)器 ，基于Node.js，開(kāi)發(fā)方便大家開(kāi)發(fā)調(diào)試。

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

如果你架設(shè)了一個(gè)公開(kāi)影像服務(wù)，我們鼓勵(lì)你啟用CORS，就像這里 ，而不是使用一個(gè)代理服務(wù)器。

影像providers 和 . layers 對(duì)比

至此，我們還不是太清楚影像provider和圖層的差異。一個(gè)影像Provider使用某種特定服務(wù)去請(qǐng)求切片。同時(shí)一個(gè)layer把影像provider里的影響切片顯示出來(lái)。

var layer = layers.addImageryProvider(imageryProvider);

可以簡(jiǎn)略寫為：

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

我們通常創(chuàng)建一個(gè)影像provider是為了創(chuàng)建一個(gè)影像圖層，使用圖層的 show, alpha, brightness, 和contrast等屬性可以修改可視化效果。影像圖層。把影像provider和圖層解耦，有助于去更簡(jiǎn)單的去實(shí)現(xiàn)各種新的影像provider。
一個(gè)像上面示例里的影像圖層集合，決定了圖層的渲染順序。圖層默認(rèn)根據(jù)圖層的添加順序，從下到上去繪制。影像圖層結(jié)合像Cesim的其他集合一樣，也有 add, remove, and get等方法。額外的，該集合可以使用 raise, raiseToTop, lower, 和lowerToBottom去重新排序。 ImageryLayerCollection。

資源

Sandcastle的示例一定要看:

  • 影像圖層 - 這篇教程的示例代碼.
  • 影像圖層集合 - 各種來(lái)源的影像數(shù)據(jù)，獨(dú)立的調(diào)整透明度。
  • 影像效果調(diào)整 - 調(diào)整圖層的亮度（ brightness）,對(duì)比度（ contrast）, gamma, hue, and saturation。

另外，最好看下幫助文檔:

中國(guó)最專業(yè)的Cesium開(kāi)發(fā)者社區(qū)
最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點(diǎn)，簡(jiǎn)書系信息發(fā)布平臺(tái)，僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容