fix: 修复 Choropleth 下钻 Legend 更新不同步 (#350)

* fix: 临时修复 legend 异步数据获取情况 * fix: legend event
antvis · Mar 15, 2024 · cc6c898 · cc6c898
1 parent 3f3e8b2
commit cc6c898
Show file tree

Hide file tree

Showing 6 changed files with 31 additions and 19 deletions.
diff --git a/packages/l7plot/package.json b/packages/l7plot/package.json
@@ -47,14 +47,14 @@
     "topojson-client": "^3.1.0"
   },
   "devDependencies": {
-    "@antv/l7": "^2.11.5",
+    "@antv/l7": "^2.21.0",
     "@types/amap-js-api": "^1.4.6",
     "@types/geojson": "^7946.0.8",
     "@types/lodash-es": "^4.17.4",
     "@types/topojson-client": "^3.1.0"
   },
   "peerDependencies": {
-    "@antv/l7": "^2.11.5"
+    "@antv/l7": "^2.21.0"
   },
   "publishConfig": {
     "access": "public",

diff --git a/packages/l7plot/src/core/map/constants.ts b/packages/l7plot/src/core/map/constants.ts
@@ -65,4 +65,8 @@ export const LayerEventList: string[] = [
   'mousedown',
   'uncontextmenu',
   'unpick',
+  // 数据映射更新，图例更新事件
+  'legend',
+  'legend:color',
+  'legend:size',
 ];
diff --git a/packages/l7plot/src/core/plot/index.ts b/packages/l7plot/src/core/plot/index.ts
@@ -118,7 +118,7 @@ export abstract class Plot<O extends PlotOptions> extends Map<O> {
     source: Source,
     label?: false | LabelOptions,
     plotLayerConfig?: PlotLayerOptions,
-    labelLayer?: TextLayer
+    labelLayer?: TextLayer,
   ) {
     if (label) {
       if (labelLayer) {
@@ -259,7 +259,7 @@ export abstract class Plot<O extends PlotOptions> extends Map<O> {
     if (legend) {
       setTimeout(() => {
         this.updateLegendControl(legend);
-      });
+      }, 500);
     }
 
     this.emit('change-data');

diff --git a/packages/l7plot/src/layers/area-layer/index.ts b/packages/l7plot/src/layers/area-layer/index.ts
@@ -119,7 +119,7 @@ export class AreaLayer extends PlotLayer<AreaLayerOptions> {
       this.highlightLayer,
       this.selectFillLayer,
       this.selectStrokeLayer,
-      options
+      options,
     );
   }
 
@@ -146,7 +146,11 @@ export class AreaLayer extends PlotLayer<AreaLayerOptions> {
       return;
     }
     const features = feature ? [feature] : [];
-    this.highlightLayer.setData({ type: 'FeatureCollection', features }, { parser: { type: 'geojson' } });
+    if (this.highlightLayer.getSource()) {
+      this.highlightLayer.setData({ type: 'FeatureCollection', features }, { parser: { type: 'geojson' } });
+    } else {
+      this.highlightLayer.source({ type: 'FeatureCollection', features: [] }, { parser: { type: 'geojson' } });
+    }
     this.highlightLayerData = featureId;
   }
 
@@ -155,7 +159,7 @@ export class AreaLayer extends PlotLayer<AreaLayerOptions> {
       this.selectData.length === selectData.length &&
       isEqual(
         this.selectData.map(({ featureId }) => featureId),
-        selectData.map(({ featureId }) => featureId)
+        selectData.map(({ featureId }) => featureId),
       )
     ) {
       return;

diff --git a/packages/l7plot/src/plots/choropleth/index.ts b/packages/l7plot/src/plots/choropleth/index.ts
@@ -197,15 +197,6 @@ export class Choropleth extends Plot<ChoroplethOptions> {
     const { data: geoData, sourceCFG } = this.parserSourceConfig(this.options.source);
     this.source.setData(geoData, sourceCFG);
 
-    // 更新 legend
-    // TODO: 数据更新后，图层尚未执行更新，后续加图层 update 事件来解决
-    const legend = this.options.legend;
-    if (legend) {
-      setTimeout(() => {
-        this.updateLegendControl(legend);
-      });
-    }
-
     this.emit('change-data');
   }
 
@@ -241,7 +232,7 @@ export class Choropleth extends Plot<ChoroplethOptions> {
   private createCountryBoundaryLayer(data: FeatureCollection, plotConfig?: ChoroplethOptions) {
     const { chinaBoundaryLayer, chinaHkmBoundaryLayer, chinaDisputeBoundaryLayer } = createCountryBoundaryLayer(
       data,
-      plotConfig
+      plotConfig,
     );
     this.chinaBoundaryLayer = chinaBoundaryLayer;
     this.chinaHkmBoundaryLayer = chinaHkmBoundaryLayer;
@@ -255,7 +246,7 @@ export class Choropleth extends Plot<ChoroplethOptions> {
   protected createLabelLayer(source: Source, label: LabelOptions): TextLayer {
     const data = source['originData'].features
       .map(({ properties }) =>
-        Object.assign({}, properties, { centroid: properties['centroid'] || properties['center'] })
+        Object.assign({}, properties, { centroid: properties['centroid'] || properties['center'] }),
       )
       .filter(({ centroid }) => centroid);
     const { visible, minZoom, maxZoom, zIndex = 0 } = this.options;
@@ -325,6 +316,7 @@ export class Choropleth extends Plot<ChoroplethOptions> {
    */
   protected initLayersEvent() {
     this.initDrillEvent();
+    this.initLegendEvent();
   }
 
   /**
@@ -375,6 +367,18 @@ export class Choropleth extends Plot<ChoroplethOptions> {
     this.fillAreaLayer.on(triggerDown, this.onDrillDownHander);
   }
 
+  /**
+   * 初始化图例事件
+   */
+  private initLegendEvent() {
+    const legend = this.options.legend;
+    if (!legend) return;
+    const onUpdateLegendData = () => {
+      this.updateLegendControl(legend);
+    };
+    this.fillAreaLayer.on('legend:color', onUpdateLegendData);
+  }
+
   /**
    * 重置钻取缓存数据
    */

diff --git a/storybook/package.json b/storybook/package.json
@@ -13,7 +13,7 @@
     "prettier": "prettier stories -c -w"
   },
   "dependencies": {
-    "@antv/l7": "^2.11.5",
+    "@antv/l7": "^2.21.0",
     "@antv/l7plot": "link:../packages/l7plot",
     "@antv/l7-composite-layers": "link:../packages/composite-layers",
     "antd": "^4.16.13",