Cesium筆記(3):基本控件簡介—ImageryProvider地圖瓦片地圖配

cesiumjs中可定制多種圖層,可以使用互聯網上很多地圖提供商的圖層數據,也可以使用自己的地圖數據。Cesium支持多種標準化格式的GIS瓦片服務,可以把柵格圖層繪制到地球的表面——cesiumjs的地圖圖層本質上是一些瓦片數據,這些圖層的亮度、對比度、色相均可以動態調整。

對于地圖瓦片數據,OGC(Open Geospatial Consortium開放地理聯盟)有很多標準,如TMS、WMTS、各個商業公司也有自己的內部標準。推薦閱讀:《OGC標準WMTS服務概念與地圖商的瓦片編號流派-web地圖切片加載

cesiumjs支持的圖層格式

wms

TMS

WMTS (with time dynamic imagery)

ArcGIS

Bing Maps

Google Earth

Mapbox

OpenStreetMap

默認地,Cesium使用Bing Maps作為默認的圖層。這個圖層被打包進Viewer中用于演示。Cesium需要您自己創建ion account然后生成一個access key用于訪問圖層數據。

Cesium ion

Cesium ion是一個提供瓦片圖和3D地理空間數據的平臺,Cesium ion支持把數據添加到用戶自己的CesiumJS應用中。下面我們將使用Sentinal-2二維貼圖和Cesium世界地形,二者都需要ion的支持。

如果我們在使用Cesium的過程中,沒有申請ion,同時沒有自己的數據源用而是使用cesium提供的數據源,viewer的底部常常會提示一行小的英文字母。大意就是需要申請access token。

在創建Cesium Viewer的時候,將access token填為自己的access token即可。

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

具體官方已經說的很清楚:https://cesium.com/docs/tutorials/getting-started/

使用Cesium的數據源,需要配置IonImageryProvider(去Cesium ion頁面,將相關的案例數據?Add to my assets,此時將在個人的app中圖層數據源變得可用)

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

??assetId:?3812,

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

})

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

影像服務綜述

Cesium中提供了多種ImageryProvider方式,Cesium目前支持的影像服務類型有:

ArcGisMapServerImageryProvider

支持ArcGIS Online和Server的相關服務

BingMapsImageryProvider

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

createOpenStreetMapImageryProvider

OSM影像服務,根據不同的url選擇不同的風格

createTileMapServiceImageryProvider

看文檔是根據MapTiler規范,貌似是可以自己下載瓦片,發布服務,類似ArcGIS影像服務的過程

GoogleEarthImageryProvider

企業級服務,沒有用過

ImageryProvider

基類,所有的影像服務最終都基于此類,如果你需要擴展新的Provider也會繼承該類

MapboxImageryProvider

Mapbox影像服務,根據mapId指定地圖風格

SingleTileImageryProvider

單張圖片的影像服務,適合離線數據或對影像數據要求并不高的場景下

UrlTemplateImageryProvider

指定url的format模版,方便用戶實現自己的Provider,比如國內的高德,騰訊等影像服務,url都是一個固定的規范,都可以通過該Provider輕松實現。而OSM也是通過該類實現的。

WebMapServiceImageryProvider

符合WMS規范的影像服務都可以通過該類封裝,指定具體參數實現

WebMapTileServiceImageryProvider

服務WMTS1.0.0規范的影像服務,都可以通過該類實現,比如國內的天地圖

TileCoordinatesImageryProvider

渲染每一個瓦片的圍,方便調試

GridImageryProvider

渲染每一個瓦片內部的格網,了解每個瓦片的精細度

配置影像服務

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

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,//關閉圖層選擇器,不然還怎么指定呢

});

擴展影像服務

如果需要自己提供地圖圖層數據,就需要自己實現一個imageryProvider并賦予viewer的imageryProvider屬性。

天地圖影像服務

? ? ? 以國內數據的范疇來看,個人認為最佳,一來是數據內容和完整性,二來是不用許可無偏移,三來瀏覽速度還是很不錯,國內其他影像服務能夠滿足這三點的并不多。

? ? ? 天地圖影像服務都是全球范圍,分為墨卡托投影和經緯度兩種坐標系,后者標識的是CGCS2000坐標系,對我這樣的非專業人士,我等同于WGS84。另外,天地圖提供了中英文的注記,也是很不錯的。

首先我們看一下墨卡托投影的全球影像圖,遵循WMTS規范,服務URL如下:http://t0.tianditu.com/img_w/wmts

? 首先,通過天地圖的GetCapabilities信息,獲取其相關的參數,重要信息如下:

? 通過紅框處,我們可以知道,該WMTS服務的url,Layer的Name,Style,Format以及TileMatrixSet等關鍵屬性的值。有了這些屬性,我們就可以通過WebMapTileServiceImageryProvider構造出天地圖的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);

//全球影像中文注記服務

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

創建天地圖不麻煩,但如何更好的創建呢?

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

Cesium大多也是默認Provider是按照墨卡托投影的,但天地圖也提供了經緯度的影像服務,創建經緯度的天地圖需要注意兩個地方,一個是tilingScheme,指定為經緯度,另一個就是tileMatrixLabels,因為level是從1開始(而不是0),所以需要指定每一層級的索引號。

地圖地圖疊加——添加多個Provider

一個Provider滿足用戶的業務要求,比如有一個全球影像,但同時有一副全美人口密度專題圖,是否能夠疊加上去?

看似簡單,其實里面涉及到很多細節問題,疊加順序涉及到渲染隊列的優先級,兩幅影像的投影不一致怎么辦?如果全美人口密度專題圖不是全球范圍,只是美國范圍,這樣疊加是否能夠準確?

Cesium很好的解決了這些實際中的問題,簡單說每一個Provider都對應一個tilingScheme,支持經緯度和墨卡托兩種投影方式,默認是全球范圍,用戶也可以指定其范圍,Cesium內部會根據這些參數來實現疊加效果。可以指定每一個ImagerLayer的Style。

//初始化一個查看器,并且提供一個柵格圖層

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

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

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

????}?),

????baseLayerPicker?:?false

}?);

//添加另外一個圖層

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'

}?)?);

//設置圖層的透明度

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)

}));

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

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

Cesium提供了一系列方法用于處理圖層,比如顏色自適應,圖層疊加融合。一些樣例代碼如下:

Adding basic imagery添加基本圖層

Adjusting imagery colors自適應圖層顏色

Manipulating and ordering imagery layers控制調整圖層順序

Splitting imagery layers切割圖層

自定義的,推薦閱讀:cesiumjs開發實踐 (三),https://blog.csdn.net/happyduoduo1/article/details/51942830

ImageryProvider添加圖形標記

如果需要做一些標記怎么辦?除了用entry實體添加外,其實用圖層也是可以的

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投影系統選擇

Cesium支持經緯度和墨卡托兩種方式,而且效率都很不錯,那我們該如何選擇呢?當然是有什么就用什么了,但相比而言,經緯度的效率要快一些。可惜墨卡托的影像更豐富一些。為什么經緯度的效率高,這要牽扯到地形數據,以及動態投影的計算,后面在介紹Cesium地形原理時,會詳細的闡述,這里我們只需要知道這個性能考慮因素就可以了。

參考文章

Cesium應用篇:2影像服務(下)?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

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

請注明出處:https://www.zhoulujun.cn/html/GIS/cesium/8328.html

?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。
  • 序言:七十年代末,一起剝皮案震驚了整個濱河市,隨后出現的幾起案子,更是在濱河造成了極大的恐慌,老刑警劉巖,帶你破解...
    沈念sama閱讀 230,622評論 6 544
  • 序言:濱河連續發生了三起死亡事件,死亡現場離奇詭異,居然都是意外死亡,警方通過查閱死者的電腦和手機,發現死者居然都...
    沈念sama閱讀 99,716評論 3 429
  • 文/潘曉璐 我一進店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人,你說我怎么就攤上這事。” “怎么了?”我有些...
    開封第一講書人閱讀 178,746評論 0 383
  • 文/不壞的土叔 我叫張陵,是天一觀的道長。 經常有香客問我,道長,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 63,991評論 1 318
  • 正文 為了忘掉前任,我火速辦了婚禮,結果婚禮上,老公的妹妹穿的比我還像新娘。我一直安慰自己,他們只是感情好,可當我...
    茶點故事閱讀 72,706評論 6 413
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著,像睡著了一般。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發上,一...
    開封第一講書人閱讀 56,036評論 1 329
  • 那天,我揣著相機與錄音,去河邊找鬼。 笑死,一個胖子當著我的面吹牛,可吹牛的內容都是我干的。 我是一名探鬼主播,決...
    沈念sama閱讀 44,029評論 3 450
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了?” 一聲冷哼從身側響起,我...
    開封第一講書人閱讀 43,203評論 0 290
  • 序言:老撾萬榮一對情侶失蹤,失蹤者是張志新(化名)和其女友劉穎,沒想到半個月后,有當地人在樹林里發現了一具尸體,經...
    沈念sama閱讀 49,725評論 1 336
  • 正文 獨居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內容為張勛視角 年9月15日...
    茶點故事閱讀 41,451評論 3 361
  • 正文 我和宋清朗相戀三年,在試婚紗的時候發現自己被綠了。 大學時的朋友給我發了我未婚夫和他白月光在一起吃飯的照片。...
    茶點故事閱讀 43,677評論 1 374
  • 序言:一個原本活蹦亂跳的男人離奇死亡,死狀恐怖,靈堂內的尸體忽然破棺而出,到底是詐尸還是另有隱情,我是刑警寧澤,帶...
    沈念sama閱讀 39,161評論 5 365
  • 正文 年R本政府宣布,位于F島的核電站,受9級特大地震影響,放射性物質發生泄漏。R本人自食惡果不足惜,卻給世界環境...
    茶點故事閱讀 44,857評論 3 351
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧,春花似錦、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 35,266評論 0 28
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至,卻和暖如春,著一層夾襖步出監牢的瞬間,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 36,606評論 1 295
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留,地道東北人。 一個月前我還...
    沈念sama閱讀 52,407評論 3 400
  • 正文 我出身青樓,卻偏偏與公主長得像,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個殘疾皇子,可洞房花燭夜當晚...
    茶點故事閱讀 48,643評論 2 380