fix: chinaBorder update of choropleth (#116)

antvis · Dec 27, 2021 · 7399e4e · 7399e4e
1 parent 3df0083
commit 7399e4e
Show file tree

Hide file tree

Showing 20 changed files with 93 additions and 123 deletions.
diff --git a/packages/l7plot/package.json b/packages/l7plot/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@antv/l7plot",
-  "version": "0.0.3-alpha.11",
+  "version": "0.0.4-alpha.1",
   "description": "Geospatial Visualization Chart Library",
   "main": "dist/lib/index.js",
   "types": "dist/lib/index.d.ts",
@@ -45,7 +45,7 @@
   },
   "dependencies": {
     "@antv/event-emitter": "^0.1.2",
-    "@antv/l7": "^2.6.22",
+    "@antv/l7": "^2.6.25",
     "@antv/l7plot-component": "^0.0.3-alpha.5",
     "@antv/util": "^2.0.13",
     "lodash-es": "^4.17.21",

diff --git a/packages/l7plot/src/core/plot/index.ts b/packages/l7plot/src/core/plot/index.ts
@@ -109,6 +109,27 @@ export abstract class Plot<O extends PlotOptions> extends Map<O> {
     return textLayer;
   }
 
+  /**
+   * 更新数据标签图层
+   */
+  protected updateLabelLayer(
+    source: Source,
+    label?: false | LabelOptions,
+    plotLayerConfig?: PlotLayerOptions,
+    labelLayer?: TextLayer
+  ) {
+    if (label) {
+      if (labelLayer) {
+        labelLayer.update({ ...label });
+      } else {
+        labelLayer = this.createLabelLayer(source, label, plotLayerConfig);
+        this.layerGroup.addLayer(labelLayer);
+      }
+    } else if (label === false) {
+      labelLayer && this.layerGroup.removeLayer(labelLayer);
+    }
+  }
+
   /**
    * 渲染
    */

diff --git a/packages/l7plot/src/index.ts b/packages/l7plot/src/index.ts
@@ -1,4 +1,4 @@
-export const version = '0.0.3-alpha.11';
+export const version = '0.0.4-alpha.1';
 
 /** 资源静态注册 **/
 export {

diff --git a/packages/l7plot/src/layers/area-layer/adaptor.ts b/packages/l7plot/src/layers/area-layer/adaptor.ts
@@ -90,6 +90,7 @@ export function mappingLayer(
     select: false,
   };
   const fillStyle = { opacity: style?.opacity };
+  const fillBottomColor = style?.fillBottomColor;
   const strokeSize = style?.lineWidth;
   const strokeColor = style?.stroke;
   const strokeStyle = { opacity: style?.lineOpacity, dashArray: style?.lineDash, lineType: style?.lineType };
@@ -105,6 +106,8 @@ export function mappingLayer(
   fillStyle && MappingLayer.style(layer, fillStyle);
   // state
   fillState && MappingLayer.state(layer, fillState);
+  // bottomColor
+  fillBottomColor && layer.setBottomColor(fillBottomColor);
 
   /**
    * 描边图层

diff --git a/packages/l7plot/src/layers/area-layer/types.ts b/packages/l7plot/src/layers/area-layer/types.ts
@@ -22,6 +22,8 @@ type AreaLayerStyle = {
   lineDash?: [number, number];
   // 描边透明度
   lineOpacity?: number;
+  // 填充兜底颜色，用于颜色值映值不存在时
+  fillBottomColor?: false | string;
 };
 
 export type AreaLayerActiveOptions = {

diff --git a/packages/l7plot/src/plots/area/index.ts b/packages/l7plot/src/plots/area/index.ts
@@ -62,18 +62,7 @@ export class Area extends Plot<AreaOptions> {
     const polygonLayerConfig = pick<any>(options, AreaLayer.LayerOptionsKeys);
     this.areaLayer.update(polygonLayerConfig);
 
-    if (options.label) {
-      if (this.labelLayer) {
-        this.labelLayer.update({ ...options.label });
-      } else {
-        this.labelLayer = this.createLabelLayer(this.source, options.label, this.options);
-        this.layerGroup.addLayer(this.labelLayer);
-      }
-    } else {
-      if (this.labelLayer) {
-        this.layerGroup.removeLayer(this.labelLayer);
-      }
-    }
+    this.updateLabelLayer(this.source, options.label, this.options, this.labelLayer);
   }
 
   /**

diff --git a/packages/l7plot/src/plots/choropleth/index.ts b/packages/l7plot/src/plots/choropleth/index.ts
@@ -213,7 +213,7 @@ export class Choropleth extends Plot<ChoroplethOptions> {
     const layerGroup = new LayerGroup([this.fillAreaLayer]);
 
     if (this.options.chinaBorder) {
-      const { chinaBoundaryLayer, chinaDisputeBoundaryLayer } = createCountryBoundaryLayer(
+      const { chinaBoundaryLayer, chinaDisputeBoundaryLayer } = this.createCountryBoundaryLayer(
         this.chinaBoundaryData,
         this.options
       );
@@ -231,6 +231,14 @@ export class Choropleth extends Plot<ChoroplethOptions> {
     return layerGroup;
   }
 
+  /**
+   * 创建中国国界线图层
+   */
+  private createCountryBoundaryLayer(data: FeatureCollection, plotConfig?: ChoroplethOptions) {
+    const { chinaBoundaryLayer, chinaDisputeBoundaryLayer } = createCountryBoundaryLayer(data, plotConfig);
+    return { chinaBoundaryLayer, chinaDisputeBoundaryLayer };
+  }
+
   /**
    * 创建数据标签图层
    */
@@ -255,11 +263,16 @@ export class Choropleth extends Plot<ChoroplethOptions> {
       ...label,
     });
 
-    source.on('update', () => {
+    const updateCallback = () => {
       const data = this.source['originData'].features
         .map(({ properties }) => properties)
         .filter(({ centroid }) => centroid);
       textLayer.layer.setData(data);
+    };
+
+    source.on('update', updateCallback);
+    textLayer.on('remove', () => {
+      source.off('update', updateCallback);
     });
 
     return textLayer;
@@ -274,7 +287,7 @@ export class Choropleth extends Plot<ChoroplethOptions> {
 
     if (options.chinaBorder) {
       if (!this.chinaBoundaryLayer) {
-        const { chinaBoundaryLayer, chinaDisputeBoundaryLayer } = createCountryBoundaryLayer(
+        const { chinaBoundaryLayer, chinaDisputeBoundaryLayer } = this.createCountryBoundaryLayer(
           this.chinaBoundaryData,
           this.options
         );
@@ -283,27 +296,13 @@ export class Choropleth extends Plot<ChoroplethOptions> {
         this.layerGroup.addLayer(this.chinaBoundaryLayer);
         this.layerGroup.addLayer(this.chinaDisputeBoundaryLayer);
       }
-    } else {
-      if (this.chinaBoundaryLayer) {
-        this.layerGroup.removeLayer(this.chinaBoundaryLayer);
-      }
-      if (this.chinaDisputeBoundaryLayer) {
-        this.layerGroup.removeLayer(this.chinaDisputeBoundaryLayer);
-      }
+      // todo 更新方法
+    } else if (options.chinaBorder === false) {
+      this.chinaBoundaryLayer && this.layerGroup.removeLayer(this.chinaBoundaryLayer);
+      this.chinaDisputeBoundaryLayer && this.layerGroup.removeLayer(this.chinaDisputeBoundaryLayer);
     }
 
-    if (options.label) {
-      if (this.labelLayer) {
-        this.labelLayer.update({ ...options.label });
-      } else {
-        this.labelLayer = this.createLabelLayer(this.source, options.label);
-        this.layerGroup.addLayer(this.labelLayer);
-      }
-    } else {
-      if (this.labelLayer) {
-        this.layerGroup.removeLayer(this.labelLayer);
-      }
-    }
+    this.updateLabelLayer(this.source, options.label, this.options, this.labelLayer);
   }
 
   /**

diff --git a/packages/l7plot/src/plots/choropleth/layer.ts b/packages/l7plot/src/plots/choropleth/layer.ts
@@ -1,16 +1,19 @@
 import { deepAssign } from '../../utils';
-import { ChinaBoundaryStyle, ChoroplethOptions } from './types';
+import { ChinaBoundaryStyle, ChoroplethOptions, FeatureCollection } from './types';
 import { PathLayer } from '../../layers/path-layer';
 import { CHINA_BOUNDARY_STYLE } from './constants';
 
-export const createCountryBoundaryLayer = (data: any, plotConfig?: ChoroplethOptions) => {
+/**
+ * 创建中国国界线图层
+ */
+export const createCountryBoundaryLayer = (data: FeatureCollection, plotConfig?: ChoroplethOptions) => {
   const { visible, minZoom, maxZoom, zIndex = 0, chinaBorder } = plotConfig || {};
   const borderStyle: Required<ChinaBoundaryStyle> =
     typeof chinaBorder === 'object' ? deepAssign({}, CHINA_BOUNDARY_STYLE, chinaBorder) : CHINA_BOUNDARY_STYLE;
   const chinaBoundaryFeatures = data.features.filter(({ properties }) =>
-    ['coast', 'hkm', 'national'].includes(properties.type)
+    ['coast', 'hkm', 'national'].includes(properties?.['type'])
   );
-  const disputeBoundaryFeatures = data.features.filter(({ properties }) => properties.type === 'dispute');
+  const disputeBoundaryFeatures = data.features.filter(({ properties }) => properties?.['type'] === 'dispute');
 
   const chinaBoundaryLayer = new PathLayer({
     name: 'chinaBoundaryLayer',

diff --git a/packages/l7plot/src/plots/choropleth/types.ts b/packages/l7plot/src/plots/choropleth/types.ts
@@ -42,7 +42,7 @@ export interface ChoroplethSourceOptions extends Pick<ISourceCFG, 'transforms'>
   /**
    * 业务数据
    */
-  data: any[];
+  data: Record<string, any>[];
   /**
    * 地理元数据关联
    */

diff --git a/packages/l7plot/src/plots/dot/index.ts b/packages/l7plot/src/plots/dot/index.ts
@@ -62,18 +62,7 @@ export class Dot extends Plot<DotOptions> {
     const dotLayerConfig = pick<any>(options, DotLayer.LayerOptionsKeys);
     this.dotLayer.update(dotLayerConfig);
 
-    if (options.label) {
-      if (this.labelLayer) {
-        this.labelLayer.update({ ...options.label });
-      } else {
-        this.labelLayer = this.createLabelLayer(this.source, options.label, this.options);
-        this.layerGroup.addLayer(this.labelLayer);
-      }
-    } else {
-      if (this.labelLayer) {
-        this.layerGroup.removeLayer(this.labelLayer);
-      }
-    }
+    this.updateLabelLayer(this.source, options.label, this.options, this.labelLayer);
   }
 
   /**

diff --git a/packages/l7plot/src/plots/flow/index.ts b/packages/l7plot/src/plots/flow/index.ts
@@ -105,9 +105,14 @@ export class Flow extends Plot<FlowOptions> {
       animate,
     });
 
-    source.on('update', () => {
+    const updateCallback = () => {
       const data = this.parserPointData(this.source);
       radiationLayer.layer.setData(data);
+    };
+
+    source.on('update', updateCallback);
+    radiationLayer.on('remove', () => {
+      source.off('update', updateCallback);
     });
 
     return radiationLayer;
@@ -132,9 +137,14 @@ export class Flow extends Plot<FlowOptions> {
       ...label,
     });
 
-    source.on('update', () => {
+    const updateCallback = () => {
       const data = this.parserPointData(this.source);
       labelLayer.layer.setData(data);
+    };
+
+    source.on('update', updateCallback);
+    labelLayer.on('remove', () => {
+      source.off('update', updateCallback);
     });
 
     return labelLayer;
@@ -155,24 +165,9 @@ export class Flow extends Plot<FlowOptions> {
         this.radiationLayer = this.createRadiationLayer(this.source);
         this.layerGroup.addLayer(this.radiationLayer);
       }
-    } else {
-      if (this.radiationLayer) {
-        this.layerGroup.removeLayer(this.radiationLayer);
-      }
     }
 
-    if (options.label) {
-      if (this.labelLayer) {
-        this.labelLayer.update({ ...options.label });
-      } else {
-        this.labelLayer = this.createLabelLayer(this.source, options.label);
-        this.layerGroup.addLayer(this.labelLayer);
-      }
-    } else {
-      if (this.labelLayer) {
-        this.layerGroup.removeLayer(this.labelLayer);
-      }
-    }
+    this.updateLabelLayer(this.source, options.label, this.options, this.labelLayer);
   }
 
   /**

diff --git a/packages/l7plot/src/plots/grid/index.ts b/packages/l7plot/src/plots/grid/index.ts
@@ -62,17 +62,6 @@ export class Grid extends Plot<GridOptions> {
     const heatMapLayerConfig = pick<any>(options, GridLayer.LayerOptionsKeys);
     this.gridLayer.update(heatMapLayerConfig);
 
-    if (options.label) {
-      if (this.labelLayer) {
-        this.labelLayer.update({ ...options.label });
-      } else {
-        this.labelLayer = this.createLabelLayer(this.source, options.label, this.options);
-        this.layerGroup.addLayer(this.labelLayer);
-      }
-    } else {
-      if (this.labelLayer) {
-        this.layerGroup.removeLayer(this.labelLayer);
-      }
-    }
+    this.updateLabelLayer(this.source, options.label, this.options, this.labelLayer);
   }
 }
diff --git a/packages/l7plot/src/plots/heatmap/index.ts b/packages/l7plot/src/plots/heatmap/index.ts
@@ -62,18 +62,7 @@ export class Heatmap extends Plot<HeatmapOptions> {
     const heatMapLayerConfig = pick<any>(options, HeatmapLayer.LayerOptionsKeys);
     this.heatmapLayer.update(heatMapLayerConfig);
 
-    if (options.label) {
-      if (this.labelLayer) {
-        this.labelLayer.update({ ...options.label });
-      } else {
-        this.labelLayer = this.createLabelLayer(this.source, options.label, this.options);
-        this.layerGroup.addLayer(this.labelLayer);
-      }
-    } else {
-      if (this.labelLayer) {
-        this.layerGroup.removeLayer(this.labelLayer);
-      }
-    }
+    this.updateLabelLayer(this.source, options.label, this.options, this.labelLayer);
   }
 
   /**

diff --git a/packages/l7plot/src/plots/hexbin/index.ts b/packages/l7plot/src/plots/hexbin/index.ts
@@ -62,17 +62,6 @@ export class Hexbin extends Plot<HexbinOptions> {
     const heatMapLayerConfig = pick<any>(options, HexbinLayer.LayerOptionsKeys);
     this.hexbinLayer.update(heatMapLayerConfig);
 
-    if (options.label) {
-      if (this.labelLayer) {
-        this.labelLayer.update({ ...options.label });
-      } else {
-        this.labelLayer = this.createLabelLayer(this.source, options.label, this.options);
-        this.layerGroup.addLayer(this.labelLayer);
-      }
-    } else {
-      if (this.labelLayer) {
-        this.layerGroup.removeLayer(this.labelLayer);
-      }
-    }
+    this.updateLabelLayer(this.source, options.label, this.options, this.labelLayer);
   }
 }
diff --git a/storybook/package.json b/storybook/package.json
@@ -13,8 +13,8 @@
     "prettier": "prettier stories -c -w"
   },
   "dependencies": {
-    "@antv/l7": "^2.6.22",
-    "@antv/l7plot": "^0.0.3-alpha.10",
+    "@antv/l7": "^2.6.25",
+    "@antv/l7plot": "^0.0.4-alpha.1",
     "antd": "^4.16.13",
     "react": "^16.14.0",
     "react-dom": "^16.14.0"

diff --git a/storybook/stories/plots/choropleth/WorldSufei.tsx b/storybook/stories/plots/choropleth/WorldSufei.tsx
@@ -60,6 +60,7 @@ class ChinaMap extends Component {
         lineDash: [1, 10],
         lineWidth: 0.6,
         lineOpacity: 0.8,
+        fillBottomColor: 'rgba(0, 0, 0, 0.2)',
       },
       label: {
         visible: false,

diff --git a/website/docs/common/layers/arc-layer/style.zh.md b/website/docs/common/layers/arc-layer/style.zh.md
@@ -12,7 +12,7 @@
 | sourceColor | 渐变起点颜色           | `string`           |         | optional |
 | targetColor | 渐变终点颜色           | `string`           |         | optional |
 
-> dashArray: 虚线间隔，第一个值为虚线每个分段的长度，第二个值为分段间隔的距离。lineDash 设为 `[0,0]` 的效果为没有虚线。
+> dashArray: 虚线间隔，第一个值为虚线每个分段的长度，第二个值为分段间隔的距离。dashArray 设为 `[0,0]` 的效果为没有虚线。
 
 ```js
 {