From fcc34f43a3e31b459c1184403e63367f02fe3585 Mon Sep 17 00:00:00 2001 From: wisonic Date: Tue, 24 Dec 2024 18:39:15 +0800 Subject: [PATCH] =?UTF-8?q?fix(=E5=9B=BE=E8=A1=A8):=20=E4=BF=AE=E5=A4=8D?= =?UTF-8?q?=E8=87=AA=E5=AE=9A=E4=B9=89=E5=9C=B0=E5=9B=BE=E9=87=8D=E7=BD=AE?= =?UTF-8?q?=E6=95=88=E6=9E=9C=E5=BC=82=E5=B8=B8=20#13938?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../js/panel/charts/map/bubble-map.ts | 4 +- .../js/panel/charts/map/flow-map.ts | 2 +- .../js/panel/charts/map/heat-map.ts | 2 +- .../components/js/panel/charts/map/map.ts | 8 +-- .../js/panel/charts/map/symbolic-map.ts | 2 +- .../components/js/panel/common/common_antv.ts | 72 +++++++++---------- .../components/js/panel/types/impl/l7plot.ts | 6 +- 7 files changed, 45 insertions(+), 51 deletions(-) diff --git a/core/core-frontend/src/views/chart/components/js/panel/charts/map/bubble-map.ts b/core/core-frontend/src/views/chart/components/js/panel/charts/map/bubble-map.ts index 0a17769471..19761e94b4 100644 --- a/core/core-frontend/src/views/chart/components/js/panel/charts/map/bubble-map.ts +++ b/core/core-frontend/src/views/chart/components/js/panel/charts/map/bubble-map.ts @@ -430,7 +430,9 @@ export class BubbleMap extends L7PlotChartView { return obj }, {}) //处理label - options.label = false + options.label = { + visible: false + } if (label.show) { const geoJsonMap = geoJson.features.reduce((p, n) => { if (n.properties['adcode']) { diff --git a/core/core-frontend/src/views/chart/components/js/panel/charts/map/flow-map.ts b/core/core-frontend/src/views/chart/components/js/panel/charts/map/flow-map.ts index ece3966200..84441d01da 100644 --- a/core/core-frontend/src/views/chart/components/js/panel/charts/map/flow-map.ts +++ b/core/core-frontend/src/views/chart/components/js/panel/charts/map/flow-map.ts @@ -129,6 +129,7 @@ export class FlowMap extends L7ChartView { mapRendering(container) scene.once('loaded', () => { mapRendered(container) + this.configZoomButton(chart, scene) }) if (xAxis?.length < 2 || xAxisExt?.length < 2) { return new L7Wrapper(scene, undefined) @@ -140,7 +141,6 @@ export class FlowMap extends L7ChartView { configList[0].once('inited', () => { mapRendered(container) }) - this.configZoomButton(chart, scene) return new L7Wrapper(scene, configList) } diff --git a/core/core-frontend/src/views/chart/components/js/panel/charts/map/heat-map.ts b/core/core-frontend/src/views/chart/components/js/panel/charts/map/heat-map.ts index 0ae7c06df7..d4db282c81 100644 --- a/core/core-frontend/src/views/chart/components/js/panel/charts/map/heat-map.ts +++ b/core/core-frontend/src/views/chart/components/js/panel/charts/map/heat-map.ts @@ -110,6 +110,7 @@ export class HeatMap extends L7ChartView { mapRendering(container) scene.once('loaded', () => { mapRendered(container) + this.configZoomButton(chart, scene) }) if (xAxis?.length < 2 || yAxis?.length < 1) { return new L7Wrapper(scene, undefined) @@ -138,7 +139,6 @@ export class HeatMap extends L7ChartView { } }) - this.configZoomButton(chart, scene) return new L7Wrapper(scene, config) } diff --git a/core/core-frontend/src/views/chart/components/js/panel/charts/map/map.ts b/core/core-frontend/src/views/chart/components/js/panel/charts/map/map.ts index dd9441be2b..f92d275145 100644 --- a/core/core-frontend/src/views/chart/components/js/panel/charts/map/map.ts +++ b/core/core-frontend/src/views/chart/components/js/panel/charts/map/map.ts @@ -209,9 +209,7 @@ export class Map extends L7PlotChartView { const { Choropleth } = await import('@antv/l7plot/dist/esm/plots/choropleth') const view = new Choropleth(container, options) // 完成地图渲染后配置缩放按钮，为了能够获取到默认的缩放比例 - view.on('loaded', () => { - this.configZoomButton(chart, view) - }) + this.configZoomButton(chart, view) mapRendering(container) view.once('loaded', () => { mapRendered(container) @@ -499,7 +497,9 @@ export class Map extends L7PlotChartView { } }) //处理label - options.label = false + options.label = { + visible: false + } if (label.show) { const labelLocation = [] customSubArea.forEach(area => { 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 f3cc99a6ef..2f6ad47962 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 @@ -154,6 +154,7 @@ export class SymbolicMap extends L7ChartView { mapRendering(container) scene.once('loaded', () => { mapRendered(container) + this.configZoomButton(chart, scene) }) if (xAxis?.length < 2) { return new L7Wrapper(scene, undefined) @@ -166,7 +167,6 @@ export class SymbolicMap extends L7ChartView { scene.addPopup(tooltipLayer) } this.buildLabel(chart, configList) - this.configZoomButton(chart, scene) symbolicLayer.on('inited', ev => { chart.container = container configCarouselTooltip(chart, symbolicLayer, symbolicLayer.sourceOption.data, scene) diff --git a/core/core-frontend/src/views/chart/components/js/panel/common/common_antv.ts b/core/core-frontend/src/views/chart/components/js/panel/common/common_antv.ts index f0d2c9742e..088e423de0 100644 --- a/core/core-frontend/src/views/chart/components/js/panel/common/common_antv.ts +++ b/core/core-frontend/src/views/chart/components/js/panel/common/common_antv.ts @@ -1185,31 +1185,47 @@ export class CustomZoom extends Zoom { } as IZoomControlOption } } -export function configL7Zoom(chart: Chart, plot: L7Plot | Scene) { +export function configL7Zoom(chart: Chart, scene: Scene) { const { basicStyle } = parseJson(chart.customAttr) - const plotScene = plot instanceof Scene ? plot : plot.scene - const zoomOption = plotScene?.getControlByName('zoom') + const zoomOption = scene?.getControlByName('zoom') if (zoomOption) { - plotScene.removeControl(zoomOption) + scene.removeControl(zoomOption) } if (shouldHideZoom(basicStyle)) { return } - if (!plotScene?.getControlByName('zoom')) { - let initZoom = basicStyle.autoFit === false ? basicStyle.zoomLevel : 2.5 - let center = getCenter(basicStyle) - if (['map', 'bubble-map'].includes(chart.type)) { - initZoom = plotScene.getZoom() - center = plotScene.getCenter() - } - const newZoomOptions = { - initZoom: initZoom, - center: center, + if (!scene?.getControlByName('zoom')) { + scene.map.on('complete', () => { + const initZoom = basicStyle.autoFit === false ? basicStyle.zoomLevel : scene.getZoom() + const center = + basicStyle.autoFit === false + ? [basicStyle.mapCenter.longitude, basicStyle.mapCenter.latitude] + : [scene.map.getCenter().lng, scene.map.getCenter().lat] + const newZoomOptions = { + initZoom: initZoom, + center: center, + buttonColor: basicStyle.zoomButtonColor, + buttonBackground: basicStyle.zoomBackground + } as any + scene.addControl(new CustomZoom(newZoomOptions)) + }) + } +} + +export function configL7PlotZoom(chart: Chart, plot: L7Plot) { + const { basicStyle } = parseJson(chart.customAttr) + if (shouldHideZoom(basicStyle)) { + return + } + plot.once('loaded', () => { + const zoomOptions = { + initZoom: plot.scene.getZoom(), + center: plot.scene.getCenter(), buttonColor: basicStyle.zoomButtonColor, buttonBackground: basicStyle.zoomBackground } as any - addCustomZoom(plotScene, newZoomOptions) - } + plot.scene.addControl(new CustomZoom(zoomOptions)) + }) } function setStyle(elements: HTMLElement[], styleProp: string, value) { @@ -1243,30 +1259,6 @@ function shouldHideZoom(basicStyle: any): boolean { ) } -/** - * 获取地图中心点 - * @param basicStyle - */ -function getCenter(basicStyle: any): [number, number] { - let center: [number, number] = [ - DEFAULT_BASIC_STYLE.mapCenter.longitude, - DEFAULT_BASIC_STYLE.mapCenter.latitude - ] - if (basicStyle.autoFit === false) { - center = [basicStyle.mapCenter.longitude, basicStyle.mapCenter.latitude] - } - return center -} - -/** - * 添加自定义缩放控件 - * @param plotScene - * @param newZoomOptions - */ -function addCustomZoom(plotScene: Scene, newZoomOptions: any): void { - plotScene.addControl(new CustomZoom(newZoomOptions)) -} - const G2_TOOLTIP_WRAPPER = 'g2-tooltip-wrapper' export function getTooltipContainer(id) { let wrapperDom = document.getElementById(G2_TOOLTIP_WRAPPER) diff --git a/core/core-frontend/src/views/chart/components/js/panel/types/impl/l7plot.ts b/core/core-frontend/src/views/chart/components/js/panel/types/impl/l7plot.ts index ef6ca144dc..01bf3bd30e 100644 --- a/core/core-frontend/src/views/chart/components/js/panel/types/impl/l7plot.ts +++ b/core/core-frontend/src/views/chart/components/js/panel/types/impl/l7plot.ts @@ -5,9 +5,9 @@ import type { Plot as L7Plot } from '@antv/l7plot/dist/esm/core/plot' import { configL7Label, configL7Legend, + configL7PlotZoom, configL7Style, - configL7Tooltip, - configL7Zoom + configL7Tooltip } from '@/views/chart/components/js/panel/common/common_antv' import { AntVAbstractChartView, @@ -85,7 +85,7 @@ export abstract class L7PlotChartView< } protected configZoomButton(chart: Chart, plot: P) { - configL7Zoom(chart, plot) + configL7PlotZoom(chart, plot) } protected constructor(name: string, defaultData?: any[]) { super(ChartLibraryType.L7_PLOT, name)