feat(图表): 地图增加恢复初始状态按钮

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

@@ -91,9 +91,6 @@ export class BubbleMap extends L7PlotChartView<ChoroplethOptions, Choropleth> {
         active: { stroke: 'green', lineWidth: 1 }
       },
       tooltip: {},
-      zoom: {
-        position: 'bottomright'
-      },
       legend: false,
       // 禁用线上地图数据
       customFetchGeoData: () => null
@@ -101,6 +98,7 @@ export class BubbleMap extends L7PlotChartView<ChoroplethOptions, Choropleth> {
     options = this.setupOptions(chart, options, drawOption, geoJson)
     const view = new Choropleth(container, options)
     const dotLayer = this.getDotLayer(chart, geoJson, drawOption)
+    this.configZoomButton(view)
     view.once('loaded', () => {
       view.addLayer(dotLayer)
       view.on('fillAreaLayer:click', (ev: MapMouseEvent) => {

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

@@ -90,9 +90,6 @@ export class Map extends L7PlotChartView<ChoroplethOptions, Choropleth> {
         active: { stroke: 'green', lineWidth: 1 }
       },
       tooltip: {},
-      zoom: {
-        position: 'bottomright'
-      },
       legend: {
         position: 'bottomleft'
       },
@@ -101,6 +98,7 @@ export class Map extends L7PlotChartView<ChoroplethOptions, Choropleth> {
     }
     options = this.setupOptions(chart, options, drawOption, geoJson)
     const view = new Choropleth(container, options)
+    this.configZoomButton(view)
     view.once('loaded', () => {
       view.on('fillAreaLayer:click', (ev: MapMouseEvent) => {
         const data = ev.feature.properties

core/core-frontend/src/views/chart/components/js/panel/common/common_antv.ts

@@ -21,6 +21,11 @@ import {
   LIST_CLASS
 } from '@antv/l7plot-component/dist/esm/legend/category/constants'
 import substitute from '@antv/util/esm/substitute'
+import { Plot as L7Plot } from '@antv/l7plot/dist/esm/core/plot'
+import type { PlotOptions } from '@antv/l7plot/dist/esm/types'
+import { Zoom } from '@antv/l7'
+import { createL7Icon } from '@antv/l7-component/es/utils/icon'
+import { DOM } from '@antv/l7-utils'
 
 export function getPadding(chart: Chart): number[] {
   if (chart.drill) {
@@ -814,3 +819,47 @@ export function configL7Legend(): LegendOptions {
     }
   }
 }
+class CustomZoom extends Zoom {
+  resetButtonGroup(container) {
+    DOM.clearChildren(container)
+    this['zoomInButton'] = this['createButton'](
+      this.controlOption.zoomInText,
+      this.controlOption.zoomInTitle,
+      'l7-button-control',
+      container,
+      this.zoomIn
+    )
+    const resetBtnIconText = createL7Icon('l7-icon-round')
+    this['createButton'](resetBtnIconText, 'Reset', 'l7-button-control', container, () => {
+      this.mapsService.setZoomAndCenter(
+        this.controlOption['initZoom'],
+        this.controlOption['center']
+      )
+    })
+    if (this.controlOption.showZoom) {
+      this['zoomNumDiv'] = this['createButton'](
+        '0',
+        '',
+        'l7-button-control l7-control-zoom__number',
+        container
+      )
+    }
+    this['zoomOutButton'] = this['createButton'](
+      this.controlOption.zoomOutText,
+      this.controlOption.zoomOutTitle,
+      'l7-button-control',
+      container,
+      this.zoomOut
+    )
+    this['updateDisabled']()
+  }
+}
+export function configL7Zoom(plot: L7Plot<PlotOptions>) {
+  plot.once('loaded', () => {
+    const zoomOptions = {
+      initZoom: plot.scene.getZoom(),
+      center: plot.scene.getCenter()
+    } as any
+    plot.scene.addControl(new CustomZoom(zoomOptions))
+  })
+}

core/core-frontend/src/views/chart/components/js/panel/types/impl/l7plot.ts

@@ -6,7 +6,8 @@ import {
   configL7Label,
   configL7Legend,
   configL7Style,
-  configL7Tooltip
+  configL7Tooltip,
+  configL7Zoom
 } from '@/views/chart/components/js/panel/common/common_antv'
 import {
   AntVAbstractChartView,
@@ -73,6 +74,10 @@ export abstract class L7PlotChartView<
     options.source.data = data
     return options
   }
+
+  protected configZoomButton(plot: P) {
+    configL7Zoom(plot)
+  }
   protected constructor(name: string, defaultData?: any[]) {
     super(ChartLibraryType.L7_PLOT, name)
     this.defaultData = defaultData