13 Cesium—影像服务-多影像图层

文章中所有操作均是在 Cesium 1.91 版本下进行的，其它版本差异请自行适配

多影像图层

在某种场景下，我们需要多个图层进行叠加，或者是某种功能，对某个图层进行显隐操作，在 Cesium 中可以对多个 Imagery 进行操作。

默认情况下，Cesium 会自动加载一个默认的影像图层，其实就是在初学 Cesium 时看到的那个地球的样子，我们也可以隐藏掉这个默认的影像图层。代码片段如下：

//获取默认情况下图层数组容器，默认length=1 或者 viewer.scene.imageryLayers
var layers = viewer.imageryLayers._layers;

//将第一个影像图层设置为隐藏 下标0
viewer.scene.imageryLayers.get(0).show = false;

//隐藏了唯一的一个影像图层，地球变成一个蓝色的圆球
//可以通过下面的命令将无图层服务的蓝色圆球变成白色
viewer.scene.globe.baseColor = Cesium.Color.WHITE;

添加多个影像图层

Cesium 在 Viewer 对象中提供了 imageryLayers 属性，可以加载多个图层。我这里利用几个天地图的影像图层服务和一个 ArcGIS 影像图层服务，进行了示例演示。代码片段如下：

const viewer = new Cesium.Viewer("cesiumContainer");

//天地图
var td_ken = "天地图授权的kay";

//天地图 矢量地图
var td_vec_w = "http://{s}.tianditu.gov.cn/vec_w/wmts?service=wmts&request=GetTile&version=1.0.0" +
    "&LAYER=vec&tileMatrixSet=w&TileMatrix={TileMatrix}&TileRow={TileRow}&TileCol={TileCol}" +
    "&style=default&format=tiles&tk=" + td_ken;

var vecProvider = new window.Cesium.WebMapTileServiceImageryProvider({
    url: td_vec_w,
    layer: "vec_w",
    style: "default",
    format: "tiles",
    tileMatrixSetID: "image/jpeg",
    subdomains: ["t0", "t1", "t2", "t3", "t4", "t5", "t6", "t7"],
    minimumLevel: 0,
    maximumLevel: 18
});


//天地图 矢量注记
var td_cva_w = "http://{s}.tianditu.gov.cn/cva_w/wmts?service=wmts&request=GetTile&version=1.0.0" +
    "&LAYER=cva&tileMatrixSet=w&TileMatrix={TileMatrix}&TileRow={TileRow}&TileCol={TileCol}" +
    "&style=default&format=tiles&tk=" + td_ken;

var cvaProvider = new window.Cesium.WebMapTileServiceImageryProvider({
    url: td_cva_w,
    layer: "cva_w",
    style: "default",
    format: "tiles",
    tileMatrixSetID: "image/jpeg",
    subdomains: ["t0", "t1", "t2", "t3", "t4", "t5", "t6", "t7"],
    minimumLevel: 0,
    maximumLevel: 18
});


//天地图 影像地图
var td_img_w = "http://{s}.tianditu.gov.cn/img_w/wmts?service=wmts&request=GetTile&version=1.0.0" +
    "&LAYER=img&tileMatrixSet=w&TileMatrix={TileMatrix}&TileRow={TileRow}&TileCol={TileCol}" +
    "&style=default&format=tiles&tk=" + td_ken;

var imgProvider = new window.Cesium.WebMapTileServiceImageryProvider({
    url: td_img_w,
    layer: "img_w",
    style: "default",
    format: "tiles",
    tileMatrixSetID: "image/jpeg",
    subdomains: ["t0", "t1", "t2", "t3", "t4", "t5", "t6", "t7"],
    minimumLevel: 0,
    maximumLevel: 18
});


//天地图 影像注记
var td_cia_w = "http://{s}.tianditu.gov.cn/cia_w/wmts?service=wmts&request=GetTile&version=1.0.0" +
    "&LAYER=cia&tileMatrixSet=w&TileMatrix={TileMatrix}&TileRow={TileRow}&TileCol={TileCol}" +
    "&style=default&format=tiles&tk=" + td_ken;

var ciaProvider = new window.Cesium.WebMapTileServiceImageryProvider({
    url: td_cia_w,
    layer: "cia_w",
    style: "default",
    format: "tiles",
    tileMatrixSetID: "image/jpeg",
    subdomains: ["t0", "t1", "t2", "t3", "t4", "t5", "t6", "t7"],
    minimumLevel: 0,
    maximumLevel: 18
});


//ArcGisMapServerImageryProvider 
var arcgisProvider = new Cesium.ArcGisMapServerImageryProvider({
    url: "https://map.geoq.cn/ArcGIS/rest/services/ChinaOnlineStreetPurplishBlue/MapServer",
    enablePickFeatures: false
});

//叠加多个影像图层
viewer.imageryLayers.addImageryProvider(vecProvider);
viewer.imageryLayers.addImageryProvider(cvaProvider);
viewer.imageryLayers.addImageryProvider(imgProvider);
viewer.imageryLayers.addImageryProvider(ciaProvider);
viewer.imageryLayers.addImageryProvider(arcgisProvider);

//这个时候图层的个数应该为6，如果默认影像没有删除的情况下
//var layers = viewer.scene.imageryLayers;

注：

• imageryLayers 的 addImageryProvider 可以直接添加影像图层，还可以添加影像图层时指定索引值，比如：viewer.imageryLayers.addImageryProvider(vecProvider, 1)，代表将影像图层添加到下标 1 的位置，如果没有下标参数，默认会添加到所有的影像图层的最上面。
• 在进行 addImageryProvider 的时候，其实是在为 ImageryLayerCollection 影像图层容器中添加影像图层。

关于ImageryLayer对象

调用 viewer.imageryLayers.addImageryProvider(影像图层)，比如 viewer.imageryLayers.addImageryProvider(vecProvider)。其实它会返回一个影像图层对应的 ImageryLayer 对象，我们通过定义变量获取这个 ImageryLayer 对象。如下代码：

var layer = viewer.imageryLayers.addImageryProvider(影像图层);

我们获取到了这个 ImageryLayer 对象，可以在 ImageryLayerCollection 影像图层容器中通过它进行相应的操作，如下代码：

//判断ImageryLayer是否在影像图层容器中，是返回true，否者返回false
var flag = viewer.imageryLayers.contains(layer)；
//返回ImageryLayer在影像图层容器中的下标index
int index = viewer.imageryLayers.indexOf(layer)；
//将对应的影像图层下移一个索引
viewer.imageryLayers.lower(layer);
//将对应的影像图层移到最底
viewer.imageryLayers.lowerToBottom(layer);
//将对应的影像图层提升一个索引
viewer.imageryLayers.raise(layer);
//将对应的影像图层置顶
viewer.imageryLayers.raiseToTop(layer);
//从影像图层容器中删除影像图层并销毁，如果删除并不销毁调用remove(layer,false)
viewer.imageryLayers.remove(layer);

如果想把整个影像图层容器中的所有影像图层都删掉，可以使用如下代码：

viewer.imageryLayers.removeAll();

定位并获取某个影像图层

如果想定位影像图层容器中某个影像图层，可以通过如下代码：

//index代表下标
viewer.scene.imageryLayers.get(index)

注：
get(index) 命令也会返回一个影像图层的对应的 ImageryLayer 对象，我们通过这个 ImageryLayer 获取或者设置各个影像图层的各种属性，比如之前的 show = false 或者 show = true 控制其显隐，或者是改变其 alpha（透明度）或者改变其 brightness（亮度），至于其它请参考文档说明或者文章上方记录的内容。