Merge 2733770 into 62eccb7

antvis · Apr 26, 2022 · a967780 · a967780
2 parents 62eccb7 + 2733770
commit a967780
Show file tree

Hide file tree

Showing 4 changed files with 48 additions and 27 deletions.
diff --git a/packages/l7plot/src/plots/choropleth/constants.ts b/packages/l7plot/src/plots/choropleth/constants.ts
@@ -52,7 +52,7 @@ export const CHINA_BOUNDARY_STYLE = {
     color: 'red',
     width: 1,
     opacity: 0.8,
-    dashArray: [1, 6],
+    dashArray: [2, 4],
   },
   // 海洋
   coast: {
@@ -65,5 +65,6 @@ export const CHINA_BOUNDARY_STYLE = {
     color: 'gray',
     width: 0.7,
     opacity: 0.8,
+    dashArray: [2, 4],
   },
 };
diff --git a/packages/l7plot/src/plots/choropleth/index.ts b/packages/l7plot/src/plots/choropleth/index.ts
@@ -52,6 +52,10 @@ export class Choropleth extends Plot<ChoroplethOptions> {
    * 国界图层
    */
   public chinaBoundaryLayer: PathLayer | undefined;
+  /**
+   * 港澳界图层
+   */
+  public chinaHkmBoundaryLayer: PathLayer | undefined;
   /**
    * 国界争议图层
    */
@@ -223,14 +227,9 @@ export class Choropleth extends Plot<ChoroplethOptions> {
     const layerGroup = new LayerGroup([this.fillAreaLayer]);
 
     if (this.options.chinaBorder) {
-      const { chinaBoundaryLayer, chinaDisputeBoundaryLayer } = this.createCountryBoundaryLayer(
-        this.chinaBoundaryData,
-        this.options
-      );
-      this.chinaBoundaryLayer = chinaBoundaryLayer;
-      this.chinaDisputeBoundaryLayer = chinaDisputeBoundaryLayer;
-      layerGroup.addLayer(this.chinaBoundaryLayer);
-      layerGroup.addLayer(this.chinaDisputeBoundaryLayer);
+      const layers = this.createCountryBoundaryLayer(this.chinaBoundaryData, this.options);
+
+      layers.forEach((layer) => layerGroup.addLayer(layer));
     }
 
     if (this.options.label) {
@@ -245,8 +244,14 @@ export class Choropleth extends Plot<ChoroplethOptions> {
    * 创建中国国界线图层
    */
   private createCountryBoundaryLayer(data: FeatureCollection, plotConfig?: ChoroplethOptions) {
-    const { chinaBoundaryLayer, chinaDisputeBoundaryLayer } = createCountryBoundaryLayer(data, plotConfig);
-    return { chinaBoundaryLayer, chinaDisputeBoundaryLayer };
+    const { chinaBoundaryLayer, chinaHkmBoundaryLayer, chinaDisputeBoundaryLayer } = createCountryBoundaryLayer(
+      data,
+      plotConfig
+    );
+    this.chinaBoundaryLayer = chinaBoundaryLayer;
+    this.chinaHkmBoundaryLayer = chinaHkmBoundaryLayer;
+    this.chinaDisputeBoundaryLayer = chinaDisputeBoundaryLayer;
+    return [chinaBoundaryLayer, chinaHkmBoundaryLayer, chinaDisputeBoundaryLayer];
   }
 
   /**
@@ -296,17 +301,13 @@ export class Choropleth extends Plot<ChoroplethOptions> {
     this.fillAreaLayer.update(fillAreaLayerConfig);
 
     const createCountryBoundaryLayer = () => {
-      const { chinaBoundaryLayer, chinaDisputeBoundaryLayer } = this.createCountryBoundaryLayer(
-        this.chinaBoundaryData,
-        this.options
-      );
-      this.chinaBoundaryLayer = chinaBoundaryLayer;
-      this.chinaDisputeBoundaryLayer = chinaDisputeBoundaryLayer;
-      this.layerGroup.addLayer(this.chinaBoundaryLayer);
-      this.layerGroup.addLayer(this.chinaDisputeBoundaryLayer);
+      const layers = this.createCountryBoundaryLayer(this.chinaBoundaryData, this.options);
+
+      layers.forEach((layer) => this.layerGroup.addLayer(layer));
     };
     const removeCountryBoundaryLayer = () => {
       this.chinaBoundaryLayer && this.layerGroup.removeLayer(this.chinaBoundaryLayer);
+      this.chinaHkmBoundaryLayer && this.layerGroup.removeLayer(this.chinaHkmBoundaryLayer);
       this.chinaDisputeBoundaryLayer && this.layerGroup.removeLayer(this.chinaDisputeBoundaryLayer);
     };
 

diff --git a/packages/l7plot/src/plots/choropleth/layer.ts b/packages/l7plot/src/plots/choropleth/layer.ts
@@ -11,9 +11,10 @@ export const createCountryBoundaryLayer = (data: FeatureCollection, 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', 'national'].includes(properties?.['type'])
   );
   const disputeBoundaryFeatures = data.features.filter(({ properties }) => properties?.['type'] === 'dispute');
+  const hkmBoundaryFeatures = data.features.filter(({ properties }) => properties?.['type'] === 'hkm');
 
   const chinaBoundaryLayer = new PathLayer({
     name: 'chinaBoundaryLayer',
@@ -41,6 +42,24 @@ export const createCountryBoundaryLayer = (data: FeatureCollection, plotConfig?:
       opacity: ['type', (type) => borderStyle[type].opacity],
     },
   });
+  const chinaHkmBoundaryLayer = new PathLayer({
+    name: 'chinaHkmBoundaryLayer',
+    visible,
+    minZoom,
+    maxZoom,
+    zIndex: zIndex + 0.1,
+    source: {
+      data: { type: 'FeatureCollection', features: hkmBoundaryFeatures },
+      parser: { type: 'geojson' },
+    },
+    color: borderStyle.hkm.color,
+    size: borderStyle.hkm.width,
+    style: {
+      opacity: borderStyle.hkm.opacity,
+      lineType: 'dash',
+      dashArray: borderStyle.hkm.dashArray as [number, number],
+    },
+  });
   const chinaDisputeBoundaryLayer = new PathLayer({
     name: 'chinaDisputeBoundaryLayer',
     visible,
@@ -60,5 +79,5 @@ export const createCountryBoundaryLayer = (data: FeatureCollection, plotConfig?:
     },
   });
 
-  return { chinaBoundaryLayer, chinaDisputeBoundaryLayer };
+  return { chinaBoundaryLayer, chinaHkmBoundaryLayer, chinaDisputeBoundaryLayer };
 };
diff --git a/website/docs/api/plots/choropleth.zh.md b/website/docs/api/plots/choropleth.zh.md
@@ -131,12 +131,12 @@ const choropleth = new Choropleth(container, options);
 
 是否显示中国国界线，国界线样式 ChinaBoundaryStyle 配置如下：
 
-| 属性     | 描述 | 类型                     | 默认值                                                      | 是否必填 |
-| -------- | ---- | ------------------------ | ----------------------------------------------------------- | -------- |
-| national | 国界 | `LinesLayerStyleOptions` | `{ color: 'red', width: 1, opacity: 1 }`                    | optional |
-| dispute  | 争议 | `LinesLayerStyleOptions` | `{ color: 'red', width: 1, opacity: 1, dashArray: [1, 6] }` | optional |
-| coast    | 海洋 | `LinesLayerStyleOptions` | `{ color: 'blue', width: 1, opacity: 1 }`                   | optional |
-| hkm      | 港澳 | `LinesLayerStyleOptions` | `{ color: 'gray', width: 1, opacity: 1 }`                   | optional |
+| 属性     | 描述 | 类型                     | 默认值                                                           | 是否必填 |
+| -------- | ---- | ------------------------ | ---------------------------------------------------------------- | -------- |
+| national | 国界 | `LinesLayerStyleOptions` | `{ color: 'red', width: 1, opacity: 1 }`                         | optional |
+| dispute  | 争议 | `LinesLayerStyleOptions` | `{ color: 'red', width: 1, opacity: 1, dashArray: [2, 4] }`      | optional |
+| coast    | 海洋 | `LinesLayerStyleOptions` | `{ color: 'blue', width: 0.7, opacity: 0.8 }`                    | optional |
+| hkm      | 港澳 | `LinesLayerStyleOptions` | `{ color: 'gray', width: 0.7, opacity: 0.8, dashArray: [2, 4] }` | optional |
 
 ### `options.`drill