文章中所有操作均是在 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(亮度),至于其它请参考文档说明或者文章上方记录的内容。