feat(district): add drilldown layer

packages/district/src/config.ts

@@ -7,7 +7,7 @@ let DataConfig: { [key: string]: any } = {
       url:
         '//gw.alipayobjects.com/os/bmw-prod/21bdf832-1dfc-4cae-92d1-aa8d156df40f.bin',
     },
-    provinceLine: {
+    line: {
       type: 'pbf',
       url:
         '//gw.alipayobjects.com/os/bmw-prod/76914518-e04c-42c9-8c4b-1ae71aabb024.bin',

packages/district/src/index.ts

@@ -2,6 +2,7 @@ import { setDataConfig } from './config';
 import CityLayer from './layer/city';
 import CountryLayer from './layer/country';
 import CountyLayer from './layer/county';
+import DrillDownLayer from './layer/drillDown';
 import ProvinceLayer from './layer/province';
 import WorldLayer from './layer/world';
 export {
@@ -10,5 +11,6 @@ export {
   ProvinceLayer,
   CityLayer,
   CountyLayer,
+  DrillDownLayer,
   setDataConfig,
 };

packages/district/src/layer/baseLayer.ts

@@ -26,7 +26,7 @@ export default class BaseLayer {
 
   constructor(scene: Scene, option: Partial<IDistrictLayerOption> = {}) {
     this.scene = scene;
-    this.options = merge(this.getdefaultOption(), option);
+    this.options = merge(this.getDefaultOption(), option);
   }
 
   public destroy() {
@@ -49,7 +49,7 @@ export default class BaseLayer {
       return (await fetch(data.url)).json();
     }
   }
-  protected getdefaultOption(): IDistrictLayerOption {
+  protected getDefaultOption(): IDistrictLayerOption {
     return {
       zIndex: 0,
       depth: 1,

packages/district/src/layer/city.ts

@@ -16,8 +16,8 @@ export interface IProvinceLayerOption extends IDistrictLayerOption {
   adcode: string[];
 }
 export default class CityLayer extends ProvinceLayer {
-  protected getdefaultOption(): IProvinceLayerOption {
+  protected getDefaultOption(): IProvinceLayerOption {
-    const config = super.getdefaultOption();
+    const config = super.getDefaultOption();
     return merge({}, config, {
       adcode: ['110000'],
       depth: 3,

packages/district/src/layer/country.ts

@@ -139,7 +139,7 @@ export default class CountryLayer extends BaseLayer {
     this.scene.addLayer(lineLayer2);
     this.layers.push(lineLayer, lineLayer2);
   }
-  // 升级边界
+  // 省级边界
   private async addCityBorder(cfg: any) {
     const border1 = await this.fetchData(cfg);
     const { cityStroke, cityStrokeWidth } = this.options;

packages/district/src/layer/county.ts

@@ -8,8 +8,8 @@ export interface IProvinceLayerOption extends IDistrictLayerOption {
   adcode: string[];
 }
 export default class CityLayer extends ProvinceLayer {
-  protected getdefaultOption(): IProvinceLayerOption {
+  protected getDefaultOption(): IProvinceLayerOption {
-    const config = super.getdefaultOption();
+    const config = super.getDefaultOption();
     return merge({}, config, {
       adcode: ['110100'],
       depth: 3,

packages/district/src/layer/drillDown.ts

@@ -0,0 +1,25 @@
+import { Scene } from '@antv/l7';
+import CityLayer from './city';
+import CountryLayer from './country';
+import { IDistrictLayerOption } from './interface';
+import ProvinceLayer from './province';
+
+export default class DrillDownLayer {
+  private provinceLayer: ProvinceLayer;
+  private cityLayer: CityLayer;
+  private countryLayer: CountryLayer;
+  constructor(scene: Scene, option: Partial<IDistrictLayerOption>) {
+    this.countryLayer = new CountryLayer(scene, option);
+    this.provinceLayer = new ProvinceLayer(scene);
+  }
+  public getDefaultOption() {
+    return {
+      province: {},
+      city: {},
+      county: {},
+    };
+  }
+  public addProvinceEvent() {
+    return 'event';
+  }
+}

packages/district/src/layer/province.ts

@@ -26,12 +26,17 @@ export default class ProvinceLayer extends BaseLayer {
   }
   // 通过adcode 更新
   public updateDistrict(adcode: adcodeType) {
+    if (!adcode && Array.isArray(adcode) && adcode.length === 0) {
+      this.hide();
+      return;
+    }
     const fillData = this.filterData(this.fillData, adcode);
     const lineData = this.filterData(this.lineData, adcode);
     const labelData = this.filterLabelData(this.labelData, adcode);
     this.fillLayer.setData(fillData);
     this.lineLayer.setData(lineData);
     this.labelLayer.setData(labelData);
+    this.show();
   }
 
   // 更新渲染数据
@@ -40,11 +45,32 @@ export default class ProvinceLayer extends BaseLayer {
     return 'update data';
   }
 
-  protected getdefaultOption(): IProvinceLayerOption {
+  protected getDefaultOption(): IProvinceLayerOption {
-    const config = super.getdefaultOption();
+    const config = super.getDefaultOption();
     return merge({}, config, {
       adcode: ['110000'],
       depth: 2,
+      label: {
+        field: 'NAME_CHN',
+        textAllowOverlap: false,
+      },
+      fill: {
+        field: 'NAME_CHN',
+        values: [
+          '#feedde',
+          '#fdd0a2',
+          '#fdae6b',
+          '#fd8d3c',
+          '#e6550d',
+          '#a63603',
+        ],
+      },
+      popup: {
+        enable: true,
+        Html: (props: any) => {
+          return `<span>${props.NAME_CHN}</span>`;
+        },
+      },
     });
   }
 

stories/District/Layer/drillDown.tsx

@@ -0,0 +1,73 @@
+import { Scene } from '@antv/l7';
+import { DrillDownLayer } from '@antv/l7-district';
+import { GaodeMap, Mapbox } from '@antv/l7-maps';
+import { Cascader } from 'antd';
+import * as React from 'react';
+
+export default class Country extends React.Component {
+  public state = {
+    options: [],
+  };
+  // @ts-ignore
+  private scene: Scene;
+  private drillDown: DrillDownLayer;
+
+  public componentWillUnmount() {
+    this.scene.destroy();
+  }
+
+  public async componentDidMount() {
+    const scene = new Scene({
+      id: 'map',
+      map: new Mapbox({
+        center: [116.2825, 39.9],
+        pitch: 0,
+        style: 'dark',
+        zoom: 3,
+        minZoom: 3,
+        maxZoom: 10,
+      }),
+    });
+    scene.on('loaded', () => {
+      this.scene = scene;
+      this.drillDown = new DrillDownLayer(scene, {
+        data: [],
+        depth: 1,
+        fill: {
+          field: 'NAME_CHN',
+          values: [
+            '#feedde',
+            '#fdd0a2',
+            '#fdae6b',
+            '#fd8d3c',
+            '#e6550d',
+            '#a63603',
+          ],
+        },
+        popup: {
+          enable: true,
+          Html: (props) => {
+            return `<span>${props.NAME_CHN}</span>`;
+          },
+        },
+      });
+    });
+  }
+
+  public render() {
+    return (
+      <>
+        <div
+          id="map"
+          style={{
+            position: 'absolute',
+            top: 0,
+            left: 0,
+            right: 0,
+            bottom: 0,
+          }}
+        />
+      </>
+    );
+  }
+}

stories/District/district.stories.tsx

@@ -7,6 +7,7 @@ import Country2 from './Layer/Country2';
 import CountryCity from './Layer/country_city';
 import CountryCounty from './Layer/country_county';
 import County from './Layer/county';
+import DrillDown from './Layer/drillDown';
 import Province from './Layer/province';
 import World from './Layer/world';
 
@@ -18,4 +19,5 @@ storiesOf('行政区划', module)
   .add('中国地图附图', () => <Country2 />)
   .add('县级地图', () => <County />)
   .add('市级地图', () => <City />)
+  .add('上钻下取', () => <DrillDown />)
   .add('省级地图', () => <Province />);