網(wǎng)絡(luò)技術(shù)與網(wǎng)站建設(shè)seo網(wǎng)站優(yōu)化課程
Cesium加載影像圖層
- 一、ImageryLayer類
- 常用屬性
- 常用方法
- 二、ImageryLayerCollection類
- 常用屬性
- 常用方法
- 三、ImageryProvider類
- 常用屬性
- 常用方法
- 四、ImageryProvider子類
- 1. ArcGisMapServerImageryProvider
- 加載ArcGIS地圖服務(wù)
- 2. BingMapsImageryProvider
- 加載BingMap地圖服務(wù)
- 3. GoogleEarthEnterpriseImageryProvider
- 4. GridImageryProvider
- 5. IonImageryProvider
- 加載Cesium ion地圖服務(wù)
- 6. MapboxImageryProvider
- 加載Mapbox地圖服務(wù)
- 7. SingleTileImageryProvider
- 8. TileCoordinatesImageryProvider
- 9. UrlTemplateImageryProvider
- 加載高德地圖
- 加載騰訊地圖
- 加載天地圖
- 10. WebMapServiceImageryProvider
- 11. WebMapTileServiceImageryProvider
- 加載ArcGIS地圖服務(wù)
- 加載天地圖
- 五、加載影像數(shù)據(jù)的方法
- 六、加載ArcGIS、Bing、Mapbox、高德地圖、騰訊地圖、天地圖等各類影像圖層的核心代碼
在Cesium中,加載影像圖層主要通過(guò)ImageryLayer、ImageryProvider和ImageryLayerCollection三個(gè)類來(lái)實(shí)現(xiàn);首先我們先來(lái)認(rèn)識(shí)下這三個(gè)類
一、ImageryLayer類
在Cesium中,使用ImageryLayer
對(duì)象來(lái)表示一個(gè)影像圖層。ImageryLayer
是一個(gè)包含一個(gè)或多個(gè)瓦片的圖層,它可以用來(lái)控制地圖影像的顯示、疊加和透明度等屬性。可以通過(guò)將其添加到ImageryLayerCollection
中來(lái)實(shí)現(xiàn)在場(chǎng)景中顯示。
可以使用以下代碼創(chuàng)建一個(gè)新的ImageryLayer
對(duì)象:
var imageryLayer = new Cesium.ImageryLayer(imageryProvider, options);
常用屬性
- imageryProvider:一個(gè)ImageryProvider對(duì)象,用于提供地圖影像數(shù)據(jù)
- alpha:影像圖層的透明度(0-1),默認(rèn)值為1
- brightness:影像圖層的亮度調(diào)整值(-1到1之間),默認(rèn)值為0
- contrast:影像圖層的對(duì)比度調(diào)整值(-1到1之間),默認(rèn)值為0
- hue:影像圖層的色調(diào)調(diào)整值(-1到1之間),默認(rèn)值為0
- saturation:影像圖層的飽和度調(diào)整值(-1到1之間),默認(rèn)值為0
- gamma:影像圖層的伽馬調(diào)整值(>=1),默認(rèn)值為1
- show:布爾類型,表示該圖層是否可見,默認(rèn)值為true
- minimumTerrainLevel:數(shù)字類型,表示在地形高程數(shù)據(jù)缺失時(shí),該圖層的最小可見級(jí)別。默認(rèn)值為0
- maximumTerrainLevel:數(shù)字類型,表示在地形高程數(shù)據(jù)缺失時(shí),該圖層的最大可見級(jí)別。默認(rèn)值為Infinity
- rectangle:一個(gè)Rectangle對(duì)象,表示該圖層的可視范圍
- zIndex:數(shù)字類型,表示該圖層在圖層堆疊順序中的位置,數(shù)值越大表示越靠前
常用方法
- destroy():銷毀該圖層,釋放資源。
該方法會(huì)銷毀該圖層對(duì)象,釋放其占用的資源。當(dāng)不再需要該圖層時(shí),應(yīng)該調(diào)用它來(lái)避免內(nèi)存泄漏。
var imageryLayer = new Cesium.ImageryLayer(imageryProvider);
// ...
imageryLayer.destroy();
- isDestroyed():返回一個(gè)布爾值,表示該圖層是否已銷毀;如果已經(jīng)銷毀,則返回true;否則返回false
var imageryLayer = new Cesium.ImageryLayer(imageryProvider);
// ...
if (imageryLayer.isDestroyed()) {console.log('圖層已銷毀');
}
二、ImageryLayerCollection類
ImageryLayerCollection類是Cesium中的一個(gè)類,用于存儲(chǔ)和管理多個(gè)ImageryLayer對(duì)象。每個(gè)ImageryLayer對(duì)象表示一個(gè)圖像圖層,可以包含單張圖片或圖像切片集合
常用屬性
- length:返回集合中ImageryLayer對(duì)象的數(shù)量
- layerAdded:當(dāng)圖像圖層添加到該集合時(shí)發(fā)生的事件
- layerMoved:當(dāng)圖像圖層在該集合內(nèi)移動(dòng)時(shí)發(fā)生的事件
- layerRemoved:當(dāng)圖像圖層從該集合中刪除時(shí)發(fā)生的事件
常用方法
- add(layer, index):將給定的ImageryLayer對(duì)象添加到集合中的指定位置。如果省略索引,則將該圖像圖層添加到末尾
- remove(layer):從集合中刪除給定的ImageryLayer對(duì)象
- removeAll():從集合中刪除所有ImageryLayer對(duì)象
- raise(layer):將給定的ImageryLayer對(duì)象移動(dòng)到集合中的下一個(gè)位置
- lower(layer):將給定的ImageryLayer對(duì)象移動(dòng)到集合中的上一個(gè)位置
- raiseToTop(layer):將給定的ImageryLayer對(duì)象移動(dòng)到集合的頂部
- lowerToBottom(layer):將給定的ImageryLayer對(duì)象移動(dòng)到集合的底部
- addImageryProvider(imageryProvider, index):用于將給定的ImageryProvider對(duì)象創(chuàng)建的圖像圖層添加到集合中的指定位置。如果省略索引,則將該圖像圖層添加到末尾
const esri = await Cesium.ArcGisMapServerImageryProvider.fromUrl('https://services.arcgisonline.com/arcgis/rest/services/World_Imagery/MapServer',)
const index = 0
imageLayers.addImageryProvider(esri,index)
首先創(chuàng)建了一個(gè)ArcGisMapServerImageryProvider,然后使用它的fromUrl方法創(chuàng)建了一個(gè)圖像圖層并將其添加到imateryLayers的末尾,同時(shí)將返回的imageryLayer對(duì)象存儲(chǔ)在變量esri中。
然后,通過(guò)訪問(wèn)viewer.imageryLayers.length獲取imageryLayers的長(zhǎng)度,并將imageryProvider創(chuàng)建的圖像圖層插入到開頭,即索引為0的位置。
如果省略index參數(shù),則addImageryProvider方法將imageryProvider創(chuàng)建的圖像圖層添加到imageryLayers的末尾。否則,它將插入到指定的索引處。
三、ImageryProvider類
ImageryProvider是Cesium中提供影像數(shù)據(jù)的抽象類,定義了一些基本方法和屬性,用于獲取、處理和顯示影像數(shù)據(jù)。在實(shí)際應(yīng)用中,通常需要根據(jù)不同的影像數(shù)據(jù)源選擇不同的ImageryProvider子類,如WebMapServiceImageryProvider、WebMapTileServiceImageryProvider、BingMapsImageryProvider等。
常用屬性
- credit: 影像數(shù)據(jù)提供者的版權(quán)信息。類型為Credit對(duì)象。
- errorEvent: 加載影像數(shù)據(jù)時(shí)出現(xiàn)錯(cuò)誤時(shí)觸發(fā)的事件對(duì)象。類型為Event對(duì)象,通過(guò)監(jiān)聽該事件可以獲得加載失敗的詳情。
- hasAlphaChannel: 影像數(shù)據(jù)是否包含透明通道。類型為Boolean。
- maximumLevel: 影像數(shù)據(jù)提供者所提供的最大影像級(jí)別。類型為Number。
- minimumLevel: 影像數(shù)據(jù)提供者所提供的最小影像級(jí)別。類型為Number。
- proxy: 代理服務(wù)器地址,用于跨域請(qǐng)求影像數(shù)據(jù)。類型為Proxy對(duì)象或字符串。
- ready: 影像數(shù)據(jù)提供者是否已經(jīng)加載完成并準(zhǔn)備好使用。類型為Boolean。
- rectangle: 影像數(shù)據(jù)所涵蓋的矩形區(qū)域范圍。類型為Rectangle對(duì)象。
- tileWidth: 影像切片的寬度,單位為像素。類型為Number,默認(rèn)為256。
- tileHeight: 影像切片的高度,單位為像素。類型為Number,默認(rèn)為256。
- tilingScheme: 影像數(shù)據(jù)切片方案,用于計(jì)算影像切片的行列號(hào)以及經(jīng)緯度范圍。類型為TilingScheme對(duì)象,默認(rèn)為WebMercatorTilingScheme。
常用方法
- getTileCredits(x, y, level): 獲取指定位置、級(jí)別的影像數(shù)據(jù)切片的版權(quán)信息,該方法返回一個(gè)Credit數(shù)組。通常在地圖上顯示影像切片時(shí)需要顯示版權(quán)信息,可以使用該方法獲取每個(gè)影像切片的版權(quán)信息。
- pickFeatures(x, y, level, longitude, latitude): 在指定位置、級(jí)別、經(jīng)緯度處查詢影像數(shù)據(jù)源中的要素信息,并返回一個(gè)Promise對(duì)象。該方法通常用于處理用戶交互操作,如點(diǎn)擊或懸停顯示要素信息。
- requestImage(x, y, level): 請(qǐng)求指定位置、級(jí)別的影像數(shù)據(jù),并返回一個(gè)Promise對(duì)象。該方法通常由ImageryLayer調(diào)用,開發(fā)者無(wú)需手動(dòng)調(diào)用。
四、ImageryProvider子類
1. ArcGisMapServerImageryProvider
用于加載ArcGIS Server Map Service提供的影像數(shù)據(jù);支持多種格式和地圖投影方式;
使用new Cesium.ArcGisMapServerImageryProvider創(chuàng)建一個(gè)imageryProvider ,并加載ArcGIS服務(wù)
加載ArcGIS地圖服務(wù)
在Cesium1.104之前的版本中加載ArcGIS服務(wù)的方式如下
const esri = new Cesium.ArcGisMapServerImageryProvider({url: 'https://services.arcgisonline.com/arcgis/rest/services/World_Imagery/MapServer',
})
imageLayers.addImageryProvider(esri)
如果是在Cesium1.104以后的版本,已經(jīng)廢棄了這種調(diào)用方式,如果用上面的方法調(diào)用,控制臺(tái)會(huì)出現(xiàn)警告提示
options.url was deprecated in CesiumJS 1.104. It will be in CesiumJS 1.107. Use ArcGisMapServerImageryProvider.fromUrl instead.
使用以下方式替代上面影像地圖的加載方法
const esri = await Cesium.ArcGisMapServerImageryProvider.fromUrl('https://services.arcgisonline.com/arcgis/rest/services/World_Imagery/MapServer',
)
imageLayers.addImageryProvider(esri)
2. BingMapsImageryProvider
用于加載Bing Maps提供的影像數(shù)據(jù);支持多種分辨率、樣式和地區(qū);需要提供有效的Bing Maps API key才能使用。
Bing Maps API key可以去Bing Maps官網(wǎng)申請(qǐng),官網(wǎng)地址:https://www.bingmapsportal.com/
加載BingMap地圖服務(wù)
加載BingMap使用靜態(tài)方法BingMapsImageryProvider.fromUrl實(shí)現(xiàn)
const bing = await Cesium.BingMapsImageryProvider.fromUrl("https://dev.virtualearth.net", {key: "your-key",mapStyle: Cesium.BingMapsStyle.AERIAL//可選參數(shù),指定地圖樣式})imageLayers.addImageryProvider(bing)
3. GoogleEarthEnterpriseImageryProvider
用于加載Google Earth Enterprise Server提供的影像數(shù)據(jù);支持多種格式和分辨率;可以通過(guò)設(shè)置單獨(dú)的token屬性進(jìn)行身份驗(yàn)證。
4. GridImageryProvider
用于加載以柵格方式存儲(chǔ)的影像數(shù)據(jù);支持多種格式和地圖投影方式;需要提供包含切片信息的JSON文件路徑或?qū)ο蟆?/p>
var gridImagery = new Cesium.GridImageryProvider({color: Cesium.Color.fromCssColorString('#ff00ff'), // 可選參數(shù),指定網(wǎng)格線顏色glowFactor: 0.2, // 可選參數(shù),指定網(wǎng)格線輝光系數(shù)
});
imageLayers.addImageryProvider(gridImagery)
5. IonImageryProvider
用于加載Cesium ion服務(wù)提供的影像數(shù)據(jù);支持多種格式和規(guī)格;需要提供有效的ion access token才能使用。
加載Cesium ion地圖服務(wù)
const Ion = await Cesium.IonImageryProvider.fromAssetId(3812);
imageLayers.addImageryProvider(Ion)
6. MapboxImageryProvider
用于加載Mapbox提供的影像數(shù)據(jù);支持多種風(fēng)格、密度和地區(qū);需要提供有效的Mapbox access token才能使用。
Mapbox token需要到Mapbox官網(wǎng)申請(qǐng)
加載Mapbox地圖服務(wù)
const mapbox = new Cesium.MapboxImageryProvider({mapId: 'mapbox.mapbox-terrain-v2',accessToken: 'thisIsMyAccessToken'
});
imageLayers.addImageryProvider(mapbox)
7. SingleTileImageryProvider
用于加載單張靜態(tài)影像數(shù)據(jù);支持多種格式和投影方式;需要提供包含影像數(shù)據(jù)URL的字符串或路徑。
SingleTileImageryProvider一般用于加載離線數(shù)據(jù)或?qū)τ跋駭?shù)據(jù)要求不高的場(chǎng)景
const provider = await SingleTileImageryProvider.fromUrl("https://yoururl.com/image.png")
imageLayers.addImageryProvider(provider)
8. TileCoordinatesImageryProvider
用于加載本地柵格切片數(shù)據(jù);支持多種格式、規(guī)格和級(jí)別范圍;需要提供包含切片路徑和后綴的URL模板。它可以用于在地球表面上繪制出每個(gè)瓦片的行列號(hào)。這對(duì)于調(diào)試、測(cè)試和開發(fā)非常有用
var tileCoordinates = new Cesium.TileCoordinatesImageryProvider()
imageLayers.addImageryProvider(tileCoordinates)
上面代碼創(chuàng)建一個(gè)TileCoordinatesImageryProvider,然后將其添加到場(chǎng)景中的imageryLayers中。該圖層將在地球表面上繪制出每個(gè)瓦片的行列號(hào)。
注意:TileCoordinatesImageryProvider不會(huì)加載真實(shí)的影像數(shù)據(jù),而是在每個(gè)瓦片上繪制其行列號(hào)。因此,在使用TileCoordinatesImageryProvider時(shí),地球表面將不會(huì)顯示任何衛(wèi)星圖像或地形數(shù)據(jù)。
9. UrlTemplateImageryProvider
用于加載基于HTTP/HTTPS協(xié)議的網(wǎng)絡(luò)柵格切片數(shù)據(jù);支持多種格式、規(guī)格和級(jí)別范圍;需要提供包含切片路徑和后綴的URL模板。UrlTemplateImageryProvider指定Url的format模板,方便用戶實(shí)現(xiàn)自己的Provider,國(guó)內(nèi)的高德,騰訊等影響服務(wù)都可以使用UrlTemplateImageryProvider加載
加載高德地圖
var gaodeImageryProvider = new Cesium.UrlTemplateImageryProvider({url: 'https://webst02.is.autonavi.com/appmaptile?style=6&x={x}&y={y}&z={z}',maximumLevel: 18,minimumLevel: 1,credit: 'Amap'
})
imageLayers.addImageryProvider(gaodeImageryProvider)
上面代碼創(chuàng)建了一個(gè)UrlTemplateImageryProvider對(duì)象,并設(shè)置其中的url屬性,將其指定為從高德地圖服務(wù)器加載瓦片的URL模板。對(duì)于高德地圖,需要使用具有三個(gè)占位符({x}、{y}和{z})的URL模板。此外,還可以設(shè)置瓦片的最大和最小級(jí)別。
加載騰訊地圖
var tencentImageryProvider = new Cesium.UrlTemplateImageryProvider({ url: "https://p2.map.gtimg.com/sateTiles/{z}/{sx}/{sy}/{x}_{reverseY}.jpg?version=400", customTags: { sx: function(imageryProvider, x, y, level) { return x >> 4; }, sy: function(imageryProvider, x, y, level) { return ((1 << level) - y) >> 4 }}});
imageLayers.addImageryProvider(tencentImageryProvider);
加載天地圖
var tdtImageryProvider = new Cesium.UrlTemplateImageryProvider({url: 'http://{s}.tianditu.com/DataServer?T=img_w&X={x}&Y={y}&L={z}&tk=您的密鑰',subdomains: ['t0', 't1', 't2', 't3', 't4', 't5', 't6', 't7'],maximumLevel: 18,minimumLevel: 1,credit: 'Tianditu'});imageLayers.addImageryProvider(tdtImageryProvider);
這里創(chuàng)建了一個(gè)UrlTemplateImageryProvider對(duì)象,并設(shè)置其中的url屬性,將其指定為從天地圖服務(wù)器加載瓦片的URL模板。其中{s}是天地圖的多個(gè)子域之一,{x}、{y}和{z}分別表示瓦片的行列號(hào)和級(jí)別。tk為天地圖開放平臺(tái)申請(qǐng)的密鑰。
這里需要設(shè)置subdomains數(shù)組以用于輪詢不同的服務(wù)器。此外,還可以設(shè)置瓦片的最大和最小級(jí)別。
10. WebMapServiceImageryProvider
用于加載Web Map Service提供的影像數(shù)據(jù);支持多種格式和地圖投影方式;可以通過(guò)設(shè)置單獨(dú)的token屬性進(jìn)行身份驗(yàn)證。
11. WebMapTileServiceImageryProvider
用于加載Web Map Tile Service提供的影像數(shù)據(jù);支持多種格式和規(guī)格;可以通過(guò)設(shè)置單獨(dú)的token屬性進(jìn)行身份驗(yàn)證。
加載ArcGIS地圖服務(wù)
var imageryProvider = new Cesium.WebMapTileServiceImageryProvider({url : 'https://services.arcgisonline.com/arcgis/rest/services/World_Imagery/MapServer/WMTS',layer: 'World_Imagery',style: 'default',format: 'image/jpeg',tileMatrixSetID: 'GoogleMapsCompatible',maximumLevel: 19,credit: new Cesium.Credit('? Esri', 'https://www.esri.com/')
});imageLayers.addImageryProvider(imageryProvider);
加載天地圖
var tdtWebMapTile = new Cesium.WebMapTileServiceImageryProvider({url : 'http://t0.tianditu.gov.cn/img_w/wmts?tk=您的密鑰',layer: 'img',style: 'default',format: 'tiles',tileMatrixSetID: 'w',maximumLevel: 18,credit: new Cesium.Credit('? Tianditu', 'http://www.tianditu.gov.cn/')
});
imageLayers.addImageryProvider(tdtWebMapTile);
五、加載影像數(shù)據(jù)的方法
加載影像數(shù)據(jù)通過(guò)下面三步來(lái)完成
- 創(chuàng)建ImageryLayer對(duì)象
在Cesium中,使用ImageryLayer
對(duì)象來(lái)表示一個(gè)影像圖層。ImageryLayer
是一個(gè)包含一個(gè)或多個(gè)瓦片的圖層,可以通過(guò)將其添加到ImageryLayerCollection
中來(lái)實(shí)現(xiàn)在場(chǎng)景中顯示
可以使用以下代碼創(chuàng)建一個(gè)新的ImageryLayer
對(duì)象:
var imageryLayer = new Cesium.ImageryLayer(imageryProvider, options);
其中,imageryProvider
參數(shù)指定了影像數(shù)據(jù)的提供者,而options
參數(shù)則可以用來(lái)設(shè)置影像圖層的各種屬性,例如不透明度、最大可見高度等
- 創(chuàng)建ImageryProvider對(duì)象
在Cesium中,使用ImageryProvider
對(duì)象來(lái)表示一個(gè)影像數(shù)據(jù)的提供者。ImageryProvider
是一個(gè)抽象類,需要根據(jù)具體的數(shù)據(jù)來(lái)源使用其子類來(lái)實(shí)現(xiàn)
Cesium內(nèi)置了一些常見數(shù)據(jù)源的子類,如SingleTileImageryProvider、UrlTemplateImageryProvider、WebMapServiceImageryProvider等,也可以自定義子類來(lái)加載其他數(shù)據(jù)源的影像數(shù)據(jù)
可以使用以下代碼創(chuàng)建一個(gè)新的ImageryProvider
對(duì)象:
var imageryProvider = new Cesium.UrlTemplateImageryProvider({url: 'http://example.com/{z}/{x}/{y}.png'
});
其中,url
參數(shù)指定了影像數(shù)據(jù)的URL模板,{z}
、{x}
、{y}
分別代表瓦片的級(jí)別、行號(hào)和列號(hào),Cesium會(huì)將其替換為實(shí)際的數(shù)值來(lái)獲取對(duì)應(yīng)的瓦片數(shù)據(jù)。
- 將ImageryLayer添加到場(chǎng)景中
在創(chuàng)建好ImageryLayer
對(duì)象后,可以通過(guò)以下代碼將其添加到場(chǎng)景中:
viewer.imageryLayers.add(imageryLayer);
其中,viewer
是Cesium的主要控制器對(duì)象
六、加載ArcGIS、Bing、Mapbox、高德地圖、騰訊地圖、天地圖等各類影像圖層的核心代碼
const imageLayers = viewer.imageryLayers console.log(imageLayers);imageLayers.remove(imageLayers.get(0)) //清楚Cesium默認(rèn)加載的影像地圖數(shù)據(jù)(默認(rèn)是加載的bing地圖)
// ArcGIS地圖 1.104之前版本的調(diào)用方法
// const esri = new Cesium.ArcGisMapServerImageryProvider({
// url: //'https://services.arcgisonline.com/arcgis/rest/services/World_Imagery/MapServer',
// })
const esri = await Cesium.ArcGisMapServerImageryProvider.fromUrl( 'https://services.arcgisonline.com/arcgis/rest/services/World_Imagery/MapServer',
)
imageLayers.addImageryProvider(esri)
// Bing地圖
const bing = await Cesium.BingMapsImageryProvider.fromUrl("https://dev.virtualearth.net", {key: "YOUR KEY",mapStyle: Cesium.BingMapsStyle.AERIAL//可選參數(shù),指定地圖樣式
})
imageLayers.addImageryProvider(bing)
const Ion = await Cesium.IonImageryProvider.fromAssetId(3812);
imageLayers.addImageryProvider(Ion)
var gridImagery = new Cesium.GridImageryProvider({color: Cesium.Color.fromCssColorString('#ff0000'), // 可選參數(shù),指定網(wǎng)格線顏色glowFactor: 0.2, // 可選參數(shù),指定網(wǎng)格線輝光系數(shù)
});
imageLayers.addImageryProvider(gridImagery)
const mapbox = new Cesium.MapboxImageryProvider({mapId: 'mapbox.mapbox-terrain-v2',accessToken: 'YOUR KEY'
});
imageLayers.addImageryProvider(mapbox)
var tileCoordinates = new Cesium.TileCoordinatesImageryProvider()
imageLayers.addImageryProvider(tileCoordinates)
var gaodeImageryProvider = new Cesium.UrlTemplateImageryProvider({url: 'https://webst02.is.autonavi.com/appmaptile?style=6&x={x}&y={y}&z={z}',maximumLevel: 18,minimumLevel: 1,credit: 'Amap'
});
imageLayers.addImageryProvider(gaodeImageryProvider);
var tencentImageryProvider = new Cesium.UrlTemplateImageryProvider({
// 影像圖 url: "https://p2.map.gtimg.com/sateTiles/{z}/{sx}/{sy}/{x}_{reverseY}.jpg?version=400", customTags: { sx: function(imageryProvider, x, y, level) { return x >> 4; }, sy: function(imageryProvider, x, y, level) { return ((1 << level) - y) >> 4 }}
});
imageLayers.addImageryProvider(tencentImageryProvider);
var tdtImageryProvider = new Cesium.UrlTemplateImageryProvider({url: 'http://{s}.tianditu.com/DataServer?T=img_w&X={x}&Y={y}&L={z}&tk=YOUR KEY',subdomains: ['t0', 't1', 't2', 't3', 't4', 't5', 't6', 't7'],maximumLevel: 18,minimumLevel: 1,credit: 'Tianditu'
});
imageLayers.addImageryProvider(tdtImageryProvider);
var arcGIsWebMapTile = new Cesium.WebMapTileServiceImageryProvider({url : 'https://services.arcgisonline.com/arcgis/rest/services/World_Imagery/MapServer/WMTS',layer: 'World_Imagery',style: 'default',format: 'image/jpeg',tileMatrixSetID: 'GoogleMapsCompatible',maximumLevel: 19,credit: new Cesium.Credit('? Esri', 'https://www.esri.com/')
});
imageLayers.addImageryProvider(arcGIsWebMapTile);
const osm = new Cesium.OpenStreetMapImageryProvider({url : 'https://a.tile.openstreetmap.org/'
});
imageLayers.addImageryProvider(osm)
var tdtWebMapTile = new Cesium.WebMapTileServiceImageryProvider({url : 'http://t0.tianditu.gov.cn/img_w/wmts?tk=YOUR KEY',layer: 'img',style: 'default',format: 'tiles',tileMatrixSetID: 'w',maximumLevel: 18,credit: new Cesium.Credit('? Tianditu', 'http://www.tianditu.gov.cn/')
});
var index = 0;
imageLayers.addImageryProvider(tdtWebMapTile,index);
刷新瀏覽器,可以查看各地圖的最終效果
ArcGISMap
BingMap
Mapbox
高德地圖
騰訊地圖
天地圖
OK,這一節(jié)就到這里了,有問(wèn)題評(píng)論區(qū)討論,喜歡的小伙伴點(diǎn)贊關(guān)注收藏哦!