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

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

方式一：Layer.setVisible(true)

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

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

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

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

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

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

方式二：map.removeLayer(Layer)

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

代码实现：

 
      

        街道图
      
      

         影像图
      
      

         地形图
      
 

其中，设置选框样式： 

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

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

此外，对图层的加载移除还可使用以下思路：

判断对象A是否为空：Object.keys(A)，返回一个数组，再根据Array.length判断

if（Object.keys(this.layer).length > 0）{
    this.layer.getSource().clear();
    this.map.removeLayer(this.layer);   
    this.layer={}
}

this.layer=new TileLayer({
    source:xxxx
})