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

2025-02-24 03:22:56 +08:00 · 2025-01-06 23:12:12 +08:00 · 2025-01-06 23:12:12 +08:00 · dc26a7b106
commit dc26a7b106
parent c7db0d16d3
6 changed files with 105 additions and 31 deletions
--- 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
@ -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)
-    })
+    this.configZoomButton(chart, view)
    mapRendering(container)
    view.once('loaded', () => {
      // 修改地图鼠标样式为默认
--- 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
@ -111,26 +111,27 @@ export class FlowMap extends L7ChartView<Scene, L7Config> {
          token: mapKey?.key ?? undefined,
          style: mapStyle,
          pitch: misc.mapPitch,
-          center,
-          zoom: basicStyle.autoFit === false ? basicStyle.zoomLevel : 2.5,
+          center: basicStyle.autoFit === false ? center : undefined,
+          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)
    }
--- 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
@ -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)
    }
--- 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
@ -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', () => {
--- 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
@ -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)
    }
--- 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
@ -1134,10 +1134,14 @@ export class CustomZoom extends Zoom {
      'l7-button-control',
      container,
      () => {
-        this.mapsService.setZoomAndCenter(
-          this.controlOption['initZoom'],
-          this.controlOption['center']
-        )
+        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) {
@ -1196,22 +1200,93 @@ export function configL7Zoom(chart: Chart, scene: Scene) {
    return
  }
  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]
+    if (!scene.map) {
+      scene.once('loaded', () => {
+        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))
+        })
+      })
+    } else {
      const newZoomOptions = {
-        initZoom: initZoom,
-        center: center,
        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>) {
  const { basicStyle } = parseJson(chart.customAttr)