地图上有多个geojson图层时，如何筛选图层实现点击事件（过滤图层） Openlayers+Vue2（附点击出现popup弹窗源码）

可以使用 forEachFeatureAtPixel 方法过滤图层

先来了解一下forEachFeatureAtPixel的基本语法：

forEachFeatureAtPixel(pixel,callback,opt_this,opt_layerFilter,opt_this2)

pixel:表示地图上的像素坐标，通常是由鼠标事件提供的坐标

callback：回调函数，用于处理检测到的每个要素。接受三个参数：要素、图层、要素样式（hit）

opt_this:可选参数，设置回调函数中的this值 

opt_layerFilter：可选参数，用于过滤要素所属图层的函数，只有“true”才会传递给回调参数

opt_this:可选参数，设置opt_layerFilter中的回调函数中的this值 

        var feature = this.forEachFeatureAtPixel(
          evt.pixel,
          function (feature) {
            return feature
          },
          {
            layerFilter: function (layer) {
              return (
                layer.get('name') === '裂缝' || layer.get('name') === '井盖'
              )
            //只获取name为裂缝或井盖图层的要素
            },
          }
        )

如何实现点击某个点要素实现popup弹窗：

 addPopup() {
      // 使用变量存储弹窗所需的 DOM 对象
      var container = document.getElementById('popup')
      var closer = document.getElementById('popup-closer')
      var content = document.getElementById('popup-content')
      // 创建一个弹窗 Overlay 对象
      /* eslint-disable */
      this.overlay = new Overlay({
        element: container, //绑定 Overlay 对象和 DOM 对象的
        autoPan: true, // 定义弹出窗口在边缘点击时候可能不完整 设置自动平移效果
        autoPanAnimation: {
          duration: 250, //自动平移效果的动画时间 9毫秒
        },
      })
      // 将弹窗添加到 map 地图中
      this.map.addOverlay(this.overlay)
      let _that = this
      /**
       * 添加单击响应函数来处理弹窗动作
       */
      this.map.on('click', function (evt) {
        var feature = this.forEachFeatureAtPixel(
          evt.pixel,
          function (feature) {
            return feature
          },
      /**
       * 过滤图层
       */
          {
            layerFilter: function (layer) {
              return (
                layer.get('name') === '裂缝' || layer.get('name') === '井盖'
              )
            },
          }
        )
        let coordinate = evt.coordinate
        if (feature) {
          var geometry = feature.getGeometry()
          var coord = geometry.getCoordinates()
          var props = feature.getProperties()
            //props.type获取geojson中的要素类型
          content.innerHTML = `
                <p line-height="70%">路损点信息：</p>
                <p>路损类型：<code> ${props.type}  </code> <p>
                <img src="图片路径" slot="reference"  style="width:180px;">`

          _that.overlay.setPosition(coordinate) //把 overlay 显示到指定的 x,y坐标
        
          //console.log(feature)用于在控制台查看问题
        } else {
          _that.overlay.setPosition(undefined)
         // console.log('未选中')用于在控制台查看问题
        }
      })
      /**
       * 为弹窗添加一个响应关闭的函数
       */
      closer.onclick = function () {
        _that.overlay.setPosition(undefined)
        closer.blur()
        return false
      }
    },