一、想要效果

1673510406705.png

點(diǎn)擊小圖標(biāo)顯示：

1673510468975.png

問題點(diǎn)擊關(guān)閉按鈕，再次點(diǎn)擊小圖標(biāo)，不會(huì)出現(xiàn)tip 彈框

原因分析：
關(guān)閉彈窗后，使用getActive函數(shù)查看當(dāng)前Select還是選中狀態(tài)，知道原因后就可以想法清除選中狀態(tài)

marksEvents ..getFeatures().clear()

二、 使用select 添加選中事件

let condition = action.type === 'hover' ? pointerMove : click // 默認(rèn)有點(diǎn)擊事件
        let marksEvents = new ol.Select({
          condition: condition,
          hitTolerance: action.hitTolerance || 5, // 命中容差默認(rèn)是5
          style: (feature) => this.setSelectStyle(feature),
          filter: (feature, layer) => { //  圖層點(diǎn)擊過濾,只有點(diǎn)擊是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 創(chuàng)建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', () => { // 關(guān)閉overlayPopup
      marksEvents.getFeatures().clear() // 清除當(dāng)前選中狀態(tài)
      this.map.removeOverlay(this.overlayPopup) // 移除Overlay
      this.overlayPopup = null
      this.overlayPopupElement = null
    })