Merge pull request #417 from antvis/district_attach

chore(district): update china data

docs/api/district/baselayer.zh.md

@@ -41,14 +41,18 @@ order: 2
       数据映射
       - field 填充映射字段
       - values 映射值，同 color 方法第二个参数数组，回调函数
+    - filter 图层过滤方法，支持常量和数据映射 同 layer.filter 方法
+      数据映射 - field 填充映射字段 - values 回调函数 `false` 返回值将会被过滤掉
     - style 同 polygonLayer 的 style 方法
-    - activeColor 鼠标滑过高亮颜色
+    - activeColor 鼠标滑过高亮颜色, `string | boolean` 如果设置为 `false`取消高亮
   - bubble 气泡图
     - enable `boolean` 是否显示气泡 default false
     - color 气泡颜色 支持常量、数据映射
     - size 气泡大小 支持常量、数据映射
     - shape 气泡形状 支持常量、数据映射
     - style 气泡图样式 同 PointLayer
+    - filter 图层过滤方法，支持常量和数据映射 同 layer.filter 方法
+      数据映射 - field 填充映射字段 - values 回调函数 `false` 返回值将会被过滤掉
   - stroke 填充描边颜色 `ProvinceLayer, CityLayer, CountyLayer`
   - strokeWidth 填充描边宽度 `ProvinceLayer, CityLayer, CountyLayer`
   - autoFit 是否自动缩放到图层范围 `boolean`

examples/district/basic/API.zh.md

@@ -19,7 +19,6 @@ import { WorldLayer } from '@antv/l7-district';
   <script src="https://unpkg.com/@antv/l7-district"></script>
 </head>
 ```
-⚠️⚠️⚠️ District 相关配置和接口还在完善中，你可以适用体验，某些配置和接口可能会进行调整
 
 ## 简介
 
@@ -57,13 +56,22 @@ District 支持下面几种图
           数据映射
           - field 填充映射字段
           - values  映射值，同color方法第二个参数数组，回调函数
+      - filter 图层过滤方法，支持常量和数据映射 同layer.filter方法
+          数据映射
+              - field 填充映射字段
+              - values  回调函数 `false` 返回值将会被过滤掉
       - style 同 polygonLayer的style方法
-      - activeColor 鼠标滑过高亮颜色
+      - activeColor 鼠标滑过高亮颜色,  `string | boolean` 如果设置为 `false`取消高亮
+
   - bubble 气泡图
     - enable `boolean` 是否显示气泡  default false
     - color 气泡颜色 支持常量、数据映射
     - size 气泡大小 支持常量、数据映射
     - shape 气泡形状 支持常量、数据映射
+    - filter 图层过滤方法，支持常量和数据映射 同layer.filter方法
+          数据映射
+              - field 填充映射字段
+              - values  回调函数 `false` 返回值将会被过滤掉
     - style 气泡图样式 同 PointLayer
   - stroke 填充描边颜色 `ProvinceLayer, CityLayer, CountyLayer`
   - strokeWidth 填充描边宽度 `ProvinceLayer, CityLayer, CountyLayer`

examples/district/basic/demo/attach_map.js

@@ -0,0 +1,98 @@
+import { Scene } from '@antv/l7';
+import { CountryLayer } from '@antv/l7-district';
+import { Mapbox } from '@antv/l7-maps';
+const scene = new Scene({
+  id: 'map',
+  map: new Mapbox({
+    center: [ 116.2825, 39.9 ],
+    pitch: 0,
+    style: 'blank',
+    zoom: 3,
+    minZoom: 0,
+    maxZoom: 10
+  })
+});
+const attachMapContainer = document.createElement('div');
+attachMapContainer.id = 'attach';
+attachMapContainer.style.cssText = `position: absolute;
+height: 125px;
+width: 98px;
+right: 50px;
+bottom: 20px;
+border: 1px solid #333;`;
+document.getElementById('map').parentElement.append(attachMapContainer);
+
+scene.on('loaded', () => {
+  new CountryLayer(scene, {
+    data: [],
+    joinBy: [ 'NAME_CHN', 'name' ],
+    depth: 1,
+    provinceStroke: '#783D2D',
+    cityStroke: '#EBCCB4',
+    cityStrokeWidth: 1,
+    label: {
+      enable: false
+    },
+    fill: {
+      color: {
+        field: 'NAME_CHN',
+        values: [
+          '#feedde',
+          '#fdd0a2',
+          '#fdae6b',
+          '#fd8d3c',
+          '#e6550d',
+          '#a63603'
+        ]
+      }
+    },
+    popup: {
+      enable: true,
+      Html: props => {
+        return `<span>${props.NAME_CHN}</span>`;
+      }
+    }
+  });
+});
+
+// 添加附图，附图需要和主图保持一致
+
+const scene2 = new Scene({
+  id: 'attach',
+  logoVisible: false,
+  map: new Mapbox({
+    center: [ 113.60540108435657, 12.833692637803168 ],
+    pitch: 0,
+    style: 'blank',
+    zoom: 1.93,
+    minZoom: 0,
+    maxZoom: 3,
+    interactive: false
+  })
+});
+scene2.on('loaded', () => {
+  new CountryLayer(scene2, {
+    data: [],
+    label: {
+      enable: false
+    },
+    popup: {
+      enable: false
+    },
+    autoFit: false,
+    depth: 1,
+    fill: {
+      color: {
+        field: 'NAME_CHN',
+        values: [
+          '#feedde',
+          '#fdd0a2',
+          '#fdae6b',
+          '#fd8d3c',
+          '#e6550d',
+          '#a63603'
+        ]
+      }
+    }
+  });
+});

examples/district/basic/demo/hainan.js

@@ -0,0 +1,106 @@
+import { Scene } from '@antv/l7';
+import { ProvinceLayer, CountryLayer } from '@antv/l7-district';
+import { Mapbox } from '@antv/l7-maps';
+async function initMap() {
+  const scene = new Scene({
+    id: 'map',
+    map: new Mapbox({
+      center: [ 109.803, 19.347 ],
+      pitch: 0,
+      style: 'blank',
+      zoom: 7,
+      minZoom: 6,
+      maxZoom: 11
+    })
+  });
+  const attachMapContainer = document.createElement('div');
+  attachMapContainer.id = 'attach';
+  attachMapContainer.style.cssText = `position: absolute;
+  height: 125px;
+  width: 98px;
+  right: 50px;
+  bottom: 20px;
+  border: 1px solid #333;`;
+  document.getElementById('map').parentElement.append(attachMapContainer);
+  scene.on('loaded', () => {
+    new ProvinceLayer(scene, {
+      data: [],
+      geoDataLevel: 1,
+      autoFit: false,
+      joinBy: [ 'adcode', 'code' ],
+      adcode: [ '460000' ],
+      depth: 2,
+      stroke: '#aaa',
+      label: {
+        enable: false,
+        field: 'NAME_CHN',
+        textAllowOverlap: false
+      },
+      fill: {
+        color: '#A3d7FF'
+      },
+      popup: {
+        enable: false,
+        Html: props => {
+          return `<span>${props.NAME_CHN}:</span><span>${props.pop}</span>`;
+        }
+      }
+    });
+  });
+
+  const scene2 = new Scene({
+    id: 'attach',
+    logoVisible: false,
+    map: new Mapbox({
+      center: [ 113.60540108435657, 12.833692637803168 ],
+      pitch: 0,
+      style: 'blank',
+      zoom: 1.93,
+      // zoom: 3,
+      minZoom: 0,
+      maxZoom: 3,
+      interactive: false
+    })
+  });
+  scene2.on('loaded', () => {
+    new CountryLayer(scene2, {
+      data: [],
+      label: {
+        enable: false
+      },
+      popup: {
+        enable: false
+      },
+      autoFit: false,
+      provinceStroke: '#aaa',
+      depth: 1,
+      fill: {
+        color: '#A3d7FF'
+      }
+    });
+    new ProvinceLayer(scene2, {
+      data: [],
+      autoFit: false,
+      adcode: [ '460000' ],
+      depth: 2,
+      zIndex: 2,
+      stroke: '#aaa',
+      strokeWidth: 0.1,
+      label: {
+        enable: false,
+        field: 'NAME_CHN',
+        textAllowOverlap: false
+      },
+      fill: {
+        color: '#A3d7ff'
+      },
+      popup: {
+        enable: false,
+        Html: props => {
+          return `<span>${props.NAME_CHN}:</span><span>${props.pop}</span>`;
+        }
+      }
+    });
+  });
+}
+initMap();

examples/district/basic/demo/meta.json

@@ -28,6 +28,16 @@
       "filename": "county.js",
       "title": "中国县地图",
       "screenshot": "https://gw.alipayobjects.com/mdn/rms_8e1672/afts/img/A*iVwLSpIf_ckAAAAAAAAAAABkARQnAQ"
+    },
+    {
+      "filename": "attach_map.js",
+      "title": "中国地图附图",
+      "screenshot": "https://gw.alipayobjects.com/mdn/rms_855bab/afts/img/A*bGX-Tbw5uVAAAAAAAAAAAABkARQnAQ"
+    },
+    {
+      "filename": "hainan.js",
+      "title": "海南省地图",
+      "screenshot": "https://gw.alipayobjects.com/mdn/rms_855bab/afts/img/A*nHOTQ61hFbYAAAAAAAAAAABkARQnAQ"
     }
   ]
 }

examples/district/react/demo/province.tsx

@@ -217,7 +217,7 @@ class Province extends React.Component {
       const { province } = this.state;
       this.provinceLayer = new ProvinceLayer(scene, {
         adcode: ['230000'],
-        depth: 3,
+        depth: 1,
         label: {
           field: 'NAME_CHN',
           textAllowOverlap: false,

packages/boundry/src/config.ts

@@ -127,12 +127,12 @@ const dataLevel1: { [key: string]: any } = {
     fill: {
       type: 'pbf',
       url:
-        'https://gw.alipayobjects.com/os/bmw-prod/56cb34eb-cf61-4512-a6f3-fe4a45a7b1a3.bin',
+        'https://gw.alipayobjects.com/os/bmw-prod/35bb8365-1926-471c-b357-db2c02ff3a81.bin',
     },
     line: {
       type: 'pbf',
       url:
-        '//gw.alipayobjects.com/os/bmw-prod/76914518-e04c-42c9-8c4b-1ae71aabb024.bin',
+        'https://gw.alipayobjects.com/os/bmw-prod/8ec671c3-a4f9-4fdf-8e88-85d2ab1d8930.bin',
     },
     label: {
       type: 'pbf',
@@ -154,7 +154,7 @@ const dataLevel1: { [key: string]: any } = {
         fill: {
           type: 'pbf',
           url:
-            'https://gw.alipayobjects.com/os/bmw-prod/1d03a9af-1df4-407f-8bae-3638a1e0ad65.bin',
+            'https://gw.alipayobjects.com/os/bmw-prod/380370e0-76aa-4240-8874-5732de77e71d.bin',
         },
         line: {
           type: 'pbf',
@@ -176,7 +176,7 @@ const dataLevel1: { [key: string]: any } = {
         fill: {
           type: 'pbf',
           url:
-            '//gw.alipayobjects.com/os/bmw-prod/561e2cfe-9460-42d1-a2f8-3fd2e1274c52.bin',
+            'https://gw.alipayobjects.com/os/bmw-prod/feeb1f06-11c6-4495-84c9-f41ea6f77123.bin',
         },
         line: {
           type: 'pbf',
@@ -198,7 +198,7 @@ const dataLevel1: { [key: string]: any } = {
         fill: {
           type: 'pbf',
           url:
-            '//gw.alipayobjects.com/os/bmw-prod/516b2703-d692-44e6-80dd-b3f5df0186e7.bin',
+            'https://gw.alipayobjects.com/os/bmw-prod/24a9ee83-2be1-4fc1-b187-769ac939269d.bin',
         },
         line: {
           type: 'pbf',

packages/boundry/src/layer/drillDown.ts

@@ -184,7 +184,7 @@ export default class DrillDownLayer {
   }
 
   private getLayerOption(type: 'province' | 'city' | 'county') {
-    const { joinBy, label, bubble, fill, popup, province } = this.options;
+    const { joinBy, label, bubble, fill, popup, geoDataLevel } = this.options;
     const datatype = (type + 'Data') as
       | 'provinceData'
       | 'cityData'
@@ -196,6 +196,7 @@ export default class DrillDownLayer {
       bubble,
       fill,
       popup,
+      geoDataLevel,
       ...this.options[type],
     };
   }

packages/boundry/src/layer/interface.ts

@@ -110,6 +110,7 @@ interface IDrawOption {
 }
 export interface IDrillDownOption {
   drillDepth: 0 | 1 | 2;
+  geoDataLevel: 1 | 2;
   customTrigger: boolean;
   drillDownTriggerEvent: TriggeEventType;
   drillUpTriggerEvent: TriggeEventType & DrillUpTriggeEventType;

stories/District/Layer/Country.tsx

@@ -199,6 +199,7 @@ export default class Country extends React.Component {
       const Layer = new CountryLayer(scene, {
         visible: true,
         data: ProvinceData,
+        geoDataLevel: 1,
         joinBy: ['NAME_CHN', 'name'],
         // label: {
         //   field: 'NAME_CHN',

stories/District/Layer/drillDown.tsx

@@ -31,6 +31,7 @@ export default class Country extends React.Component {
       this.scene = scene;
       this.drillDown = new DrillDownLayer(scene, {
         drillDepth: 2,
+        geoDataLevel: 2,
         fill: {
           color: {
             field: 'NAME_CHN',