新版本Cesium加載瓦片圖的方式變化真大

當(dāng)前使用版本：1.123.0 ## 1、版本變化 Cesium新版本(1.107 - 2023-07-03)發(fā)生很多破壞性變化(Breaking Changes)，其中，加載影像圖的配置項(xiàng)`imageryProvider `被移除。 > CesiumWidget constructor option options.imageryProvider has been removed. Use options.baseLayer instead. ## 2、baseLayerPicker [Cesium - baseLayerPicker](https://cesium.com/learn/cesiumjs/ref-doc/BaseLayerPicker.html?classFilter=baseLayerPicker) BaseLayerPicker是Cesium提供的圖層選擇工具。 代碼： ``` viewer = new Cesium.Viewer('cesiumContainer', { baseLayerPicker: true }) ``` 效果： 當(dāng)設(shè)置為true時(shí)，頁(yè)面會(huì)增加該功能項(xiàng)。 ![](https://upload-images.jianshu.io/upload_images/3197279-fedc6d8a55168556.png) ## 3、baseLayer > The bottommost imagery layer applied to the globe. If set to false, no imagery provider will be added. This value is only valid if `baseLayerPicker` is set to false. 應(yīng)用于地球的最下面的影像層。如果設(shè)置為 false，則不會(huì)添加任何影像提供者。此值僅在 `baseLayerPicker` 設(shè)置為 false 時(shí)有效。 該選項(xiàng)設(shè)置的值可以為：` ImageryLayer | false`，所以說(shuō)不能設(shè)置為true，否則報(bào)錯(cuò)。 ### 3.1、默認(rèn)加載 `baseLayer`默認(rèn)加載`ImageryLayer.fromWorldImagery()`，如果不設(shè)置該選項(xiàng)，地圖默認(rèn)加載Bing影像圖。 代碼： ``` viewer = new Cesium.Viewer('cesiumContainer') ``` 效果： ![](https://upload-images.jianshu.io/upload_images/3197279-a8fab2cc7ba2cf59.png) ### 3.2、設(shè)置false 代碼： ``` viewer = new Cesium.Viewer('cesiumContainer', { baseLayerPicker: false, baseLayer: false }) ``` 效果： ![](https://upload-images.jianshu.io/upload_images/3197279-91cc3e0649214cc0.png) ### 3.3、設(shè)置默認(rèn)值 代碼： ``` viewer = new Cesium.Viewer('cesiumContainer', { baseLayerPicker: false, baseLayer: Cesium.ImageryLayer.fromWorldImagery() }) ``` 效果同3.1 ## 4、常用瓦片圖 ### 4.1、UrlTemplateImageryProvider（高德） 加載xyz形式的URL地圖，一般通過(guò)`UrlTemplateImageryProvider`類進(jìn)行加載。 代碼： ``` viewer = new Cesium.Viewer('cesiumContainer', { baseLayerPicker: false, baseLayer: new Cesium.ImageryLayer( new Cesium.UrlTemplateImageryProvider({ url: 'http://webst01.is.autonavi.com/appmaptile?style=7&x={x}&y={y}&z={z}' }) ) }) ``` 效果： ![](https://upload-images.jianshu.io/upload_images/3197279-01229a090e9e8f80.png) ### 4.2、WebMapTileServiceImageryProvider（天地圖） 天地圖的地圖服務(wù)采用OGC Web Map Tile Service（WMTS）標(biāo)準(zhǔn)。Cesium提供了WebMapTileServiceImageryProvider類來(lái)調(diào)用天地圖的地圖服務(wù)。 代碼： ``` baseLayer: new Cesium.ImageryLayer( new Cesium.WebMapTileServiceImageryProvider({ url: 'http://t0.tianditu.gov.cn/vec_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=img&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILEMATRIX={TileMatrix}&TILEROW={TileRow}&TILECOL={TileCol}&tk=' + import.meta.env.VITE_TOKEN_TDT, layer:'tiandituImg', style:'default', tileMatrixSetID:'tiandituImg', }) ), ``` 效果： ![](https://upload-images.jianshu.io/upload_images/3197279-f7166c46f84ac7ee.png) ### 4.3、SingleTileImageryProvider（單張圖片） 代碼： ``` import worldImage from '@/assets/image/world-blue.png' baseLayer: new Cesium.ImageryLayer( new Cesium.SingleTileImageryProvider({ url: worldImage, tileWidth: 8176, tileHeight: 4032 }) ) ``` 效果： ![](https://upload-images.jianshu.io/upload_images/3197279-c3673dbba565d10e.png) 本文由[mdnice](https://mdnice.com/?platform=6)多平臺(tái)發(fā)布
?著作權(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)容