众所周知图层控制可以说是地图开发中的一个比较头疼的问题但凡是做过地图开发的人员都会遇到类似的问题当图层类型很丰富时图层数量很多一个叠加一个图层加载顺序做着做着就越来越乱这个时候一个有效的图层控制方法就很关键废话不多说直接开干。在前文已经提到初始化加载三维地图的操作这里就不过多赘述了如有需要可翻看之前的文章。1、创建一个layerControl.js的文件是图层控制的关键然后在index.html中引入即可内容如下Cesium.layerControl function (imageryLayers) { this.layers [] this.baseLayers [] this.middleLayers [] this.topLayers [] this.imageryLayers imageryLayers } Cesium.layerControl.prototype.getLayerByName function (name) { //传入图层名返回图层 let layer this.layers.find((item) { return item.name name }) return layer } Cesium.layerControl.prototype.addBaseLayer function (name, imageryProvider, alpha 1, index) { //添加底图图层 图层名、图层源、透明度、层级 if (!this.getLayerByName(name)) { let defaultLength 0 if (index index this.baseLayers.length) { let layer this.imageryLayers.addImageryProvider(imageryProvider, index) layer.name name layer.belong baseLayers layer.alpha alpha this.layers.splice(defaultLength index, 0, layer) this.baseLayers.splice(index, 0, layer) return layer } else { let layer this.imageryLayers.addImageryProvider(imageryProvider, this.baseLayers.length) layer.name name layer.belong baseLayers layer.alpha alpha this.layers.splice(defaultLength this.baseLayers.length, 0, layer) this.baseLayers.push(layer) return layer } } else { console.log(name exists) } } Cesium.layerControl.prototype.addMiddleLayer function (name, imageryProvider, alpha 1, index) { //添加中层图层 if (!this.getLayerByName(name)) { let defaultLength this.baseLayers.length if (index index this.middleLayers.length) { let layer this.imageryLayers.addImageryProvider(imageryProvider, (defaultLength index)) layer.name name layer.belong middleLayers layer.alpha alpha this.layers.splice(defaultLength index, 0, layer) this.middleLayers.splice(index, 0, layer) return layer } else { let layer this.imageryLayers.addImageryProvider(imageryProvider, (defaultLength this.middleLayers.length)) layer.name name layer.belong middleLayers layer.alpha alpha this.layers.splice(defaultLength this.middleLayers.length, 0, layer) this.middleLayers.push(layer) return layer } } else { console.log(name exists) } } Cesium.layerControl.prototype.addTopLayer function (name, imageryProvider, alpha 1, index) { //添加顶层图层 if (!this.getLayerByName(name)) { let defaultLength this.baseLayers.length this.middleLayers.length if (index index this.topLayers.length) { let layer this.imageryLayers.addImageryProvider(imageryProvider, (defaultLength index)) layer.name name layer.belong topLayers layer.alpha alpha this.layers.splice(defaultLength index, 0, layer) this.topLayers.splice(index, 0, layer) return layer } else { let layer this.imageryLayers.addImageryProvider(imageryProvider, (defaultLength this.topLayers.length)) layer.name name layer.belong topLayers layer.alpha alpha this.layers.push(layer) this.topLayers.push(layer) return layer } } else { console.log(name exists) } } Cesium.layerControl.prototype.raise function (name) { //上移图层 let layer this.getLayerByName(name) if (layer) { let belong layer.belong let index this[belong].indexOf(layer) if (index this[belong].length - 1) { this.imageryLayers.raise(layer) exchangeArrIndex(this.layers, index, index 1) exchangeArrIndex(this[belong], index, index 1) } else { console.log(name can not raise anymore.) } } else { console.log(name is not founded.) } } Cesium.layerControl.prototype.lower function (name) { //下移图层 let layer this.getLayerByName(name) if (layer) { let belong layer.belong let index this[belong].indexOf(layer) if (index 0) { this.imageryLayers.lower(layer) exchangeArrIndex(this.layers, index, index - 1) exchangeArrIndex(this[belong], index, index - 1) } else { console.log(name can not lower anymore.) } } else { console.log(name is not founded.) } } Cesium.layerControl.prototype.deleteLayer function (name) { //删除图层 let layer this.getLayerByName(name) if (layer) { let belong layer.belong this.imageryLayers.remove(layer) this.layers.remove(layer) this[belong].remove(layer) } else { console.log(name is not founded.) } } Cesium.layerControl.prototype.exchangeLayer function (name, imageryProvider, alpha 1) { //更换图层源 let oldLayer this.getLayerByName(name) if (oldLayer) { let belong oldLayer.belong let layers_index this.layers.indexOf(oldLayer) let belong_index this[belong].indexOf(oldLayer) let splitDirection oldLayer.splitDirection this.imageryLayers.remove(oldLayer) let newLayer this.imageryLayers.addImageryProvider(imageryProvider, layers_index) newLayer.name name newLayer.belong belong newLayer.alpha alpha newLayer.splitDirection splitDirection this.layers.splice(layers_index, 1, newLayer) this[belong].splice(belong_index, 1, newLayer) } else { console.log(name is not founded.) } } Cesium.layerControl.prototype.changeLayerName function (oldName, newName) { //更换图层名 let layer this.getLayerByName(oldName) if (layer) { layer.name newName } else { console.log(oldName is not founded.) } } Cesium.layerControl.prototype.removeAllBaseLayers function () { if (this.baseLayers.length 0) { for (let i this.baseLayers.length - 1; i 0; i--) { this.deleteLayer(this.baseLayers[i].name) } } } Cesium.layerControl.prototype.removeAllMiddleLayers function () { if (this.middleLayers.length 0) { for (let i this.middleLayers.length - 1; i 0; i--) { this.deleteLayer(this.middleLayers[i].name) } } } Cesium.layerControl.prototype.removeAllTopLayers function () { if (this.topLayers.length 0) { for (let i this.topLayers.length - 1; i 0; i--) { this.deleteLayer(this.topLayers[i].name) } } } Cesium.layerControl.prototype.show function (name) { let layer this.getLayerByName(name) if (layer) { layer.show true; } else { console.log(name is not founded.) } } Cesium.layerControl.prototype.hide function (name) { let layer this.getLayerByName(name) if (layer) { layer.show false; } else { console.log(name is not founded.) } }2、在cesium初始化的时候调用layerControl//初始化图层控制器 layerControl new Cesium.layerControl(viewer.imageryLayers)3、在页面中利用layerControl加载图层以前文初始化cesium时加载的天地图为例//添加天地图底图 var tianditu_token 申请的天地图token var TDT_IMG_C http://{s}.tianditu.gov.cn/img_c/wmts?servicewmtsrequestGetTileversion1.0.0 LAYERimgtileMatrixSetcTileMatrix{TileMatrix}TileRow{TileRow}TileCol{TileCol} styledefaultformattilestk tianditu_token layerControl.addBaseLayer(baseLayer, new Cesium.WebMapTileServiceImageryProvider({ url: TDT_IMG_C, layer: tdtImg_c, style: default, format: tiles, tileMatrixSetID: c, subdomains: [t0, t1, t2, t3, t4, t5, t6, t7], tilingScheme: new Cesium.GeographicTilingScheme(), tileMatrixLabels: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19 ], maximumLevel: 50, show: false }))4、到这里有些veteran已经知道该怎么做了但是对于novice而言还是有些发懵啥啥啥咋就完事了那么接下来我举几个案例让思路更清晰一些。1比如你要加载底图如天地图或其他高清影像一般底图都是天地图你就调用layerControl.addBaseLayer(baseLayer,正常的cesium图层,1)备注这里的baseLayer是自定义图层名称你也可以改成其他的2然后你要在底图上叠加另一个图层如什么坡度、坡向、幅度、叶绿素等等这种图层一般都是在中层展示的就可以调用layerControl.addMiddleLayer(dataLayer,业务图层,1)3添加顶部图层如边界图层bourder你就可以调用layerControl.addTopLayer(bourderLayer,正常的cesium图层,1)那么有小伙伴可能就会问了正常的图层什么是正常的图层既然你诚心诚意的发问了我就大发慈悲的告诉你。。。有点跑题了不好意思。那什么是正常的图层呢就是tile图层或wms图层上述的天地图就是tile类型的cesium tile图层加载方式new Cesium.WebMapTileServiceImageryProvider({ url:process.env.VUE_APP_BASE_URL /mapsj/tile? z{TileMatrix}x{TileCol}y{TileRow} layer 图层名称 styles图层样式 cql_filter筛选条件 })cesium wms图层加载方式new Cesium.WebMapServiceImageryProvider({ url: process.env.VUE_APP_BASE_URL /map/wms, layers: xxxxx, //图层名称 parameters: { format: image/png, transparent: true, srs: EPSG:4326, tiled: true, styles: xxxxx, //样式 }, }),4你说我想切换图层该怎么调用呢切换图层你就调用layerControl.exchangeLayer比如你想切换业务图层一般都是切换这个图层底图很少动那么就可以这样写layerControl.exchangeLayer(dataLayer, new Cesium.WebMapTileServiceImageryProvider({ url: url, }), 1 );一般在加载新图层之前都要查一下这个图层有没有加载如果有加载则替换掉该图层如果没有加载就新增这个图层那么就可以这样写if (layerControl.getLayerByName(tracksLayer)) { layerControl.exchangeLayer( tracksLayer, new Cesium.WebMapServiceImageryProvider({ url: process.env.VUE_APP_BASE_URL /map/wms, layers: xxxxx, //图层名称 parameters: { format: image/png, transparent: true, srs: EPSG:4326, tiled: true, styles: xxxx, //样式 }, }), 1 ); } else { layerControl.addTopLayer( tracksLayer, new Cesium.WebMapServiceImageryProvider({ url: process.env.VUE_APP_BASE_URL /map/wms, layers: xxxx, //图层名称 parameters: { format: image/png, transparent: true, srs: EPSG:4326, tiled: true, styles: xxxxxx, //样式 }, }), 1, ); }5方法中同样提供了删除api删除单一图层deleteLayer、删除全部底图图层removeAllBaseLayers、删除全部中间图层removeAllMiddleLayers、删除全部顶部图层removeAllTopLayers效果如图