fix(图表): 修复及优化地图、符号地图的提示样式问题

core/core-frontend/src/views/chart/components/js/panel/charts/map/symbolic-map.ts

@@ -16,7 +16,7 @@ import { deepCopy } from '@/utils/utils'
 import { GaodeMap } from '@antv/l7-maps'
 import { Scene } from '@antv/l7-scene'
 import { PointLayer } from '@antv/l7-layers'
-import { LayerPopup } from '@antv/l7'
+import { LayerPopup, Popup } from '@antv/l7'
 import { mapRendered, mapRendering } from '@/views/chart/components/js/panel/common/common_antv'
 import { configCarouselTooltip } from '@/views/chart/components/js/panel/charts/map/tooltip-carousel'
 import { DEFAULT_BASIC_STYLE } from '@/views/chart/components/editor/util/chart'
@@ -166,12 +166,12 @@ export class SymbolicMap extends L7ChartView<Scene, L7Config> {
     const configList: L7Config[] = []
     const symbolicLayer = await this.buildSymbolicLayer(chart, scene)
     configList.push(symbolicLayer)
-    const tooltipLayer = this.buildTooltip(chart, container, symbolicLayer)
+    const tooltipLayer = this.buildTooltip(chart, container, symbolicLayer, scene)
     if (tooltipLayer) {
       scene.addPopup(tooltipLayer)
     }
     this.buildLabel(chart, configList)
-    symbolicLayer.on('inited', ev => {
+    symbolicLayer.on('inited', () => {
       chart.container = container
       configCarouselTooltip(chart, symbolicLayer, symbolicLayer.sourceOption.data, scene)
     })
@@ -444,7 +444,7 @@ export class SymbolicMap extends L7ChartView<Scene, L7Config> {
    * @param chart
    * @param pointLayer
    */
-  buildTooltip = (chart, container, pointLayer) => {
+  buildTooltip = (chart, container, pointLayer, scene) => {
     const customAttr = chart.customAttr ? parseJson(chart.customAttr) : null
     this.clearPopup(container)
     if (customAttr?.tooltip?.show) {
@@ -506,8 +506,26 @@ export class SymbolicMap extends L7ChartView<Scene, L7Config> {
           }
         })
       }
+      pointLayer.on('touchend', e => {
+        if (e.lngLat) {
+          const fieldData = {
+            ...e.feature,
+            ...Object.fromEntries(this.mergeDetailsToMap(e.feature.details ?? []))
+          }
+          const content = this.buildTooltipContent(tooltip, fieldData, showFields)
+          const popup = new Popup({
+            lngLat: e.lngLat,
+            title: '',
+            closeButton: false,
+            closeOnClick: true,
+            html: `${htmlPrefix}${content}${htmlSuffix}`
+          })
+          scene.addPopup(popup)
+        }
+      })
       return new LayerPopup({
         anchor: 'top-left',
+        className: 'l7-popup-' + container,
         items: [
           {
             layer: pointLayer,

core/core-frontend/src/views/chart/components/js/panel/charts/map/tooltip-carousel.ts

@@ -6,7 +6,7 @@ import { parseJson } from '@/views/chart/components/js/util'
 import { Scene } from '@antv/l7-scene'
 import { deepCopy } from '@/utils/utils'
 
-export const configCarouselTooltip = (chart, view, data, scene, customSubArea, drawOption?) => {
+export const configCarouselTooltip = (chart, view, data, scene, customSubArea?, drawOption?) => {
   if (['bubble-map', 'map'].includes(chart.type)) {
     data = view.source.data.dataArray
       ?.filter(i => i.dimensionList?.length > 0)
@@ -154,6 +154,17 @@ export class CarouselManager {
       const divElement = document.getElementById(this.chart.container)
       divElement.addEventListener('mouseenter', this.pauseCarouselPopups)
       divElement.addEventListener('mouseleave', this.resumeCarouselPopups)
+      // 移动端符号地图不支持mouseenter和mouseleave事件，这里特殊处理一下
+      if (this.chart.type === 'symbolic-map') {
+        // 监听符号触摸事件, 暂停轮播
+        scene?.getLayers()?.[0]?.addListener('touchend', () => {
+          this.pauseCarouselPopups()
+        })
+        // 地图空白区域触摸事件, 启动轮播
+        scene?.getMapCanvasContainer()?.addEventListener('touchend', () => {
+          this.resumeCarouselPopups()
+        })
+      }
       // 监听页面可见性变化
       document.addEventListener('visibilitychange', this.handleVisibilityChange)
       carouselManagerInstances[this.chart.container] = this
@@ -227,8 +238,26 @@ export class CarouselManager {
       const containerElement = document.getElementById(this.chart.container)
       if (containerElement) {
         if (this.chart.type === 'symbolic-map') {
+          // 轮播进行时，隐藏隐藏鼠标悬浮的tooltip
+          const mouseTooltip = containerElement.getElementsByClassName(
+            'l7-popup-' + this.chart.container
+          )
+          for (const tooltip of Array.from(mouseTooltip)) {
+            const tooltipElement = tooltip as HTMLElement
+            tooltipElement.classList.add('l7-popup-hide')
+          }
           this.createSymbolicMapPopup(index)
         } else {
+          if (this.chart.type === 'map') {
+            // 轮播进行时，隐藏隐藏鼠标悬浮的tooltip
+            const mouseTooltip = containerElement.getElementsByClassName(
+              'l7plot-tooltip-container'
+            )
+            for (const tooltip of Array.from(mouseTooltip)) {
+              const tooltipElement = tooltip as HTMLElement
+              tooltipElement.style.display = 'none'
+            }
+          }
           this.createPopup(index)
         }
         this.clearExistingTimers()