场景

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

https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/details/121252960

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

注：

博客：
https://blog.csdn.net/badao_liumang_qizhi
关注公众号
霸道的程序猿
获取编程相关电子书、教程推送与免费下载。

实现

1、页面上添加el-checkbox

    "isHouseShow" @change="handleHouseChange"
      >房子checkbox
    >
    "isLightShow" @change="handleLightChange"
      >红绿灯checkbox
    >
    "isLineShow" @change="handleLineChange"
      >线段checkbox
    >
    "isMapShow" @change="handleMapChange"
      >底图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、完整示例代码