Merge pull request #378 from antvis/District

District
2020-05-20 10:19:49 +08:00 · 2020-05-20 10:19:49 +08:00 · 2ef32575ed
parent 33e06ab905 9dce2c63c2
commit 2ef32575ed
16 changed files with 593 additions and 143 deletions
--- a/.eslintrc
+++ b/.eslintrc
@ -18,15 +18,6 @@
    "html"
  ],
  "rules": {
-    "no-console": [
-      "warn",
-      {
-        "allow": [
-          "warn",
-          "error"
-        ]
-      }
-    ],
    "no-bitwise": [
      0
    ],
@ -42,7 +33,7 @@
      0
    ],
    "indent": ["error", 2, {
-      "ignoredNodes": ["TemplateLiteral"]
-    }]
+    "ignoredNodes": ["TemplateLiteral"]
+  }]
  }
 }
--- a/docs/api/district/baselayer.zh.md
+++ b/docs/api/district/baselayer.zh.md
@ -0,0 +1,102 @@
+---
+title: 标准地图
+order: 2
+---
+
+## 构造函数
+
+参数：
+
+- scene L7 scene 对象
+- option 行政区划配置项
+
+  - zIndex 图层绘制顺序
+  - data `Array` 属性数据用于可视化渲染
+  - joinBy 数据关联，属性数据如何内部空间数据关联绑定 目前支持 NAME_CHN,adcode 字段连接
+    对照表 `Array [string, string]` 第一个值为空间数据字段，第二个为传入数据字段名
+  - depth 数据显示层级 0：国家级，1:省级，2: 市级，3：线级
+  - label 标注配置项 支持常量，不支持数据映射
+    - enable `boolean` 是否显示标注
+    - color 标注字体颜色 常量
+    - field 标注字段 常量
+    - size 标注大小 常量
+    - stroke 文字描边颜色
+    - strokeWidth 文字描边宽度
+    - textAllowOverlap 是否允许文字压盖
+    - opacity 标注透明度
+  - fill 填充配置项 支持数据映射
+    - color 图层填充颜色，支持常量和数据映射
+      常量：统一设置成一样的颜色
+      数据映射
+      - field 填充映射字段
+      - values 映射值，同 color 方法第二个参数数组，回调函数
+    - style 同 polygonLayer 的 style 方法
+    - activeColor 鼠标滑过高亮颜色
+  - bubble 气泡图
+    - enable `boolean` 是否显示气泡 default false
+    - color 气泡颜色 支持常量、数据映射
+    - size 气泡大小 支持常量、数据映射
+    - shape 气泡形状 支持常量、数据映射
+    - style 气泡图样式 同 PointLayer
+  - stroke 填充描边颜色
+  - strokeWidth 填充描边宽度
+  - autoFit 是否自动缩放到图层范围 `boolean`
+  - popup 信息窗口
+
+    - enable 是否开启 `boolean`
+    - triggerEvent 触发事件 例如 'mousemove' | 'click';
+    - Html popup html 字符串，支持回调函数 (properties: any) => string;
+
+  - chinaNationalStroke 中国国界线颜色
+  - chinaNationalWidth 中国国界线宽度
+  - coastlineStroke 海岸线颜色
+  - coastlineWidth 海岸线宽度 `WorldLayer` `CountryLayer`
+  - nationalWidth 国界线 `WorldLayer` `CountryLayer`
+  - nationalStroke 国界线 `WorldLayer` `CountryLayer`
+  - provinceStroke 省界颜色 `CountryLayer`
+  - provinceStrokeWidth 省界宽度 `CountryLayer`
+  - cityStroke 市级边界颜色 `CountryLayer`
+  - cityStrokeWidth 市级边界宽度 `CountryLayer`
+  - countyStroke 县级边界颜色 `CountryLayer`
+  - countyStrokeWidth 县级边界宽度 `CountryLayer`
+
+### 数据
+
+District 提供 polygon 数据需要跟用户的属性数据，通过关系字段进行连接
+
+- [国家名称对照表](https://gw.alipayobjects.com/os/bmw-prod/b6fcd072-72a7-4875-8e05-9652ffc977d9.csv)
+
+- [省级行政名称*adcode*对照表.csv](https://gw.alipayobjects.com/os/bmw-prod/2aa6fb7b-3694-4df3-b601-6f6f9adac496.csv)
+
+- [市级行政区划及编码](https://gw.alipayobjects.com/os/bmw-prod/d2aefd78-f5df-486f-9310-7449cc7f5569.csv)
+
+- [县级行政区名称级编码](https://gw.alipayobjects.com/os/bmw-prod/fafd299e-0e1e-4fa2-a8ac-10a984c6e983.csv)
+
+### 属性
+
+行政区划组件每个图层有多个子图层组成，如标注层，国界线、省界线等等，
+
+#### fillLayer
+
+### 方法
+
+#### updateData(data, joinBy)
+
+更新显示数据，
+
+参数：
+
+- data 需要更新的数据
+- joinBy 关联字段 可选，如果不设置保持和初始化一致。
+
+#### show
+
+显示图层
+
+#### hide
+
+图层隐藏不显示
+
+#### destroy
+
+移除并销毁图层
--- a/docs/api/district/drilldown.zh.md
+++ b/docs/api/district/drilldown.zh.md
@ -43,9 +43,9 @@ DrillDownLayer 提供默认提供通过 Layer 的交互事件，实现上钻下
 下钻各个层级的配置项，可以独立配置，每一层级的样式，不设置和上一层就保持一致

 - joinBy: [string, string];
- label: Partial<ILabelOption>;
- bubble: Partial<IBubbleOption>;
- fill: Partial<IFillOptions>;
+- label: `Partial<ILabelOption>`;
+- bubble: `Partial<IBubbleOption>`;
+- fill: `Partial<IFillOptions>`;

 #### labelOption

--- a/docs/api/district/province.zh.md
+++ b/docs/api/district/province.zh.md
--- a/docs/api/district/start.en.md
+++ b/docs/api/district/start.en.md
@ -0,0 +1,171 @@
+---
+title: 快速开始
+order: 0
+---
+
+地图行政区划组件，支持世界地图，中国地图省市县三级，支持中国地图省市县上钻下取。
+
+## 使用
+
+**using modules**
+
+```javascript
+import { WorldLayer } from '@antv/l7-district';
+```
+
+**CDN 版本引用**
+
+CDN 引用所有的方法都在 L7.District 命名空间下。
+
+```html
+<head>
+  <! --引入最新版的L7-District -->
+  <script src="https://unpkg.com/@antv/l7-district"></script>
+</head>
+```
+
+```javascript
+import { WorldLayer } from '@antv/l7-district';
+/**
+ * L7.District.WorldLayer()// CDN 引用
+ * */
+new WorldLayer(scene, {
+  data: [],
+  fill: {
+    color: {
+      field: 'NAME_CHN',
+      values: [
+        '#feedde',
+        '#fdd0a2',
+        '#fdae6b',
+        '#fd8d3c',
+        '#e6550d',
+        '#a63603',
+      ],
+    },
+  },
+  stroke: '#ccc',
+  label: {
+    enable: true,
+    textAllowOverlap: false,
+    field: 'Short_Name_ZH',
+  },
+  popup: {
+    enable: false,
+    Html: (props) => {
+      return `<span>${props.Short_Name_ZH}</span>`;
+    },
+  },
+});
+```
+
+⚠️⚠️⚠️ District 相关配置和接口还在完善中，你可以适用体验，某些配置和接口可能会进行调整
+
+## 简介
+
+District 支持下面几种图
+
+- WorldLayer 世界地图
+- CountryLayer 国家地图，目前只支持中国
+- ProvinceLayer 省级地图
+- CityLayer 市级地图
+- CountyLayer 县级地图
+- DrillDownLayer 上钻下取地图
+
+## 构造函数
+
+参数：
+
+- scene L7 scene 对象
+- option 行政区划配置项
+
+  - zIndex 图层绘制顺序
+  - data `Array` 属性数据用于可视化渲染
+  - joinBy 数据关联，属性数据如何内部空间数据关联绑定 目前支持 NAME_CHN,adcode 字段连接
+    对照表 `Array [string, string]` 第一个值为空间数据字段，第二个为传入数据字段名
+  - depth 数据显示层级 0：国家级，1:省级，2: 市级，3：线级
+  - label 标注配置项 支持常量，不支持数据映射
+    - enable `boolean` 是否显示标注
+    - color 标注字体颜色 常量
+    - field 标注字段 常量
+    - size 标注大小 常量
+    - stroke 文字描边颜色
+    - strokeWidth 文字描边宽度
+    - textAllowOverlap 是否允许文字压盖
+    - opacity 标注透明度
+  - fill 填充配置项 支持数据映射
+    - color 图层填充颜色，支持常量和数据映射
+      常量：统一设置成一样的颜色
+      数据映射
+      - field 填充映射字段
+      - values 映射值，同 color 方法第二个参数数组，回调函数
+    - style 同 polygonLayer 的 style 方法
+    - activeColor 鼠标滑过高亮颜色
+  - bubble 气泡图
+    - enable `boolean` 是否显示气泡 default false
+    - color 气泡颜色 支持常量、数据映射
+    - size 气泡大小 支持常量、数据映射
+    - shape 气泡形状 支持常量、数据映射
+    - style 气泡图样式 同 PointLayer
+  - stroke 填充描边颜色
+  - strokeWidth 填充描边宽度
+  - autoFit 是否自动缩放到图层范围 `boolean`
+  - popup 信息窗口
+
+    - enable 是否开启 `boolean`
+    - triggerEvent 触发事件 例如 'mousemove' | 'click';
+    - Html popup html 字符串，支持回调函数 (properties: any) => string;
+
+  - chinaNationalStroke 中国国界线颜色
+  - chinaNationalWidth 中国国界线宽度
+  - coastlineStroke 海岸线颜色
+  - coastlineWidth 海岸线宽度 `WorldLayer` `CountryLayer`
+  - nationalWidth 国界线 `WorldLayer` `CountryLayer`
+  - nationalStroke 国界线 `WorldLayer` `CountryLayer`
+  - provinceStroke 省界颜色 `CountryLayer`
+  - provinceStrokeWidth 省界宽度 `CountryLayer`
+  - cityStroke 市级边界颜色 `CountryLayer`
+  - cityStrokeWidth 市级边界宽度 `CountryLayer`
+  - countyStroke 县级边界颜色 `CountryLayer`
+  - countyStrokeWidth 县级边界宽度 `CountryLayer`
+
+### 数据
+
+District 提供 polygon 数据需要跟用户的属性数据，通过关系字段进行连接
+
+- [国家名称对照表](https://gw.alipayobjects.com/os/bmw-prod/b6fcd072-72a7-4875-8e05-9652ffc977d9.csv)
+
+- [省级行政名称*adcode*对照表.csv](https://gw.alipayobjects.com/os/bmw-prod/2aa6fb7b-3694-4df3-b601-6f6f9adac496.csv)
+
+- [市级行政区划及编码](https://gw.alipayobjects.com/os/bmw-prod/d2aefd78-f5df-486f-9310-7449cc7f5569.csv)
+
+- [县级行政区名称级编码](https://gw.alipayobjects.com/os/bmw-prod/fafd299e-0e1e-4fa2-a8ac-10a984c6e983.csv)
+
+### 属性
+
+行政区划组件每个图层有多个子图层组成，如标注层，国界线、省界线等等，
+
+#### fillLayer
+
+### 方法
+
+#### updateData(data, joinBy)
+
+更新显示数据，
+
+参数：
+
+- data 需要更新的数据
+- joinBy 关联字段 可选，如果不设置保持和初始化一致。
+
+#### show
+
+显示图层
+
+#### hide
+
+图层隐藏不显示
+
+#### destroy
+
+移除并销毁图层
--- a/docs/api/district/start.zh.md
+++ b/docs/api/district/start.zh.md
@ -24,74 +24,6 @@ import { WorldLayer } from '@antv/l7-district';

 ⚠️⚠️⚠️ District 相关配置和接口还在完善中，你可以适用体验，某些配置和接口可能会进行调整

-## 简介
-
-District 支持下面几种图
-
- WorldLayer 世界地图
- CountryLayer 国家地图，目前只支持中国
- ProvinceLayer 省级地图
- CityLayer 市级地图
- CountyLayer 县级地图
- DrillDownLayer 上钻下取地图
-
-## 构造函数
-
-参数：
-
- scene L7 scene 对象
- option 行政区划配置项
-
-  - zIndex 图层绘制顺序
-  - data `Array` 属性数据用于可视化渲染
-  - joinBy 数据关联，属性数据如何内部空间数据关联绑定 目前支持 NAME_CHN,adcode 字段连接
-    对照表 `Array [string, string]` 第一个值为空间数据字段，第二个为传入数据字段名
-  - depth 数据显示层级 0：国家级，1:省级，2: 市级，3：线级
-  - label 标注配置项 支持常量，不支持数据映射
-    - enable `boolean` 是否显示标注
-    - color 标注字体颜色 常量
-    - field 标注字段 常量
-    - size 标注大小 常量
-    - stroke 文字描边颜色
-    - strokeWidth 文字描边宽度
-    - textAllowOverlap 是否允许文字压盖
-    - opacity 标注透明度
-  - fill 填充配置项 支持数据映射
-    - color 图层填充颜色，支持常量和数据映射
-      常量：统一设置成一样的颜色
-      数据映射
-      - field 填充映射字段
-      - values 映射值，同 color 方法第二个参数数组，回调函数
-    - style 同 polygonLayer 的 style 方法
-    - activeColor 鼠标滑过高亮颜色
-  - bubble 气泡图
-    - enable `boolean` 是否显示气泡 default false
-    - color 气泡颜色 支持常量、数据映射
-    - size 气泡大小 支持常量、数据映射
-    - shape 气泡形状 支持常量、数据映射
-    - style 气泡图样式 同 PointLayer
-  - stroke 填充描边颜色
-  - strokeWidth 填充描边宽度
-  - autoFit 是否自动缩放到图层范围 `boolean`
-  - popup 信息窗口
-
-    - enable 是否开启 `boolean`
-    - triggerEvent 触发事件 例如 'mousemove' | 'click';
-    - Html popup html 字符串，支持回调函数 (properties: any) => string;
-
-  - chinaNationalStroke 中国国界线颜色
-  - chinaNationalWidth 中国国界线宽度
-  - coastlineStroke 海岸线颜色
-  - coastlineWidth 海岸线宽度 `WorldLayer` `CountryLayer`
-  - nationalWidth 国界线 `WorldLayer` `CountryLayer`
-  - nationalStroke 国界线 `WorldLayer` `CountryLayer`
-  - provinceStroke 省界颜色 `CountryLayer`
-  - provinceStrokeWidth 省界宽度 `CountryLayer`
-  - cityStroke 市级边界颜色 `CountryLayer`
-  - cityStrokeWidth 市级边界宽度 `CountryLayer`
-  - countyStroke 县级边界颜色 `CountryLayer`
-  - countyStrokeWidth 县级边界宽度 `CountryLayer`
-
 ### 数据

 District 提供 polygon 数据需要跟用户的属性数据，通过关系字段进行连接
@ -103,32 +35,3 @@ District 提供 polygon 数据需要跟用户的属性数据，通过关系字
 - [市级行政区划及编码](https://gw.alipayobjects.com/os/bmw-prod/d2aefd78-f5df-486f-9310-7449cc7f5569.csv)

 - [县级行政区名称级编码](https://gw.alipayobjects.com/os/bmw-prod/fafd299e-0e1e-4fa2-a8ac-10a984c6e983.csv)
-
-### 属性
-
-行政区划组件每个图层有多个子图层组成，如标注层，国界线、省界线等等，
-
-#### fillLayer
-
-### 方法
-
-#### updateData(data, joinBy)
-
-更新显示数据，
-
-参数：
-
- data 需要更新的数据
- joinBy 关联字段 可选，如果不设置保持和初始化一致。
-
-#### show
-
-显示图层
-
-#### hide
-
-图层隐藏不显示
-
-#### destroy
-
-移除并销毁图层
--- a/docs/api/district/world
+++ b/docs/api/district/world
--- a/examples/district/basic/API.en.md
+++ b/examples/district/basic/API.en.md
@ -0,0 +1,123 @@
+---
+title: API
+---
+地图行政区划组件，支持世界地图，中国地图省市县三级，支持中国地图省市县上钻下取。
+
+## 使用
+
+**using modules**
+
+```javascript
+import { WorldLayer } from '@antv/l7-district';
+```
+
+**CDN 版本引用**
+
+```html
+<head>
+  <! --引入最新版的L7-District -->
+  <script src="https://unpkg.com/@antv/l7-district"></script>
+</head>
+```
+⚠️⚠️⚠️ District 相关配置和接口还在完善中，你可以适用体验，某些配置和接口可能会进行调整
+
+## 简介
+
+District 支持下面几种图
+
+- WorldLayer 世界地图
+- CountryLayer 国家地图，目前只支持中国
+- ProvinceLayer 省级地图
+- CityLayer 市级地图
+- CountyLayer 县级地图
+- DrillDownLayer 上钻下取地图
+
+
+## 构造函数
+参数：
+- scene L7 scene 对象
+- option 行政区划配置项
+  - zIndex 图层绘制顺序
+  - data `Array` 属性数据用于可视化渲染
+  - joinBy 数据关联，属性数据如何内部空间数据关联绑定 目前支持 NAME_CHN,adcode 字段连接
+    对照表 `Array [string, string]` 第一个值为空间数据字段，第二个为传入数据字段名
+  - depth 数据显示层级 0：国家级，1:省级，2: 市级，3：线级
+  - label 标注配置项 支持常量，不支持数据映射
+      - enable `boolean` 是否显示标注
+      - color 标注字体颜色 常量
+      - field 标注字段 常量
+      - size 标注大小 常量
+      - stroke 文字描边颜色
+      - strokeWidth 文字描边宽度
+      - textAllowOverlap 是否允许文字压盖
+      - opacity 标注透明度
+  - fill 填充配置项 支持数据映射
+      - color 图层填充颜色，支持常量和数据映射
+          常量：统一设置成一样的颜色
+          数据映射
+          - field 填充映射字段
+          - values  映射值，同color方法第二个参数数组，回调函数
+      - style 同 polygonLayer的style方法
+      - activeColor 鼠标滑过高亮颜色
+  - bubble 气泡图
+    - enable `boolean` 是否显示气泡  default false
+    - color 气泡颜色 支持常量、数据映射
+    - size 气泡大小 支持常量、数据映射
+    - shape 气泡形状 支持常量、数据映射
+    - style 气泡图样式 同 PointLayer
+  - stroke 填充描边颜色 
+  - strokeWidth 填充描边宽度
+  - autoFit 是否自动缩放到图层范围 `boolean`
+  - popup 信息窗口
+      - enable 是否开启 `boolean`
+      - triggerEvent 触发事件 例如 'mousemove' | 'click';
+      - Html popup html字符串，支持回调函数  (properties: any) => string;
+
+  - chinaNationalStroke 中国国界线颜色
+  - chinaNationalWidth 中国国界线宽度
+  - coastlineStroke 海岸线颜色
+  - coastlineWidth 海岸线宽度 `WorldLayer` `CountryLayer`
+  - nationalWidth 国界线 `WorldLayer` `CountryLayer`
+  - nationalStroke 国界线 `WorldLayer` `CountryLayer`
+  - provinceStroke 省界颜色 `CountryLayer`
+  - provinceStrokeWidth 省界宽度 `CountryLayer`
+  - cityStroke 市级边界颜色 `CountryLayer`
+  - cityStrokeWidth 市级边界宽度 `CountryLayer`
+  - countyStroke 县级边界颜色 `CountryLayer`
+  - countyStrokeWidth 县级边界宽度  `CountryLayer`
+
+### 数据
+District 提供polygon数据需要跟用户的属性数据，通过关系字段进行连接
+  - [国家名称对照表](https://gw.alipayobjects.com/os/bmw-prod/b6fcd072-72a7-4875-8e05-9652ffc977d9.csv)
+  
+  - [省级行政名称_adcode_对照表.csv](https://gw.alipayobjects.com/os/bmw-prod/2aa6fb7b-3694-4df3-b601-6f6f9adac496.csv)
+  
+  - [市级行政区划及编码](https://gw.alipayobjects.com/os/bmw-prod/d2aefd78-f5df-486f-9310-7449cc7f5569.csv)
+
+  - [县级行政区名称级编码](https://gw.alipayobjects.com/os/bmw-prod/fafd299e-0e1e-4fa2-a8ac-10a984c6e983.csv)
+### 属性
+  
+  行政区划组件每个图层有多个子图层组成，如标注层，国界线、省界线等等，
+  
+  #### fillLayer
+
+### 方法
+
+#### updateData(data, joinBy)
+更新显示数据，
+
+参数：
+- data 需要更新的数据
+- joinBy 关联字段 可选，如果不设置保持和初始化一致。
+
+#### show
+
+显示图层
+
+#### hide
+图层隐藏不显示
+
+#### destroy
+
+移除并销毁图层
+
--- a/examples/district/basic/demo/china_map_2.js
+++ b/examples/district/basic/demo/china_map_2.js
@ -192,7 +192,7 @@ scene.on('loaded', () => {
    depth: 1,
    fill: {
      color: {
-        field: 'value',
+        field: 'NAME_CHN',
        values: [
          '#feedde',
          '#fdd0a2',
--- a/examples/district/basic/demo/meta.json
+++ b/examples/district/basic/demo/meta.json
@ -5,7 +5,7 @@
  },
  "demos": [
    {
-      "filename": "china_map.js",
+      "filename": "china_map_2.js",
      "title": "中国地图",
      "screenshot": "https://gw.alipayobjects.com/mdn/rms_8e1672/afts/img/A*tClNQoAo5isAAAAAAAAAAABkARQnAQ"
    },
--- a/examples/district/bubble/API.en.md
+++ b/examples/district/bubble/API.en.md
@ -0,0 +1,117 @@
+---
+title: API
+---
+地图行政区划组件，支持世界地图，中国地图省市县三级，支持中国地图省市县上钻下取。
+
+## 使用
+
+**using modules**
+
+```javascript
+import { WorldLayer } from '@antv/l7-district';
+```
+
+**CDN 版本引用**
+
+```html
+<head>
+  <! --引入最新版的L7-District -->
+  <script src="https://unpkg.com/@antv/l7-district"></script>
+</head>
+```
+⚠️⚠️⚠️ District 相关配置和接口还在完善中，你可以适用体验，某些配置和接口可能会进行调整
+
+## 简介
+
+District 支持下面几种图
+
+- WorldLayer 世界地图
+- CountryLayer 国家地图，目前只支持中国
+- ProvinceLayer 省级地图
+- CityLayer 市级地图
+- CountyLayer 县级地图
+- DrillDownLayer 上钻下取地图
+
+
+## 构造函数
+参数：
+- scene L7 scene 对象
+- option 行政区划配置项
+  - zIndex 图层绘制顺序
+  - data `Array` 属性数据用于可视化渲染
+  - joinBy 数据关联，属性数据如何内部空间数据关联绑定 目前支持 NAME_CHN,adcode 字段连接
+    对照表 
+  - depth 数据显示层级 0：国家级，1:省级，2: 市级，3：线级
+  - label 标注配置项 支持常量，不支持数据映射
+      - enable `boolean` 是否显示标注
+      - color 标注字体颜色 常量
+      - field 标注字段 常量
+      - size 标注大小 常量
+      - stroke 文字描边颜色
+      - strokeWidth 文字描边宽度
+      - textAllowOverlap 是否允许文字压盖
+      - opacity 标注透明度
+  - fill 填充配置项 支持数据映射
+      - color 图层填充颜色，支持常量和数据映射
+          常量：统一设置成一样的颜色
+          数据映射
+          - field 填充映射字段
+          - values  映射值，同color方法第二个参数数组，回调函数
+      - style 同 polygonLayer的style方法
+      - activeColor 鼠标滑过高亮颜色
+  - stroke 填充描边颜色 
+  - strokeWidth 填充描边宽度
+  - autoFit 是否自动缩放到图层范围 `boolean`
+  - popup 信息窗口
+      - enable 是否开启 `boolean`
+      - triggerEvent 触发事件 例如 'mousemove' | 'click';
+      - Html popup html字符串，支持回调函数  (properties: any) => string;
+
+  - chinaNationalStroke 中国国界线颜色
+  - chinaNationalWidth 中国国界线宽度
+  - coastlineStroke 海岸线颜色
+  - coastlineWidth 海岸线宽度 `WorldLayer` `CountryLayer`
+  - nationalWidth 国界线 `WorldLayer` `CountryLayer`
+  - nationalStroke 国界线 `WorldLayer` `CountryLayer`
+  - provinceStroke 省界颜色 `CountryLayer`
+  - provinceStrokeWidth 省界宽度 `CountryLayer`
+  - cityStroke 市级边界颜色 `CountryLayer`
+  - cityStrokeWidth 市级边界宽度 `CountryLayer`
+  - countyStroke 县级边界颜色 `CountryLayer`
+  - countyStrokeWidth 县级边界宽度  `CountryLayer`
+
+### 数据
+District 提供polygon数据需要跟用户的属性数据，通过关系字段进行连接
+  - [国家名称对照表](https://gw.alipayobjects.com/os/bmw-prod/b6fcd072-72a7-4875-8e05-9652ffc977d9.csv)
+  
+  - [省级行政名称_adcode_对照表.csv](https://gw.alipayobjects.com/os/bmw-prod/2aa6fb7b-3694-4df3-b601-6f6f9adac496.csv)
+  
+  - [市级行政区划及编码](https://gw.alipayobjects.com/os/bmw-prod/d2aefd78-f5df-486f-9310-7449cc7f5569.csv)
+
+  - [县级行政区名称级编码](https://gw.alipayobjects.com/os/bmw-prod/fafd299e-0e1e-4fa2-a8ac-10a984c6e983.csv)
+### 属性
+  
+  行政区划组件每个图层有多个子图层组成，如标注层，国界线、省界线等等，
+  
+  #### fillLayer
+
+### 方法
+
+#### updateData(data, joinBy)
+更新显示数据，
+
+参数：
+- data 需要更新的数据
+- joinBy 关联字段 可选，如果不设置保持和初始化一致。
+
+#### show
+
+显示图层
+
+#### hide
+图层隐藏不显示
+
+#### destroy
+
+移除并销毁图层
+
--- a/package.json
+++ b/package.json
@ -37,6 +37,7 @@
    "@types/storybook__react": "^4.0.2",
    "@types/supercluster": "^5.0.1",
    "awesome-typescript-loader": "^5.2.1",
+    "babel-eslint": "8.2.5",
    "babel-jest": "^24.9.0",
    "babel-loader": "^8.0.6",
    "babel-plugin-const-enum": "^0.0.2",
@ -116,7 +117,7 @@
    "tslint": "^5.11.0",
    "tslint-config-prettier": "^1.15.0",
    "tslint-plugin-prettier": "^1.3.0",
-    "tslint-react": "^5.0.0",
+    "tslint-react": "4.1.0",
    "typescript": "^3.7.0-beta",
    "webpack": "^4.17.1",
    "webpack-cli": "^3.1.0",
--- a/packages/district/src/layer/drillDown.ts
+++ b/packages/district/src/layer/drillDown.ts
@ -48,7 +48,7 @@ export default class DrillDownLayer {
      drillDepth: 2,
      customTrigger: false,
      drillDownTriggerEvent: 'click',
-      drillUpTriggerEvent: 'unclick',
+      drillUpTriggerEvent: 'undblclick',
      provinceData: [],
      cityData: [],
      countyData: [],
@ -61,7 +61,7 @@ export default class DrillDownLayer {
    };
  }
  public addCountryEvent() {
-    const { drillDownTriggerEvent, drillUpTriggleEvent } = this.options;
+    const { drillDownTriggerEvent } = this.options;
    this.provinceLayer.fillLayer.on(
      drillDownTriggerEvent as string,
      (e: any) => {
@ -72,8 +72,8 @@ export default class DrillDownLayer {
  }

  public addProvinceEvent() {
-    const { drillDownTriggerEvent, drillUpTriggleEvent } = this.options;
-    this.cityLayer.fillLayer.on(drillUpTriggleEvent as string, () => {
+    const { drillDownTriggerEvent, drillUpTriggerEvent } = this.options;
+    this.cityLayer.fillLayer.on(drillUpTriggerEvent as string, () => {
      this.drillUp();
    });
    this.cityLayer.fillLayer.on(drillDownTriggerEvent as string, (e: any) => {
@ -82,8 +82,8 @@ export default class DrillDownLayer {
  }

  public addCityEvent() {
-    const { drillDownTriggerEvent, drillUpTriggleEvent } = this.options;
-    this.countyLayer.fillLayer.on(drillUpTriggleEvent as string, () => {
+    const { drillDownTriggerEvent, drillUpTriggerEvent } = this.options;
+    this.countyLayer.fillLayer.on(drillUpTriggerEvent as string, () => {
      this.drillUp();
    });
  }
--- a/packages/district/src/layer/interface.ts
+++ b/packages/district/src/layer/interface.ts
@ -107,7 +107,7 @@ export interface IDrillDownOption {
  drillDepth: 0 | 1 | 2;
  customTrigger: boolean;
  drillDownTriggerEvent: TriggeEventType;
-  drillUpTriggleEvent: TriggeEventType & DrillUpTriggeEventType;
+  drillUpTriggerEvent: TriggeEventType & DrillUpTriggeEventType;
  provinceData?: Array<{ [key: string]: any }>;
  cityData?: Array<{ [key: string]: any }>;
  countyData?: Array<{ [key: string]: any }>;
--- a/stories/Layers/components/polygon.tsx
+++ b/stories/Layers/components/polygon.tsx
@ -84,6 +84,17 @@ const Spectral: {
    'rgb(94,79,162)',
  ],
 };
+const RMBColor: { [key: string]: string[] } = {
+  '100元': ['#D92568', '#E3507E', '#FC7AAB', '#F1D3E5', '#A7B5E3', '#F2EEFF'],
+  '50元': ['#416D63', '#497A71', '#8FC1B1', '#7E80A7', '#D2C6DC', '#8B897B'],
+  '20元': ['#563F30', '#A08671', '#BE9577', '#E1BDA0', '#9BCEB8', '#EACDD6'],
+  '5元': ['#49315E', '#7C5E91', '#A38EAE', '#DCC4B2', '#CDD0B5', '#B3A895'],
+  '10元': ['#23324A', '#465C6B', '#A6B0BE', '#BA9FA2', '#B6B4A3', '#B89374'],
+  '1元': ['#343F24', '#717F63', '#BCCAAF', '#CEBD7E', '#B5B4A0', '#E9E4E1'],
+  '5角': ['#644353', '#8C5B66', '#916970', '#BEB4C6', '#B5C0C8', '#FFDEE3'],
+  '2角': ['#4D6256', '#5F6F63', '#648F96', '#A5AF9C', '#C4DAE2', '#8A9A8E'],
+  '1角': ['#653E40', '#6C4547', '#AC8486', '#D1A6A1', '#CAB8B8', '#D5C1A4'],
+};
 export default class TextLayerDemo extends React.Component {
  // @ts-ignore
  private scene: Scene;
@ -117,16 +128,17 @@ export default class TextLayerDemo extends React.Component {
          features: [],
        })
        .shape('fill')
+        .scale('childrenNum', {
+          type: 'quantile',
+        })
        // .color('red')
        .color('childrenNum', [
-          'rgb(247,252,240)',
-          'rgb(224,243,219)',
-          'rgb(204,235,197)',
-          'rgb(168,221,181)',
-          'rgb(123,204,196)',
-          'rgb(78,179,211)',
-          'rgb(43,140,190)',
-          'rgb(8,88,158)',
+          '#D92568',
+          '#E3507E',
+          '#FC7AAB',
+          '#F1D3E5',
+          '#A7B5E3',
+          '#F2EEFF',
        ])
        .style({
          opacity: 1.0,
@ -148,7 +160,7 @@ export default class TextLayerDemo extends React.Component {
        filter: 1,
        textAllowOverlap: 4,
        opacity: 1,
-        color: '#ffffff',
+        color: '100元',
      };
      const rasterFolder = gui.addFolder('面图层可视化');

@ -175,10 +187,22 @@ export default class TextLayerDemo extends React.Component {
          scene.render();
          scene.exportPng();
        });
-      rasterFolder.addColor(styleOptions, 'color').onChange((color: string) => {
-        layer.color(color);
-        scene.render();
-      });
+      rasterFolder
+        .add(styleOptions, 'color', [
+          '100元',
+          '50元',
+          '20元',
+          '10元',
+          '5元',
+          '1元',
+          '5角',
+          '2角',
+          '1角',
+        ])
+        .onChange((color: any) => {
+          layer.color('childrenNum', RMBColor[color] as string[]);
+          scene.render();
+        });
    });
  }

--- a/yarn.lock
+++ b/yarn.lock
@ -6517,6 +6517,16 @@ babel-eslint@10.1.0, babel-eslint@^10.1.0:
    eslint-visitor-keys "^1.0.0"
    resolve "^1.12.0"

+babel-eslint@7.2.3:
+  version "7.2.3"
+  resolved "https://registry.npmjs.org/babel-eslint/-/babel-eslint-7.2.3.tgz#b2fe2d80126470f5c19442dc757253a897710827"
+  integrity sha1-sv4tgBJkcPXBlELcdXJTqJdxCCc=
+  dependencies:
+    babel-code-frame "^6.22.0"
+    babel-traverse "^6.23.1"
+    babel-types "^6.23.0"
+    babylon "^6.17.0"
+
 babel-eslint@^8.2.6:
  version "8.2.6"
  resolved "https://registry.npmjs.org/babel-eslint/-/babel-eslint-8.2.6.tgz#6270d0c73205628067c0f7ae1693a9e797acefd9"
@ -7057,7 +7067,7 @@ babel-template@^6.26.0:
    babylon "^6.18.0"
    lodash "^4.17.4"

-babel-traverse@^6.26.0:
+babel-traverse@^6.23.1, babel-traverse@^6.26.0:
  version "6.26.0"
  resolved "https://registry.npmjs.org/babel-traverse/-/babel-traverse-6.26.0.tgz#46a9cbd7edcc62c8e5c064e2d2d8d0f4035766ee"
  integrity sha1-RqnL1+3MYsjlwGTi0tjQ9ANXZu4=
@ -7072,7 +7082,7 @@ babel-traverse@^6.26.0:
    invariant "^2.2.2"
    lodash "^4.17.4"

-babel-types@^6.26.0:
+babel-types@^6.23.0, babel-types@^6.26.0:
  version "6.26.0"
  resolved "https://registry.npmjs.org/babel-types/-/babel-types-6.26.0.tgz#a3b073f94ab49eb6fa55cd65227a334380632497"
  integrity sha1-o7Bz+Uq0nrb6Vc1lInozQ4BjJJc=
@ -7087,7 +7097,7 @@ babylon@7.0.0-beta.44:
  resolved "https://registry.npmjs.org/babylon/-/babylon-7.0.0-beta.44.tgz#89159e15e6e30c5096e22d738d8c0af8a0e8ca1d"
  integrity sha512-5Hlm13BJVAioCHpImtFqNOF2H3ieTOHd0fmFGMxOJ9jgeFqeAwsv3u5P5cR7CSeFrkgHsT19DgFJkHV0/Mcd8g==

-babylon@^6.18.0:
+babylon@^6.17.0, babylon@^6.18.0:
  version "6.18.0"
  resolved "https://registry.npmjs.org/babylon/-/babylon-6.18.0.tgz#af2f3b88fa6f5c1e4c634d1a0f8eac4f55b395e3"
  integrity sha512-q/UEjfGJ2Cm3oKV71DJz9d25TPnq5rhBVL2Q4fA5wcC3jcrdn7+SssEybFIxwAvvP+YCsCYNKughoF33GxgycQ==
@ -11066,6 +11076,14 @@ eslint-scope@^5.0.0:
    esrecurse "^4.1.0"
    estraverse "^4.1.1"

+eslint-scope@~3.7.1:
+  version "3.7.3"
+  resolved "https://registry.npmjs.org/eslint-scope/-/eslint-scope-3.7.3.tgz#bb507200d3d17f60247636160b4826284b108535"
+  integrity sha512-W+B0SvF4gamyCTmUc+uITPY0989iXVfKvhwtmJocTaYoc/3khEHmEmvfY/Gn9HA9VV75jrQECsHizkNw1b68FA==
+  dependencies:
+    esrecurse "^4.1.0"
+    estraverse "^4.1.1"
+
 eslint-utils@^1.4.3:
  version "1.4.3"
  resolved "https://registry.npmjs.org/eslint-utils/-/eslint-utils-1.4.3.tgz#74fec7c54d0776b6f67e0251040b5806564e981f"
@ -25589,12 +25607,12 @@ tslint-plugin-prettier@^1.3.0:
    eslint-plugin-prettier "^2.2.0"
    tslib "^1.7.1"

-tslint-react@^5.0.0:
-  version "5.0.0"
-  resolved "https://registry.npmjs.org/tslint-react/-/tslint-react-5.0.0.tgz#d0ae644e8163bdd3e134012e9353094904e8dd44"
-  integrity sha512-/IbcSmoBPlFic8kQaRfQ4knTY4mivwo5LVzvozvX6Dyu2ynEnrh1dIcR2ujjyp/IodXqY/H5GbxFxSMo/Kf2Hg==
+tslint-react@4.1.0:
+  version "4.1.0"
+  resolved "https://registry.npmjs.org/tslint-react/-/tslint-react-4.1.0.tgz#7153b724a8cfbea52423d0ffa469e8eba3bcc834"
+  integrity sha512-Y7CbFn09X7Mpg6rc7t/WPbmjx9xPI8p1RsQyiGCLWgDR6sh3+IBSlT+bEkc0PSZcWwClOkqq2wPsID8Vep6szQ==
  dependencies:
-    tsutils "^3.17.1"
+    tsutils "^3.9.1"

 tslint@^5.11.0:
  version "5.20.1"
@ -25622,7 +25640,7 @@ tsutils@^2.29.0:
  dependencies:
    tslib "^1.8.1"

-tsutils@^3.17.1:
+tsutils@^3.17.1, tsutils@^3.9.1:
  version "3.17.1"
  resolved "https://registry.npmjs.org/tsutils/-/tsutils-3.17.1.tgz#ed719917f11ca0dee586272b2ac49e015a2dd759"
  integrity sha512-kzeQ5B8H3w60nFY2g8cJIuH7JDpsALXySGtwGJ0p2LSjLgay3NdIpqq5SoOBe46bKDW2iq25irHCr8wjomUS2g==