Merge pull request #382 from antvis/docs

refactor(district): 对行政区划进行抽稀处理

examples/district/basic/API.zh.md

@@ -30,7 +30,6 @@ District 支持下面几种图
 - ProvinceLayer 省级地图
 - CityLayer 市级地图
 - CountyLayer 县级地图
-- DrillDownLayer 上钻下取地图
 
 
 ## 构造函数

examples/district/drill/demo/meta.json

@@ -12,7 +12,7 @@
     {
       "filename": "drill_down_bubble.js",
       "title": "中国地图钻取气泡图",
-      "screenshot": "https://gw.alipayobjects.com/mdn/rms_8e1672/afts/img/A*xjjARqU70xoAAAAAAAAAAABkARQnAQ"
+      "screenshot": "https://gw.alipayobjects.com/mdn/rms_b82228/afts/img/A*opUFTqjO9YgAAAAAAAAAAABkARQnAQ"
     }
   ]
 }

packages/district/src/config_1.ts

@@ -0,0 +1,128 @@
+// tslint:disable-next-line:no-submodule-imports
+import merge from 'lodash/merge';
+let DataConfig: { [key: string]: any } = {
+  world: {
+    fill: {
+      type: 'pbf',
+      url:
+        '//gw.alipayobjects.com/os/bmw-prod/d666a08d-fce1-48e2-913a-87d81772bcc9.bin',
+    },
+    line: {
+      type: 'pbf',
+      url:
+        '//gw.alipayobjects.com/os/bmw-prod/62f61f5f-cca7-4137-845d-13c8f9969664.bin',
+    },
+    label: {
+      type: 'pbf',
+      url:
+        '//gw.alipayobjects.com/os/bmw-prod/90c51eb3-04d7-402f-bd05-95e4bd27dd62.bin',
+      parser: {
+        type: 'geojson',
+      },
+    },
+    nationalBoundaries: {
+      type: 'json',
+      url:
+        '//gw.alipayobjects.com/os/bmw-prod/ee493a41-0558-4c0e-bee6-520276c4f1a8.json',
+    },
+  },
+  country: {
+    CHN: {
+      1: {
+        fill: {
+          type: 'pbf',
+          url:
+            'https://gw.alipayobjects.com/os/bmw-prod/dc890ed9-8b64-4fe6-bc51-5742753784fb.bin',
+        },
+        line: {
+          type: 'pbf',
+          url:
+            '//gw.alipayobjects.com/os/bmw-prod/70ec087e-c48a-4b76-8825-6452f17bae7a.bin',
+        },
+        provinceLine: {
+          type: 'pbf',
+          url:
+            'https://gw.alipayobjects.com/os/bmw-prod/0024caaf-86b2-4e75-a3d1-6d2146490b67.bin',
+        },
+        label: {
+          type: 'json',
+          url:
+            '//gw.alipayobjects.com/os/bmw-prod/36832a45-68f8-4b51-b006-9dec71f92a23.json',
+        },
+      },
+      2: {
+        fill: {
+          type: 'pbf',
+          url:
+            'https://gw.alipayobjects.com/os/bmw-prod/522c6496-c711-4581-88db-c3741cd39abd.bin',
+        },
+        line: {
+          type: 'pbf',
+          url:
+            'https://gw.alipayobjects.com/os/bmw-prod/f6a4e2b1-359b-43a6-921c-39d2088d1dab.bin',
+        },
+        cityLine: {
+          type: 'pbf',
+          url:
+            '//gw.alipayobjects.com/os/bmw-prod/f6a4e2b1-359b-43a6-921c-39d2088d1dab.bin',
+        },
+        provinceLine: {
+          type: 'pbf',
+          url:
+            '//gw.alipayobjects.com/os/bmw-prod/0024caaf-86b2-4e75-a3d1-6d2146490b67.bin',
+        },
+      },
+      3: {
+        fill: {
+          type: 'pbf',
+          url:
+            '//gw.alipayobjects.com/os/bmw-prod/516b2703-d692-44e6-80dd-b3f5df0186e7.bin',
+        },
+        line: {
+          type: 'pbf',
+          url:
+            '//gw.alipayobjects.com/os/bmw-prod/bc97875a-90f2-42c0-a62c-43d2efd7460d.bin',
+        },
+        countryLine: {
+          type: 'pbf',
+          url:
+            '//gw.alipayobjects.com/os/bmw-prod/bc97875a-90f2-42c0-a62c-43d2efd7460d.bin',
+        },
+        cityLine: {
+          type: 'pbf',
+          url:
+            '//gw.alipayobjects.com/os/bmw-prod/8bfbfe7e-bd0e-4bbe-84d8-629f4dc7abc4.bin',
+        },
+        provinceLine: {
+          type: 'pbf',
+          url:
+            '//gw.alipayobjects.com/os/bmw-prod/778ad7ba-5a3f-4ed6-a94a-b8ab8acae9d6.bin',
+        },
+      },
+      nationalBoundaries: {
+        type: 'json',
+        url:
+          '//gw.alipayobjects.com/os/bmw-prod/ee493a41-0558-4c0e-bee6-520276c4f1a8.json',
+      },
+      nationalBoundaries2: {
+        type: 'json',
+        url:
+          '//gw.alipayobjects.com/os/bmw-prod/f2189cc4-662b-4358-8573-36f0f918b7ca.json',
+      },
+      island: {
+        type: 'json',
+        url:
+          '//gw.alipayobjects.com/os/bmw-prod/fe49b393-1147-4769-94ed-70471f4ff15d.json',
+      },
+    },
+  },
+  province: {
+    110000: '',
+  },
+};
+
+function setDataConfig(config: any) {
+  DataConfig = merge(DataConfig, config);
+}
+
+export { setDataConfig, DataConfig };

packages/district/src/index.ts

@@ -1,4 +1,4 @@
-import { setDataConfig } from './config';
+import { setDataConfig } from './config_1';
 import CityLayer from './layer/city';
 import CountryLayer from './layer/country';
 import CountyLayer from './layer/county';

packages/district/src/layer/baseLayer.ts

@@ -134,7 +134,7 @@ export default class BaseLayer extends EventEmitter {
       provinceStroke: '#f0f0f0',
       countyStroke: '#525252',
       coastlineStroke: '#4190da',
-      coastlineWidth: 1,
+      coastlineWidth: 0.6,
       nationalStroke: '#c994c7',
       nationalWidth: 0.5,
       chinaNationalStroke: 'gray',

packages/district/src/layer/country.ts

@@ -6,7 +6,7 @@ import {
   Scene,
   StyleAttrField,
 } from '@antv/l7';
-import { DataConfig } from '../config';
+import { DataConfig } from '../config_1';
 import BaseLayer from './baseLayer';
 import { IDistrictLayerOption } from './interface';
 
@@ -14,17 +14,8 @@ export default class CountryLayer extends BaseLayer {
   constructor(scene: Scene, option: Partial<IDistrictLayerOption> = {}) {
     super(scene, option);
     const { depth } = this.options;
-    this.loadData().then(([fillData, fillLabel]) => {
-      this.addFillLayer(fillData);
-      if (fillLabel && this.options.label?.enable) {
-        this.addLabelLayer(
-          fillLabel.filter((v: any) => {
-            return v.name !== '澳门';
-          }),
-        );
-        this.addMCLabel();
-      }
-    });
+    this.addProvinceFill();
+    this.addProvinceLabel();
     const countryConfig = DataConfig.country.CHN[depth];
 
     this.addProvinceLine(countryConfig.provinceLine);
@@ -36,6 +27,27 @@ export default class CountryLayer extends BaseLayer {
       this.addCountyBorder(countryConfig.countryLine);
     }
   }
+  protected async addProvinceFill() {
+    const { depth } = this.options;
+    const countryConfig = DataConfig.country.CHN[depth];
+    const fillData = await this.fetchData(countryConfig.fill);
+    this.addFillLayer(fillData);
+  }
+  protected async addProvinceLabel() {
+    const { depth } = this.options;
+    const countryConfig = DataConfig.country.CHN[depth];
+    const fillLabel = countryConfig.label
+      ? await this.fetchData(countryConfig.label)
+      : null;
+    if (fillLabel && this.options.label?.enable) {
+      this.addLabelLayer(
+        fillLabel.filter((v: any) => {
+          return v.name !== '澳门';
+        }),
+      );
+      this.addMCLabel();
+    }
+  }
   // 国界,省界
   protected async addProvinceLine(cfg: any) {
     const lineData = await this.fetchData(cfg);

packages/district/src/layer/province.ts

@@ -8,7 +8,7 @@ import {
 } from '@antv/l7';
 // tslint:disable-next-line: no-submodule-imports
 import merge from 'lodash/merge';
-import { DataConfig } from '../config';
+import { DataConfig } from '../config_1';
 import BaseLayer from './baseLayer';
 import { adcodeType, IDistrictLayerOption } from './interface';
 

packages/district/src/layer/world.ts

@@ -6,7 +6,7 @@ import {
   Scene,
   StyleAttrField,
 } from '@antv/l7';
-import { DataConfig } from '../config';
+import { DataConfig } from '../config_1';
 import BaseLayer from './baseLayer';
 import { IDistrictLayerOption } from './interface';
 export default class WorldLayer extends BaseLayer {

stories/District/district.stories.tsx

@@ -1,10 +1,10 @@
 import { storiesOf } from '@storybook/react';
 require('./../assets/css/antd.css');
 import * as React from 'react';
-import ChinaBubble from './Layer/country_bubble';
 import City from './Layer/city';
 import Country from './Layer/Country';
 import Country2 from './Layer/Country2';
+import ChinaBubble from './Layer/country_bubble';
 import CountryCity from './Layer/country_city';
 import CountryCounty from './Layer/country_county';
 import County from './Layer/county';