fix(图表): 修复地图自适应失效 #14020

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

@@ -158,10 +158,7 @@ export class BubbleMap extends L7PlotChartView<ChoroplethOptions, Choropleth> {
     if (!areaId.startsWith('custom_')) {
       dotLayer.options = { ...dotLayer.options, tooltip }
     }
-    // 完成地图渲染后配置缩放按钮，为了能够获取到默认的缩放比例
-    view.on('loaded', () => {
     this.configZoomButton(chart, view)
-    })
     mapRendering(container)
     view.once('loaded', () => {
       // 修改地图鼠标样式为默认

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

@@ -111,26 +111,27 @@ export class FlowMap extends L7ChartView<Scene, L7Config> {
           token: mapKey?.key ?? undefined,
           style: mapStyle,
           pitch: misc.mapPitch,
-          center,
+          center: basicStyle.autoFit === false ? center : undefined,
-          zoom: basicStyle.autoFit === false ? basicStyle.zoomLevel : 2.5,
+          zoom: basicStyle.autoFit === false ? basicStyle.zoomLevel : undefined,
           showLabel: !(basicStyle.showLabel === false)
         })
       })
     } else {
       if (scene.getLayers()?.length) {
         await scene.removeAllLayer()
-        scene.setCenter(center)
         scene.setPitch(misc.mapPitch)
-        scene.setZoom(basicStyle.autoFit === false ? basicStyle.zoomLevel : 2.5)
         scene.setMapStyle(mapStyle)
         scene.map.showLabel = !(basicStyle.showLabel === false)
       }
+      if (basicStyle.autoFit === false) {
+        scene.setZoomAndCenter(basicStyle.zoomLevel, center)
+      }
     }
     mapRendering(container)
     scene.once('loaded', () => {
       mapRendered(container)
-      this.configZoomButton(chart, scene)
     })
+    this.configZoomButton(chart, scene)
     if (xAxis?.length < 2 || xAxisExt?.length < 2) {
       return new L7Wrapper(scene, undefined)
     }

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

@@ -93,25 +93,26 @@ export class HeatMap extends L7ChartView<Scene, L7Config> {
           style: mapStyle,
           pitch: miscStyle.mapPitch,
           center,
-          zoom: basicStyle.autoFit === false ? basicStyle.zoomLevel : 2.5,
+          zoom: basicStyle.autoFit === false ? basicStyle.zoomLevel : undefined,
           showLabel: !(basicStyle.showLabel === false)
         })
       })
     } else {
       if (scene.getLayers()?.length) {
         await scene.removeAllLayer()
-        scene.setCenter(center)
         scene.setPitch(miscStyle.mapPitch)
-        scene.setZoom(basicStyle.autoFit === false ? basicStyle.zoomLevel : 2.5)
         scene.setMapStyle(mapStyle)
         scene.map.showLabel = !(basicStyle.showLabel === false)
+        if (basicStyle.autoFit === false) {
+          scene.setZoomAndCenter(basicStyle.zoomLevel, center)
+        }
       }
     }
     mapRendering(container)
     scene.once('loaded', () => {
       mapRendered(container)
-      this.configZoomButton(chart, scene)
     })
+    this.configZoomButton(chart, scene)
     if (xAxis?.length < 2 || yAxis?.length < 1) {
       return new L7Wrapper(scene, undefined)
     }

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

@@ -208,7 +208,6 @@ export class Map extends L7PlotChartView<ChoroplethOptions, Choropleth> {
     options = this.setupOptions(chart, options, context)
     const { Choropleth } = await import('@antv/l7plot/dist/esm/plots/choropleth')
     const view = new Choropleth(container, options)
-    // 完成地图渲染后配置缩放按钮，为了能够获取到默认的缩放比例
     this.configZoomButton(chart, view)
     mapRendering(container)
     view.once('loaded', () => {

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

@@ -137,25 +137,26 @@ export class SymbolicMap extends L7ChartView<Scene, L7Config> {
           style: mapStyle,
           pitch: miscStyle.mapPitch,
           center,
-          zoom: basicStyle.autoFit === false ? basicStyle.zoomLevel : 2.5,
+          zoom: basicStyle.autoFit === false ? basicStyle.zoomLevel : undefined,
           showLabel: !(basicStyle.showLabel === false)
         })
       })
     } else {
       if (scene.getLayers()?.length) {
         await scene.removeAllLayer()
-        scene.setCenter(center)
         scene.setPitch(miscStyle.mapPitch)
-        scene.setZoom(basicStyle.autoFit === false ? basicStyle.zoomLevel : 2.5)
         scene.setMapStyle(mapStyle)
         scene.map.showLabel = !(basicStyle.showLabel === false)
       }
+      if (basicStyle.autoFit === false) {
+        scene.setZoomAndCenter(basicStyle.zoomLevel, center)
+      }
     }
     mapRendering(container)
     scene.once('loaded', () => {
       mapRendered(container)
-      this.configZoomButton(chart, scene)
     })
+    this.configZoomButton(chart, scene)
     if (xAxis?.length < 2) {
       return new L7Wrapper(scene, undefined)
     }

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

@@ -1134,11 +1134,15 @@ export class CustomZoom extends Zoom {
       'l7-button-control',
       container,
       () => {
+        if (this.controlOption['bounds']) {
+          this.mapsService.fitBounds(this.controlOption['bounds'], { animate: true })
+        } else {
           this.mapsService.setZoomAndCenter(
             this.controlOption['initZoom'],
             this.controlOption['center']
           )
         }
+      }
     )
     if (this.controlOption.showZoom) {
       this['zoomNumDiv'] = this['createButton'](
@@ -1196,6 +1200,8 @@ export function configL7Zoom(chart: Chart, scene: Scene) {
     return
   }
   if (!scene?.getControlByName('zoom')) {
+    if (!scene.map) {
+      scene.once('loaded', () => {
         scene.map.on('complete', () => {
           const initZoom = basicStyle.autoFit === false ? basicStyle.zoomLevel : scene.getZoom()
           const center =
@@ -1210,7 +1216,76 @@ export function configL7Zoom(chart: Chart, scene: Scene) {
           } as any
           scene.addControl(new CustomZoom(newZoomOptions))
         })
+      })
+    } else {
+      const newZoomOptions = {
+        buttonColor: basicStyle.zoomButtonColor,
+        buttonBackground: basicStyle.zoomBackground
+      } as any
+      if (basicStyle.autoFit === false) {
+        newZoomOptions.initZoom = basicStyle.zoomLevel
+        newZoomOptions.center = [basicStyle.mapCenter.longitude, basicStyle.mapCenter.latitude]
+      } else {
+        const coordinates: [][] = []
+        if (chart.type === 'flow-map') {
+          const startAxis = chart.xAxis
+          const endAxis = chart.xAxisExt
+          if (startAxis?.length === 2) {
+            chart.data?.tableRow?.forEach(row => {
+              coordinates.push([row[startAxis[0].dataeaseName], row[startAxis[1].dataeaseName]])
+            })
           }
+          if (endAxis?.length === 2) {
+            chart.data?.tableRow?.forEach(row => {
+              coordinates.push([row[endAxis[0].dataeaseName], row[endAxis[1].dataeaseName]])
+            })
+          }
+        } else {
+          const axis = chart.xAxis
+          if (axis?.length === 2) {
+            chart.data?.tableRow?.forEach(row => {
+              coordinates.push([row[axis[0].dataeaseName], row[axis[1].dataeaseName]])
+            })
+          }
+        }
+        newZoomOptions.bounds = calculateBounds(coordinates)
+      }
+      scene.addControl(new CustomZoom(newZoomOptions))
+    }
+  }
+}
+/**
+ * 计算经纬度数据的边界点
+ * @param coordinates 经纬度数组 [[lng, lat], [lng, lat], ...]
+ * @returns {[[number, number], [number, number]]} 返回东北角和西南角的坐标
+ */
+export function calculateBounds(coordinates: number[][]): {
+  northEast: [number, number]
+  southWest: [number, number]
+} {
+  if (!coordinates || coordinates.length === 0) {
+    return {
+      northEast: [180, 90],
+      southWest: [-180, -90]
+    }
+  }
+
+  let maxLng = -180
+  let minLng = 180
+  let maxLat = -90
+  let minLat = 90
+
+  coordinates.forEach(([lng, lat]) => {
+    maxLng = Math.max(maxLng, lng)
+    minLng = Math.min(minLng, lng)
+    maxLat = Math.max(maxLat, lat)
+    minLat = Math.min(minLat, lat)
+  })
+
+  return [
+    [maxLng, maxLat], // 东北角坐标
+    [minLng, minLat] // 西南角坐标
+  ]
 }
 
 export function configL7PlotZoom(chart: Chart, plot: L7Plot<PlotOptions>) {