Merge pull request #10539 from dataease/pr@dev-v2@refactor_map_load

refactor(图表): 地图加载完成标识

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

@@ -15,7 +15,11 @@ import {
 import { flow, getGeoJsonFile, hexColorToRGBA, parseJson } from '@/views/chart/components/js/util'
 import { cloneDeep } from 'lodash-es'
 import { FeatureCollection } from '@antv/l7plot/dist/esm/plots/choropleth/types'
-import { handleGeoJson } from '@/views/chart/components/js/panel/common/common_antv'
+import {
+  handleGeoJson,
+  mapRendered,
+  mapRendering
+} from '@/views/chart/components/js/panel/common/common_antv'
 import { valueFormatter } from '@/views/chart/components/js/formatter'
 
 const { t } = useI18n()
@@ -100,8 +104,12 @@ export class BubbleMap extends L7PlotChartView<ChoroplethOptions, Choropleth> {
     const view = new Choropleth(container, options)
     const dotLayer = this.getDotLayer(chart, geoJson, drawOption)
     this.configZoomButton(chart, view)
+    mapRendering(container)
     view.once('loaded', () => {
       view.addLayer(dotLayer)
+      dotLayer.once('add', () => {
+        mapRendered(container)
+      })
       view.scene.map['keyboard'].disable()
       view.on('fillAreaLayer:click', (ev: MapMouseEvent) => {
         const data = ev.feature.properties

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

@@ -12,6 +12,7 @@ import { GaodeMap } from '@antv/l7-maps'
 import { Scene } from '@antv/l7-scene'
 import { LineLayer } from '@antv/l7-layers'
 import { queryMapKeyApi } from '@/api/setting/sysParameter'
+import { mapRendered, mapRendering } from '@/views/chart/components/js/panel/common/common_antv'
 const { t } = useI18n()
 
 /**
@@ -77,6 +78,10 @@ export class FlowMap extends L7ChartView<Scene, L7Config> {
         zoom: 2.5
       })
     })
+    mapRendering(container)
+    scene.once('loaded', () => {
+      mapRendered(container)
+    })
     if (xAxis?.length < 2 || xAxisExt?.length < 2) {
       return new L7Wrapper(scene, undefined)
     }
@@ -115,6 +120,9 @@ export class FlowMap extends L7ChartView<Scene, L7Config> {
         })
         .color(flowLineStyle.sourceColor)
     }
+    config.once('inited', () => {
+      mapRendered(container)
+    })
     this.configZoomButton(chart, scene)
     return new L7Wrapper(scene, config)
   }

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

@@ -13,6 +13,7 @@ import { Scene } from '@antv/l7-scene'
 import { HeatmapLayer } from '@antv/l7-layers'
 import { queryMapKeyApi } from '@/api/setting/sysParameter'
 import { DEFAULT_BASIC_STYLE } from '@/views/chart/components/editor/util/chart'
+import { mapRendered, mapRendering } from '@/views/chart/components/js/panel/common/common_antv'
 const { t } = useI18n()
 
 /**
@@ -55,7 +56,6 @@ export class HeatMap extends L7ChartView<Scene, L7Config> {
       basicStyle = parseJson(chart.customAttr).basicStyle
       miscStyle = parseJson(chart.customAttr).misc
     }
-    console.log(basicStyle)
     const mapStyle = `amap://styles/${basicStyle.mapStyle ? basicStyle.mapStyle : 'normal'}`
     const key = await this.getMapKey()
     // 底层
@@ -69,10 +69,13 @@ export class HeatMap extends L7ChartView<Scene, L7Config> {
         zoom: 2.5
       })
     })
+    mapRendering(container)
+    scene.once('loaded', () => {
+      mapRendered(container)
+    })
     if (xAxis?.length < 2 || yAxis?.length < 1) {
       return new L7Wrapper(scene, undefined)
     }
-    console.log(chart.data?.data)
     const config: L7Config = new HeatmapLayer({
       name: 'line',
       blend: 'normal',

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

@@ -12,7 +12,11 @@ import {
   hexColorToRGBA,
   parseJson
 } from '@/views/chart/components/js/util'
-import { handleGeoJson } from '@/views/chart/components/js/panel/common/common_antv'
+import {
+  handleGeoJson,
+  mapRendered,
+  mapRendering
+} from '@/views/chart/components/js/panel/common/common_antv'
 import { FeatureCollection } from '@antv/l7plot/dist/esm/plots/choropleth/types'
 import { cloneDeep } from 'lodash-es'
 import { useI18n } from '@/hooks/web/useI18n'
@@ -133,7 +137,9 @@ export class Map extends L7PlotChartView<ChoroplethOptions, Choropleth> {
     options = this.setupOptions(chart, options, context)
     const view = new Choropleth(container, options)
     this.configZoomButton(chart, view)
+    mapRendering(container)
     view.once('loaded', () => {
+      mapRendered(container)
       view.scene.map['keyboard'].disable()
       view.on('fillAreaLayer:click', (ev: MapMouseEvent) => {
         const data = ev.feature.properties
@@ -147,7 +153,6 @@ export class Map extends L7PlotChartView<ChoroplethOptions, Choropleth> {
         })
       })
     })
-
     return view
   }
 

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

@@ -13,6 +13,7 @@ import { Scene } from '@antv/l7-scene'
 import { PointLayer } from '@antv/l7-layers'
 import { LayerPopup } from '@antv/l7'
 import { queryMapKeyApi } from '@/api/setting/sysParameter'
+import { mapRendered, mapRendering } from '@/views/chart/components/js/panel/common/common_antv'
 const { t } = useI18n()
 
 /**
@@ -81,6 +82,10 @@ export class SymbolicMap extends L7ChartView<Scene, L7Config> {
         zoom: 1.8
       })
     })
+    mapRendering(container)
+    scene.once('loaded', () => {
+      mapRendered(container)
+    })
     if (xAxis?.length < 2 || xAxisExt?.length < 1) {
       return new L7Wrapper(scene, undefined)
     }