fix(图表): 修复自定义地图重置效果异常 #13938

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

@@ -430,7 +430,9 @@ export class BubbleMap extends L7PlotChartView<ChoroplethOptions, Choropleth> {
       return obj
     }, {})
     //处理label
-    options.label = false
+    options.label = {
+      visible: false
+    }
     if (label.show) {
       const geoJsonMap = geoJson.features.reduce((p, n) => {
         if (n.properties['adcode']) {

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

@@ -129,6 +129,7 @@ export class FlowMap extends L7ChartView<Scene, L7Config> {
     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<Scene, L7Config> {
     configList[0].once('inited', () => {
       mapRendered(container)
     })
-    this.configZoomButton(chart, scene)
     return new L7Wrapper(scene, configList)
   }
 

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

@@ -110,6 +110,7 @@ export class HeatMap extends L7ChartView<Scene, L7Config> {
     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<Scene, L7Config> {
       }
     })
 
-    this.configZoomButton(chart, scene)
     return new L7Wrapper(scene, config)
   }
 

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

@@ -209,9 +209,7 @@ export class Map extends L7PlotChartView<ChoroplethOptions, Choropleth> {
     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<ChoroplethOptions, Choropleth> {
       }
     })
     //处理label
-    options.label = false
+    options.label = {
+      visible: false
+    }
     if (label.show) {
       const labelLocation = []
       customSubArea.forEach(area => {

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

@@ -154,6 +154,7 @@ export class SymbolicMap extends L7ChartView<Scene, L7Config> {
     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, L7Config> {
       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)

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<PlotOptions> | 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<PlotOptions>) {
+  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)

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)