cesiumjs中可定制多種圖層，可以使用互聯(lián)網(wǎng)上很多地圖提供商的圖層數(shù)據(jù)，也可以使用自己的地圖數(shù)據(jù)。Cesium支持多種標(biāo)準(zhǔn)化格式的GIS瓦片服務(wù)，可以把柵格圖層繪制到地球的表面——cesiumjs的地圖圖層本質(zhì)上是一些瓦片數(shù)據(jù)，這些圖層的亮度、對(duì)比度、色相均可以動(dòng)態(tài)調(diào)整。

對(duì)于地圖瓦片數(shù)據(jù)，OGC(Open Geospatial Consortium開放地理聯(lián)盟)有很多標(biāo)準(zhǔn)，如TMS、WMTS、各個(gè)商業(yè)公司也有自己的內(nèi)部標(biāo)準(zhǔn)。推薦閱讀：《OGC標(biāo)準(zhǔn)WMTS服務(wù)概念與地圖商的瓦片編號(hào)流派-web地圖切片加載》

cesiumjs支持的圖層格式

wms

TMS

WMTS (with time dynamic imagery)

ArcGIS

Bing Maps

Google Earth

Mapbox

OpenStreetMap

默認(rèn)地，Cesium使用Bing Maps作為默認(rèn)的圖層。這個(gè)圖層被打包進(jìn)Viewer中用于演示。Cesium需要您自己創(chuàng)建ion account然后生成一個(gè)access key用于訪問圖層數(shù)據(jù)。

Cesium ion

Cesium ion是一個(gè)提供瓦片圖和3D地理空間數(shù)據(jù)的平臺(tái)，Cesium ion支持把數(shù)據(jù)添加到用戶自己的CesiumJS應(yīng)用中。下面我們將使用Sentinal-2二維貼圖和Cesium世界地形，二者都需要ion的支持。

如果我們?cè)谑褂肅esium的過程中，沒有申請(qǐng)ion，同時(shí)沒有自己的數(shù)據(jù)源用而是使用cesium提供的數(shù)據(jù)源，viewer的底部常常會(huì)提示一行小的英文字母。大意就是需要申請(qǐng)access token。

在創(chuàng)建Cesium Viewer的時(shí)候，將access token填為自己的access token即可。

Cesium.Ion.defaultAccessToken = '<YOUR ACCESS TOKEN HERE>';

具體官方已經(jīng)說的很清楚：https://cesium.com/docs/tutorials/getting-started/

使用Cesium的數(shù)據(jù)源，需要配置IonImageryProvider（去Cesium ion頁(yè)面，將相關(guān)的案例數(shù)據(jù)?Add to my assets，此時(shí)將在個(gè)人的app中圖層數(shù)據(jù)源變得可用）

let?imageryProvider=?new?Cesium.IonImageryProvider({

??assetId:?3812,

??accessToken:?'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiJhMTg2Mzk0My02NWJmLTQ1ODgtOWRiMy0wODM1ZTkwNGM1NTYiLCJpZCI6MjM0NzYsInNjb3BlcyI6WyJhc2wiLCJhc3IiLCJhc3ciLCJnYyJdLCJpYXQiOjE1ODM0NjEyMDN9.qXnJKCaIHS7JkIPRySJmmbdHvyj1ihQ2CI3itKy9MvY'

})

要是自定義配置，可以使用ImageryProvider

影像服務(wù)綜述

Cesium中提供了多種ImageryProvider方式，Cesium目前支持的影像服務(wù)類型有：

ArcGisMapServerImageryProvider

支持ArcGIS Online和Server的相關(guān)服務(wù)

BingMapsImageryProvider

Bing地圖影像，可以指定mapStyle，詳見BingMapsStyle類

createOpenStreetMapImageryProvider

OSM影像服務(wù)，根據(jù)不同的url選擇不同的風(fēng)格

createTileMapServiceImageryProvider

看文檔是根據(jù)MapTiler規(guī)范，貌似是可以自己下載瓦片，發(fā)布服務(wù)，類似ArcGIS影像服務(wù)的過程

GoogleEarthImageryProvider

企業(yè)級(jí)服務(wù)，沒有用過

ImageryProvider

基類，所有的影像服務(wù)最終都基于此類，如果你需要擴(kuò)展新的Provider也會(huì)繼承該類

MapboxImageryProvider

Mapbox影像服務(wù)，根據(jù)mapId指定地圖風(fēng)格

SingleTileImageryProvider

單張圖片的影像服務(wù)，適合離線數(shù)據(jù)或?qū)τ跋駭?shù)據(jù)要求并不高的場(chǎng)景下

UrlTemplateImageryProvider

指定url的format模版，方便用戶實(shí)現(xiàn)自己的Provider，比如國(guó)內(nèi)的高德，騰訊等影像服務(wù)，url都是一個(gè)固定的規(guī)范，都可以通過該P(yáng)rovider輕松實(shí)現(xiàn)。而OSM也是通過該類實(shí)現(xiàn)的。

WebMapServiceImageryProvider

符合WMS規(guī)范的影像服務(wù)都可以通過該類封裝，指定具體參數(shù)實(shí)現(xiàn)

WebMapTileServiceImageryProvider

服務(wù)WMTS1.0.0規(guī)范的影像服務(wù)，都可以通過該類實(shí)現(xiàn)，比如國(guó)內(nèi)的天地圖

TileCoordinatesImageryProvider

渲染每一個(gè)瓦片的圍，方便調(diào)試

GridImageryProvider

渲染每一個(gè)瓦片內(nèi)部的格網(wǎng)，了解每個(gè)瓦片的精細(xì)度

配置影像服務(wù)

比如使用bing地圖服務(wù)：查看官方服務(wù)文檔，https://cesium.com/docs/cesiumjs-ref-doc/，找到BingMapsImageryProvider，查看具體參數(shù)使用

https://cesium.com/docs/cesiumjs-ref-doc/BingMapsImageryProvider.html

var?bing?=?new?Cesium.BingMapsImageryProvider({

????url?:?'https://dev.virtualearth.net',

????key?:?'get-yours-at-https://www.bingmapsportal.com/',

????mapStyle?:?Cesium.BingMapsStyle.AERIAL});

var?viewer?=?new?Cesium.Viewer('cesiumContainer',?{

????shouldAnimate?:?true，

????ImageryProvider：bing,

????baseLayerPicker?:?false,//關(guān)閉圖層選擇器，不然還怎么指定呢

});

擴(kuò)展影像服務(wù)

如果需要自己提供地圖圖層數(shù)據(jù)，就需要自己實(shí)現(xiàn)一個(gè)imageryProvider并賦予viewer的imageryProvider屬性。

天地圖影像服務(wù)

? ? ? 以國(guó)內(nèi)數(shù)據(jù)的范疇來看，個(gè)人認(rèn)為最佳，一來是數(shù)據(jù)內(nèi)容和完整性，二來是不用許可無偏移，三來瀏覽速度還是很不錯(cuò)，國(guó)內(nèi)其他影像服務(wù)能夠滿足這三點(diǎn)的并不多。

? ? ? 天地圖影像服務(wù)都是全球范圍，分為墨卡托投影和經(jīng)緯度兩種坐標(biāo)系，后者標(biāo)識(shí)的是CGCS2000坐標(biāo)系，對(duì)我這樣的非專業(yè)人士，我等同于WGS84。另外，天地圖提供了中英文的注記，也是很不錯(cuò)的。

首先我們看一下墨卡托投影的全球影像圖，遵循WMTS規(guī)范，服務(wù)URL如下：http://t0.tianditu.com/img_w/wmts

? 首先，通過天地圖的GetCapabilities信息，獲取其相關(guān)的參數(shù)，重要信息如下：

? 通過紅框處，我們可以知道，該WMTS服務(wù)的url，Layer的Name，Style，F(xiàn)ormat以及TileMatrixSet等關(guān)鍵屬性的值。有了這些屬性，我們就可以通過WebMapTileServiceImageryProvider構(gòu)造出天地圖的Provider

var?imageryProvider?=?new?Cesium.WebMapTileServiceImageryProvider({

????url?:?'http://t0.tianditu.com/img_w/wmts?',

????layer?:?'img',

????style?:?'default',

????format?:?'tiles',

????tileMatrixSetID?:?'w',

????//?tileMatrixLabels?:?['default028mm:0',?'default028mm:1',?'default028mm:2'?...],

????maximumLevel:?18,

????credit?:?new?Cesium.Credit('天地圖')

});

viewer.imageryLayers.addImageryProvider(imageryProvider);

//全球影像中文注記服務(wù)

viewer.imageryLayers.addImageryProvider(new?Cesium.WebMapTileServiceImageryProvider({

????url:?"http://t0.tianditu.com/cia_w/wmts?service=wmts&request=GetTile&version=1.0.0&LAYER=cia&tileMatrixSet=w&TileMatrix={TileMatrix}&TileRow={TileRow}&TileCol={TileCol}&style=default.jpg",

????layer:?"tdtAnnoLayer",

????style:?"default",

????format:?"image/jpeg",

????tileMatrixSetID:?"GoogleMapsCompatible",

????show:?false

}));

配置可參看：https://cesium.com/docs/cesiumjs-ref-doc/WebMapTileServiceImageryProvider.html

創(chuàng)建天地圖不麻煩，但如何更好的創(chuàng)建呢？

比如輪詢機(jī)制，我們知道天地圖提供了't0','t1','t2','t3','t4','t5','t6','t7'8個(gè)域名，服務(wù)端TCP最大鏈接數(shù)是有限制的，輪詢機(jī)制下瓦片下載的速度更有保證，很可惜，盡管Cesium提供了subdomains的屬性，但需要把url按照format的方式來指定參數(shù) ，所以我們需要稍微調(diào)整一下構(gòu)建過程，把我們需要的參數(shù)都format到url中

Cesium大多也是默認(rèn)Provider是按照墨卡托投影的，但天地圖也提供了經(jīng)緯度的影像服務(wù),創(chuàng)建經(jīng)緯度的天地圖需要注意兩個(gè)地方，一個(gè)是tilingScheme，指定為經(jīng)緯度，另一個(gè)就是tileMatrixLabels，因?yàn)閘evel是從1開始（而不是0），所以需要指定每一層級(jí)的索引號(hào)。

地圖地圖疊加——添加多個(gè)Provider

一個(gè)Provider滿足用戶的業(yè)務(wù)要求，比如有一個(gè)全球影像，但同時(shí)有一副全美人口密度專題圖，是否能夠疊加上去？

看似簡(jiǎn)單，其實(shí)里面涉及到很多細(xì)節(jié)問題，疊加順序涉及到渲染隊(duì)列的優(yōu)先級(jí)，兩幅影像的投影不一致怎么辦？如果全美人口密度專題圖不是全球范圍，只是美國(guó)范圍，這樣疊加是否能夠準(zhǔn)確？

Cesium很好的解決了這些實(shí)際中的問題，簡(jiǎn)單說每一個(gè)Provider都對(duì)應(yīng)一個(gè)tilingScheme，支持經(jīng)緯度和墨卡托兩種投影方式，默認(rèn)是全球范圍，用戶也可以指定其范圍，Cesium內(nèi)部會(huì)根據(jù)這些參數(shù)來實(shí)現(xiàn)疊加效果。可以指定每一個(gè)ImagerLayer的Style。

//初始化一個(gè)查看器，并且提供一個(gè)柵格圖層

var?viewer?=?new?Cesium.Viewer(?'cesiumContainer',?{

????imageryProvider?:?new?Cesium.ArcGisMapServerImageryProvider(?{

????????url?:?'http://server.arcgisonline.com/ArcGIS/rest/services/World_Street_Map/MapServer'

????}?),

????baseLayerPicker?:?false

}?);

//添加另外一個(gè)圖層

var?layers?=?viewer.scene.imageryLayers;

var?blackMarble?=?layers.addImageryProvider(?new?Cesium.TileMapServiceImageryProvider(?{

????url?:?'//cesiumjs.org/tilesets/imagery/blackmarble',

????maximumLevel?:?8,

????credit?:?'Black?Marble?imagery?courtesy?NASA?Earth?Observatory'

}?)?);

//設(shè)置圖層的透明度

blackMarble.alpha?=?0.5;

//設(shè)置圖層的亮度

blackMarble.brightness?=?2.0;

//添加一個(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)

}));

ImageryLayerCollection類是一個(gè)圖層管理器，可以調(diào)整多個(gè)圖層之間的順序，添加和刪除等。詳細(xì)內(nèi)容可以查看Cesium接口文檔或本章的MultiProvider.html范例：https://cesium.com/docs/cesiumjs-ref-doc/ImageryLayerCollection.html

多種圖層能夠被添加、移除、排序和適應(yīng)到Cesium中。

Cesium提供了一系列方法用于處理圖層，比如顏色自適應(yīng)，圖層疊加融合。一些樣例代碼如下：

Adding basic imagery添加基本圖層

Adjusting imagery colors自適應(yīng)圖層顏色

Manipulating and ordering imagery layers控制調(diào)整圖層順序

Splitting imagery layers切割圖層

自定義的，推薦閱讀：cesiumjs開發(fā)實(shí)踐 (三)，https://blog.csdn.net/happyduoduo1/article/details/51942830

ImageryProvider添加圖形標(biāo)記

如果需要做一些標(biāo)記怎么辦？除了用entry實(shí)體添加外，其實(shí)用圖層也是可以的

var?layers?=?viewer.scene.imageryLayers;

layers.addImageryProvider(new?Cesium.SingleTileImageryProvider({

????url?:?'../Apps/Sandcastle/images/Cesium_Logo_overlay.png',

????rectangle?:?Cesium.Rectangle.fromDegrees(-75.0,?28.0,?-67.0,?29.75)

}));

不過我是基本不用此法

Cesium投影系統(tǒng)選擇

Cesium支持經(jīng)緯度和墨卡托兩種方式，而且效率都很不錯(cuò)，那我們?cè)撊绾芜x擇呢？當(dāng)然是有什么就用什么了，但相比而言，經(jīng)緯度的效率要快一些?？上ㄍ械挠跋窀S富一些。為什么經(jīng)緯度的效率高，這要牽扯到地形數(shù)據(jù)，以及動(dòng)態(tài)投影的計(jì)算，后面在介紹Cesium地形原理時(shí)，會(huì)詳細(xì)的闡述，這里我們只需要知道這個(gè)性能考慮因素就可以了。

參考文章

Cesium應(yīng)用篇：2影像服務(wù)（下）?https://www.cnblogs.com/fuckgiser/p/5647457.html

Cesium (五) 柵格圖層 https://blog.csdn.net/happyduoduo1/article/details/51868091?locationNum=13&fps=1

Cesium入門6 - Adding Imagery - 添加圖層 https://www.cnblogs.com/cesiumjs/p/9982997.html

轉(zhuǎn)載本站文章《Cesium筆記(3):基本控件簡(jiǎn)介—ImageryProvider地圖瓦片地圖配》,

請(qǐng)注明出處：https://www.zhoulujun.cn/html/GIS/cesium/8328.html