From f2c229ffea0d9a5f1f4f436185dfc96928f0b98c Mon Sep 17 00:00:00 2001 From: jianneng-fit2cloud Date: Tue, 18 Feb 2025 11:45:58 +0800 Subject: [PATCH] =?UTF-8?q?fix(=E5=9B=BE=E8=A1=A8):=20=E4=BF=AE=E5=A4=8D?= =?UTF-8?q?=E5=8F=8A=E4=BC=98=E5=8C=96=E5=9C=B0=E5=9B=BE=E3=80=81=E7=AC=A6?= =?UTF-8?q?=E5=8F=B7=E5=9C=B0=E5=9B=BE=E7=9A=84=E6=8F=90=E7=A4=BA=E6=A0=B7?= =?UTF-8?q?=E5=BC=8F=E9=97=AE=E9=A2=98?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../js/panel/charts/map/symbolic-map.ts | 26 +++++++++++++--- .../js/panel/charts/map/tooltip-carousel.ts | 31 ++++++++++++++++++- 2 files changed, 52 insertions(+), 5 deletions(-) diff --git a/core/core-frontend/src/views/chart/components/js/panel/charts/map/symbolic-map.ts b/core/core-frontend/src/views/chart/components/js/panel/charts/map/symbolic-map.ts index 08cb45cdeb..4b5e2965a4 100644 --- a/core/core-frontend/src/views/chart/components/js/panel/charts/map/symbolic-map.ts +++ b/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 { 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 { * @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 { } }) } + 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, diff --git a/core/core-frontend/src/views/chart/components/js/panel/charts/map/tooltip-carousel.ts b/core/core-frontend/src/views/chart/components/js/panel/charts/map/tooltip-carousel.ts index e4fbf4e035..63b580f458 100644 --- a/core/core-frontend/src/views/chart/components/js/panel/charts/map/tooltip-carousel.ts +++ b/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()