Cesium 入门之影像数据的加载ImageryLayer 类 Cesium 中使用 ImagerLayer 类表示影像

ImageryLayer 类

Cesium 中使用 ImagerLayer 类表示影像图层。它有两个参数ImageryProvider 和 ImageryLayer.Options。其中 ImagerLProvider 为数据源提供地理空间信息和属性信息；ImageryLayer.Options 用于设置影像图层的相关属性，如显示/隐藏、透明度亮度、对比度、色调等。

ImageryProvider类

ImageryProvider 是一个抽象类。

加载某些第三方服务使用的Provider

ArcGisMapServerImageryProvider

加载 ArcGis

const arcGisImageryProvider = Cesium.ArcGisMapServerImageryProvider.fromUrl('https://services.arcgisonline.com/arcgis/rest/services/World_Imagery/MapServer')

const arcGisImageryLayer = Cesium.ImageryLayer.fromProviderAsync(arcGisImageryProvider, {})

OpenStreetMapImageryProvider

加载 OSM

const osmImageryProvider = new Cesium.OpenStreetMapImageryProvider({
    url: 'https://tile.openstreetmap.org/'
})
const osmImageryLayer = new Cesium.ImageryLayer(osmImageryProvider)

调试使用的 Provider

GridImageryProvider

为每个 tile 绘制一个边框，用于调试

const gridImageryProvider = new Cesium.GridImageryProvider({})
const gridImageryLayer = new Cesium.ImageryLayer(gridImageryProvider)

TileMapServiceImageryProvider

为每个 tile 绘制一个边框并指示图块的X、Y和Level坐标，用于调试

const tileCoordinatesImageryProvider = new Cesium.TileCoordinatesImageryProvider()
const tileCoordinatesImageryLayer = new Cesium.ImageryLayer(tileCoordinatesImageryProvider)

常用的 Provider

SingleTileImageryProvider

单张图片的影像服务，适合离线数据场景下使用。

const singleTileImageryProvider = new Cesium.SingleTileImageryProvider({
    url: 'http://localhost:5173/image.png',
    tileWidth: 256,
    tileHeight: 256,
    rectangle: Cesium.Rectangle.fromDegrees(-180.0, -90.0, 180.0, 90.0)
})
const singleTileImageryProvider = new Cesium.ImageryLayer(singleTileImageryProvider)

加载 WMS

加载符合 WMS 规范的影像服务。

const wmsImageryProvider = new Cesium.WebMapServiceImageryProvider({
    url: 'http://localhost:8090/geoserver/my_work/wms',
    layers: 'my_work:wuhan2000',
    rectangle: Cesium.Rectangle.fromDegrees(114.34621810913086, 30.55323600769043, 114.38020706176758, 30.58786869049072),
    tileWidth: 256,
    tileHeight: 256,
    srs: 'EPSG:4326'
  })
const wmsImageryLayer = new Cesium.ImageryLayer(wmsImageryProvider)

加载 WMTS

加载符合 WMTS 规范的影像服务，以加载天地图为例

const wmtsImageryProvider = new Cesium.WebMapTileServiceImageryProvider({
    url: 'https://{s}.tianditu.gov.cn/img_w/wmts?tk=' + TD_KEY,
    format: 'tiles',
    layer: 'img',
    style: 'default',
    tileMatrixSetID: 'w',
    subdomains: ['t0', 't1', 't2', 't3', 't4', 't5', 't6', 't7'],
    tileWidth: 256,
    tileHeight: 256,
    minimumLevel: 1,
    maximumLevel: 18
})
const wmtsImageryLayer = new Cesium.ImageryLayer(wmtsImageryProvider)

UrlTemplateImageryProvider

指定 url 的 format 模版，方便用户实现自己的 Provider。比如高德、腾讯、OSM，url 都是一个固定的规范，可以通过该 Provider 实现。

const osmImageryProvider = new Cesium.UrlTemplateImageryProvider({
    url: "http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png",
    subdomains: ["a", "b", "c"]
});

引用文章：

Cesium开发基础篇 | 01加载影像数据

Cesium 入门之影像数据的加载