当前使用版本:1.123.0
1、版本变化
Cesium新版本(1.107 - 2023-07-03)发生很多破坏性变化(Breaking Changes),其中,加载影像图的配置项imageryProvider 被移除。
CesiumWidget constructor option options.imageryProvider has been removed. Use options.baseLayer instead.
2、baseLayerPicker
Cesium - baseLayerPicker BaseLayerPicker是Cesium提供的图层选择工具。 代码:
viewer = new Cesium.Viewer('cesiumContainer', {
baseLayerPicker: true
})
效果: 当设置为true时,页面会增加该功能项。
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
baseLayerPickeris set to false.
应用于地球的最下面的影像层。如果设置为 false,则不会添加任何影像提供者。此值仅在 baseLayerPicker 设置为 false 时有效。
该选项设置的值可以为: ImageryLayer | false,所以说不能设置为true,否则报错。
3.1、默认加载
baseLayer默认加载ImageryLayer.fromWorldImagery(),如果不设置该选项,地图默认加载Bing影像图。 代码:
viewer = new Cesium.Viewer('cesiumContainer')
效果:
3.2、设置false
代码:
viewer = new Cesium.Viewer('cesiumContainer', {
baseLayerPicker: false,
baseLayer: false
})
效果:
3.3、设置默认值
代码:
viewer = new Cesium.Viewer('cesiumContainer', {
baseLayerPicker: false,
baseLayer: Cesium.ImageryLayer.fromWorldImagery()
})
效果同3.1
4、常用瓦片图
4.1、UrlTemplateImageryProvider(高德)
加载xyz形式的URL地图,一般通过UrlTemplateImageryProvider类进行加载。 代码:
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}'
})
)
})
效果:
4.2、WebMapTileServiceImageryProvider(天地图)
天地图的地图服务采用OGC Web Map Tile Service(WMTS)标准。Cesium提供了WebMapTileServiceImageryProvider类来调用天地图的地图服务。 代码:
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',
})
),
效果:
4.3、SingleTileImageryProvider(单张图片)
代码:
import worldImage from '@/assets/image/world-blue.png'
baseLayer: new Cesium.ImageryLayer(
new Cesium.SingleTileImageryProvider({
url: worldImage,
tileWidth: 8176,
tileHeight: 4032
})
)
效果: