一、想要效果

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
    })