Vue+Openlayers+el-checkbox实现多选配置图层的显示和隐藏

Vue+Openlayers+el-checkbox实现多选配置图层的显示和隐藏 场景

Vue+Openlayers实现地图上绘制线：

Vue+Openlayers实现地图上绘制线_BADAO_LIUMANG_QIZHI的博客-CSDN博客

在上面实现加载多个图层的基础上，可以实现勾选多选框配置图层的显示与隐藏。

注：

博客：
BADAO_LIUMANG_QIZHI的博客_霸道流氓气质_CSDN博客-C#,SpringBoot,架构之路领域博主
关注公众号
霸道的程序猿
获取编程相关电子书、教程推送与免费下载。

实现

1、页面上添加el-checkbox

    房子
    红绿灯
    线段
    底图

并依次绑定其model，默认值为true

  data() {
    return {
      isHouseShow: true,
      isLightShow: true,
      isLineShow: true,
      isMapShow: true,

依次设置多选框的change事件

2、change事件实现

  methods: {
    handleHouseChange(value) {
      if (value) {
        //选中，显示房子图层
        this.houseLayer.setVisible(true);
      } else {
        //不显示房子图层
        this.houseLayer.setVisible(false);
      }
    },
    handleLightChange(value) {
      if (value) {
        //选中，显示房子图层
        this.lightLayer.setVisible(true);
      } else {
        //不显示房子图层
        this.lightLayer.setVisible(false);
      }
    },
    handleLineChange(value) {
      if (value) {
        //选中，显示房子图层
        this.lineLayer.setVisible(true);
      } else {
        //不显示房子图层
        this.lineLayer.setVisible(false);
      }
    },
    handleMapChange(value) {
      if (value) {
        //选中，显示房子图层
        this.layer.setVisible(true);
      } else {
        //不显示房子图层
        this.layer.setVisible(false);
      }
    },

控制图层的显示与隐藏主要是通过layer的setVisible方法来实现，为true则显示，为false则隐藏。

3、完整示例代码

​





.map {
  width: 100%;
  height: 800px;
}


​