openlayer select 选中弹出overlay 提示框

一、想要效果

1673510406705.png

点击小图标显示：

1673510468975.png

问题点击关闭按钮，再次点击小图标，不会出现tip 弹框

原因分析：
关闭弹窗后，使用getActive函数查看当前Select还是选中状态，知道原因后就可以想法清除选中状态

marksEvents ..getFeatures().clear()

二、 使用select 添加选中事件

let condition = action.type === 'hover' ? pointerMove : click // 默认有点击事件
        let marksEvents = new ol.Select({
          condition: condition,
          hitTolerance: action.hitTolerance || 5, // 命中容差默认是5
          style: (feature) => this.setSelectStyle(feature),
          filter: (feature, layer) => { //  图层点击过滤,只有点击是mark 的才可以有返回值
            console.log('filter', feature, layer, layer.getProperties(), layer.getProperties().name === this.options.layerProperties.name)
            return layer.getProperties().name === this.options.layerProperties.name
          }

        })
this.map.addInteraction(marksEvents)
marksEvents.on('select', (e) => {
this.onShowOverlayPopup()
})

三、选中后使用 Overlay 创建tip 提示框

let closeEle = null
    if (!this.overlayPopupElement) {
      this.overlayPopupElement = document.createElement('div')
      this.overlayPopupElement.id = action.id || actionOverlayConfig.id
      this.overlayPopupElement.className = `${actionOverlayConfig.className} ${action?.overlayConfig?.className || ''}`
      this.overlayPopupElement.appendChild(action?.overlayConfig?.element)
      closeEle = document.createElement('div')
      closeEle.className = 'mark-popup-close'
      this.overlayPopupElement.appendChild(closeEle)
      document.body.appendChild(this.overlayPopupElement)
    }
    if (!this.overlayPopup) {
      this.overlayPopup = new ol.Overlay({
        id: action.id || actionOverlayConfig.id,
        element: this.overlayPopupElement,
        offset: action?.overlayConfig?.offset || actionOverlayConfig.offset,
        positioning: action?.overlayConfig?.positioning || actionOverlayConfig.positioning,
        autoPan: {
          animation: {
            duration: 200
          }
        }
      })
      this.map.addOverlay(this.overlayPopup)
    }
    this.overlayPopup.setPosition(coordinate)
    closeEle.addEventListener('click', () => { // 关闭overlayPopup
      marksEvents.getFeatures().clear() // 清除当前选中状态
      this.map.removeOverlay(this.overlayPopup) // 移除Overlay
      this.overlayPopup = null
      this.overlayPopupElement = null
    })