openlayer中控制图层的显示和隐藏

参考&＃xff1a;openlayers6【十二】vue 切片图层 TileLayer 切换地图底图&＃xff0c;图层叠加效果_范特西是只猫的博客-CSDN博客_vue 图层叠加 

一种是通过Layer.setVisible(true)的方式让图层显示或隐藏&＃xff0c;这种方式只是让图层中CSS的visible属性改为了false&＃xff0c;其dom依然存在于页面中&＃xff1b;

此外&＃xff0c;封装图层显示隐藏的方法。每一个图层都要有name属性&＃xff0c;且全局唯一

switchLayerVisible(layerName &＃61; "", map &＃61; {}, isVisibleNow &＃61; true) {map.getLayers().getArray().forEach((layer) &＃61;> {if (layer.get("name") &＃61;&＃61; layerName) {layer.setVisible(isVisibleNow);}});},

配合watch使用。如下showLayer为bool类型 

watch: {showDk: {handler: function () {this.switchLayerVisible("dk", this.map, this.showDk);},},}

只需改变showDk的bool值&＃xff0c;即可改变图层‘dk’的显示和隐藏。

另一种方式是让map移除图层&＃xff0c;即map.removeLayer(Layer)&＃xff0c;这种方式会消除图层dom

代码实现&＃xff1a;

其中&＃xff0c;设置选框样式&＃xff1a; 

//多选框::v-deep .el-checkbox__label {color: white;}//单选框::v-deep .el-radio__label {color: white;}

如果要在底图上叠加其他栅格图&＃xff0c;那么该栅格图可能会被底图覆盖导致看不见&＃xff0c;此时&＃xff0c;我们给图层设置zIndex属性即可&＃xff0c;zIndex值越大&＃xff0c;表示图层越在上面&＃xff0c;如&＃xff1a;zIndex&＃xff1a;999

此外&＃xff0c;对图层的加载移除还可使用以下思路&＃xff1a;

判断对象A是否为空&＃xff1a;Object.keys(A)&＃xff0c;返回一个数组&＃xff0c;再根据Array.length判断

if&＃xff08;Object.keys(this.layer).length > 0&＃xff09;{this.layer.getSource().clear();this.map.removeLayer(this.layer); this.layer&＃61;{}
}this.layer&＃61;new TileLayer({source:xxxx
})