cesium加载影像图层基础知识-ImageryLayer与ImageryProvider类

1 前言

cesium在加载影像时，需要使用cesium中的影像图层类，如ImageryLayer与ImageryProvider类。该篇博客参考了：Cesium加载影像图层(ArcGIS、Bing、Mapbox、高德地图、腾讯地图、天地图等各类影像图)中的部分内容。

cesium探索系列目录：传送门

2 ImageryLayer类

在Cesium中，使用ImageryLayer对象来表示一个影像图层。ImageryLayer是一个包含一个或多个瓦片的图层，它可以用来控制地图影像的显示、叠加和透明度等属性。可以使用以下代码创建一个新的ImageryLayer对象：

const imageryLayer = new Cesium.ImageryLayer(imageryProvider, options);

2.1 参数

这里的imageryProvider是由ImageryProvider创建的对象实例，会在后续详述。

2.2 常用属性

名称	描述	值定义
imageryProvider	一个ImageryProvider对象，用于提供地图影像数据
alpha	影像图层的alpha混合值	1表示完全不透明，0表示完全透明。默认值为1。
brightness	影像图层的亮度	大于1表示图像更亮，小于1表示图像更暗，默认值为1，使用未修改的图像颜色。
contrast	影像图层的对比度	大于1增大对比度，小于1减小对比度，默认值为1.
hue	影像图层的色调	默认值为0，使用未修改的颜色
saturation	影像图层的饱和度	大于1增加饱和度，小于1减少饱和度，默认值为1.
gamma	影像图层的伽玛校正	默认值为1
show	影像图层是否可见	默认为true，表示可见
rectangle	一个Rectangle对象，表示该图层的可视范围
zIndex	表示该图层在图层堆叠顺序中的位置，数值越大表示越靠前	默认值为0

2.3 常用方法

isDestroyed()

如果此对象被销毁，则返回 true；否则为false。

返回：boolean。

destroy()

该方法会销毁该图层对象，释放其占用的资源。当不再需要该图层时，应该调用它来避免内存泄漏。

getImageryRectangle（）

获取影像图层可以生成的图像的总体边界。

// 如：{ east: 3.141592653589793, north: 1.5707963267948966, south: -1.5707963267948966, west: -3.141592653589793 }
imageryLayer.getImageryRectangle()

3 ImageryProvider类

ImageryProvider是Cesium中提供影像数据的抽象类，定义了一些基本方法和属性，用于获取、处理和显示影像数据。一般不直接实例化，而是根据不同的影像数据源选择不同的ImageryProvider子类，如WebMapServiceImageryProvide、UrlTemplateImageryProvider等。

3.1 常用属性

名称	描述
rectangle	影像数据所涵盖的矩形区域范围
tileWidth	影像切片的宽度，单位为像素，默认为256。
tileHeight	影像切片的高度，单位为像素，默认为256。
maximumLevel	影像数据提供者所提供的最大影像级别。
minimumLevel	影像数据提供者所提供的最小影像级别。
tilingScheme	影像数据切片方案，用于计算影像切片的行列号以及经纬度范围。
alpha	影像图层的alpha混合值
brightness	影像图层的亮度色。
errorEvent	加载影像数据时出现错误时触发的事件对象。类型为Event对象，通过监听该事件可以获得加载失败的详情。
credit	影像数据提供者的版权信息
proxy	代理服务器地址，用于跨域请求影像数据。
hasAlphaChannel	影像数据是否包含透明通道。

3.2 常用方法

getTileCredits(x, y, level)

获取指定位置、级别的影像数据切片的版权信息，通常在地图上显示影像切片时需要显示版权信息，可以使用该方法获取每个影像切片的版权信息。

名称	类型	描述
x	number	瓦片的x坐标
y	number	瓦片的y坐标
level	number	瓦片的等级

该方法返回一个Credit数组。

pickFeatures(x, y, level, longitude, latitude)

在指定位置、级别、经纬度处查询影像数据源中的要素信息，并返回一个Promise对象。该方法通常用于处理用户交互操作，如点击或悬停显示要素信息。

名称	类型	描述
x	number	瓦片的x坐标
y	number	瓦片的y坐标
level	number	瓦片的等级
longitude	number	拾取要素的经度
longitude	number	拾取要素的维度

返回一个promise对象

requestImage(x, y, level)

请求指定位置、级别的影像数据，通常由ImageryLayer调用，开发者无需手动调用。

名称	类型	描述
x	number	瓦片的x坐标
y	number	瓦片的y坐标
level	number	瓦片的等级

返回一个Promise对象。

3 示例方法

利用TileMapServiceImageryProvider方法加载cesium提供的影像图层，TileMapServiceImageryProvider是ImageryProvider的子类

// 1、创建ImageryProvider实例
const naturalEarthII = new Cesium.TileMapServiceImageryProvider({
  url: 'node_modules/cesium/Build/CesiumUnminified/Assets/Textures/NaturalEarthII'
})

// 2、利用imageryProvider创建Viewer实例
const viewer = new Cesium.Viewer(viewerDivRef.value as HTMLDivElement, {
  imageryProvider: naturalEarthII
})

而在Cesium1.104以后的版本，已经废弃了这两种调用方式，如果用上面的方法调用，步骤1的控制台会报警告：
options.url was deprecated in CesiumJS 1.104. It will be in CesiumJS 1.107. Use TileMapServiceImageryProvider.fromUrl instead.

步骤2会报警告
options.imageryProvider was deprecated in CesiumJS 1.104. It will be in CesiumJS 1.107. Use options.baseLayer instead.

对于Cesium1.104以后的代码，将代码修改为以下内容：

// 1、创建ImageryProvider实例
const naturalEarthII = await Cesium.TileMapServiceImageryProvider(
  'node_modules/cesium/Build/CesiumUnminified/Assets/Textures/NaturalEarthII'
)
// 2、利用ImageryProvider创建ImageryLayer实例
const imageryLayer = new Cesium.ImageryLayer(naturalEarthII, {});

// 3、利用imageryLayer创建Viewer实例
const viewer = new Cesium.Viewer(viewerDivRef.value as HTMLDivElement, {
  baseLayer: imageryLayer
})