Merge pull request #369 from antvis/District

feat(distict): add bubble map
2020-05-18 14:32:00 +08:00 · 2020-05-18 14:32:00 +08:00 · daab4549c6
parent d7d200bd30 d404c36434
commit daab4549c6
63 changed files with 2589 additions and 399 deletions
--- a/.eslintrc
+++ b/.eslintrc
@ -40,6 +40,9 @@
    "jsdoc/require-param": 0,
    "linebreak-style": [
      0
-    ]
+    ],
+    "indent": ["error", 2, {
+      "ignoredNodes": ["TemplateLiteral"]
+    }]
  }
 }
--- a/docs/api/district/drilldown.zh.md
+++ b/docs/api/district/drilldown.zh.md
@ -0,0 +1,148 @@
+---
+title: 钻取地图
+order: 2
+---
+
+钻取是改变展现数据维度的层次，变换分析的粒度。它包括向上钻取（drillup）和向下钻取（drilldown）。
+
+钻取地图支持两种可视化类型
+
+- 填充图：在地图上显示每个区域，根据区域值设置区块填充颜色
+- 气泡图：每个区域用气泡显示，根据区域值设置气泡的颜色和大小
+
+## 使用
+
+```javascript
+import { DrillDownLayer } from '@antv/l7-district';
+```
+
+DrillDownLayer 提供默认提供通过 Layer 的交互事件，实现上钻下钻的交互，默认点击当前图层(click)向下钻取，双击非地图区域(undblclick)向上钻取。你可以更改默认交互的的触发事件。通过也可以更改默认的交互行为。
+
+### 构造函数
+
+- scene L7 scene 对象
+- option 行政区划配置项
+  - drillDepth `number` 下钻深度 `0 | 1 | 2` 1 市级 2，县级
+  - customTrigger 是否自定义下钻交互，默认 `false`
+  - drillDownTriggerEvent 向下钻取的触发事件 ⛔customTrigger 为 true 时不生效
+  - drillUpTriggleEvent 向上钻取的触发事件 ⛔customTrigger 为 true 时不生效
+  - provinceData 省级数据
+  - cityData 市级数据 可以是全量的数据，下钻时可以不需要重新设置数据
+  - countyData 县级数据 可以是全量的数据，下钻时可以不需要重新设置数据
+  - joinBy 数据关联，属性数据如何内部空间数据关联绑定 目前支持 NAME_CHN,adcode 字段连接
+    对照表 `Array [string, string]` 第一个值为空间数据字段，第二个为传入数据字段名
+  - label 文本配置项 `labelOption`
+  - bubble 气泡配置项 `bubbleOption`
+  - fill 填充配置项 `fillOption`
+  - province `layerOption` 省级图层配置，如果不设置等同全局配置
+  - city `layerOption` 市级图层配置，如果不设置等同全局配置
+  - county `layerOption` 县级图层配置，如果不设置等同全局配置
+
+#### layerOption
+
+下钻各个层级的配置项，可以独立配置，每一层级的样式，不设置和上一层就保持一致
+
+- joinBy: [string, string];
+- label: Partial<ILabelOption>;
+- bubble: Partial<IBubbleOption>;
+- fill: Partial<IFillOptions>;
+
+#### labelOption
+
+文本标注配置项，目前只支持常量配置，不支持数据映射
+
+- enable `boolean` 是否开启标注 `true`
+- color `string` 标注颜色
+- field `string` 标注字段名 默认 `NAME_CHN`
+- size `number` 文本大小 默认 `8`
+- stroke `string` 描边颜色 `#fff`
+- strokeWidth `number` 描边宽度 `2`
+- textAllowOverlap: `boolean` 文字是否允许压盖 `true`
+- opacity `number` 透明度 `1`
+
+#### bubbleOption
+
+气泡图配置项
+
+- enable `boolean` 是否显示气泡 `true`
+- shape: AttributeType; 气泡形状支持数据映射
+- size: AttributeType; 气泡大小支持数据映射
+- color: AttributeType; 气泡颜色支持数据映射
+- scale: { // 数字度量
+  field: string; 度量字段
+  type: ScaleTypeName; 度量字段
+  };
+- style: {
+  opacity: number; 透明度
+  stroke: string; 填充色
+  strokeWidth: number; 填充宽度
+  };
+
+#### fill
+
+填充图样式
+
+- scale: ScaleTypeName | null; 填充颜色度量类型
+- color: AttributeType; 填充颜色支持数据映射
+- style: any; 填充图样式
+- activeColor: string; 填充图高亮颜色
+
+## 属性
+
+为了实现灵活相关图层的可视化样式，将内部图层通过属性对外透出
+
+### provinceLayer
+
+全国地图 CountyLayer
+
+### cityLayer
+
+省级地图 ProvinceLayer
+
+### countyLayer
+
+市级地图 CityLayer
+
+## 方法
+
+### drillDown
+
+向下钻取 自定义钻取交互行为时使用
+
+** 参数 **
+
+- adcode 下钻层级的行政区划代码, 可以设置一个或者多个，多个使用
+- data 下钻层级的数据，可选，如果不设置取全局配置
+- joinBy 下钻关联字段 `Array` 可选 如果不设置取全局配置
+
+```javascirpt
+  drillLayer.drillDown(['110100'])
+```
+
+### drillUp
+
+向上钻取
+
+```javascirpt
+ drillLayer.drillUp(['110100'])
+```
+
+### updateData
+
+参数
+
+- layer 更新图层名称 `province|city|county`
+- data 数据
+- joinBy 可选
+
+### show
+
+显示图形
+
+### hide
+
+隐藏图层
+
+### destroy
+
+移除并销毁图层
--- a/docs/api/district/province.zh.md
+++ b/docs/api/district/province.zh.md
--- a/docs/api/district/start.zh.md
+++ b/docs/api/district/start.zh.md
@ -0,0 +1,134 @@
+---
+title: 快速开始
+order: 0
+---
+
+地图行政区划组件，支持世界地图，中国地图省市县三级，支持中国地图省市县上钻下取。
+
+## 使用
+
+**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/docs/api/district/world
+++ b/docs/api/district/world
--- a/examples/district/basic/API.zh.md
+++ b/examples/district/basic/API.zh.md
@ -3,6 +3,121 @@ 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.js
+++ b/examples/district/basic/demo/china_map.js
@ -1,3 +1,4 @@
+/* eslint-disable */
 import { Scene } from '@antv/l7';
 import { CountryLayer } from '@antv/l7-district';
 import { Mapbox } from '@antv/l7-maps';
@ -189,26 +190,24 @@ scene.on('loaded', () => {
  new CountryLayer(scene, {
    data: ProvinceData,
    joinBy: [ 'NAME_CHN', 'name' ],
-    // label: {
-    //   field: 'NAME_CHN',
-    //   textAllowOverlap: true,
-    // },
    depth: 1,
    fill: {
-      field: 'value',
-      values: [
-        '#feedde',
-        '#fdd0a2',
-        '#fdae6b',
-        '#fd8d3c',
-        '#e6550d',
-        '#a63603'
-      ]
+      color: {
+        field: 'value',
+        values: [
+          '#feedde',
+          '#fdd0a2',
+          '#fdae6b',
+          '#fd8d3c',
+          '#e6550d',
+          '#a63603'
+        ]
+      }
    },
    popup: {
      enable: true,
      Html: props => {
-        return `<span>${props.NAME_CHN}:</span><span>${props.value}</span>`;
+        return `<span>${props.NAME_CHN}</span>`;
      }
    }
  });
--- a/examples/district/basic/demo/city.js
+++ b/examples/district/basic/demo/city.js
@ -37,15 +37,16 @@ async function initMap() {
        textAllowOverlap: false
      },
      fill: {
-        field: 'pop',
-        values: [
-          '#feedde',
-          '#fdd0a2',
-          '#fdae6b',
-          '#fd8d3c',
-          '#e6550d',
-          '#a63603'
-        ]
+        color: { field: 'pop',
+          values: [
+            '#feedde',
+            '#fdd0a2',
+            '#fdae6b',
+            '#fd8d3c',
+            '#e6550d',
+            '#a63603'
+          ]
+        }
      },
      popup: {
        enable: true,
--- a/examples/district/basic/demo/county.js
+++ b/examples/district/basic/demo/county.js
@ -21,15 +21,17 @@ scene.on('loaded', () => {
      field: 'NAME_CHN'
    },
    fill: {
-      field: 'NAME_CHN',
-      values: [
-        '#feedde',
-        '#fdd0a2',
-        '#fdae6b',
-        '#fd8d3c',
-        '#e6550d',
-        '#a63603'
-      ]
+      color: {
+        field: 'NAME_CHN',
+        values: [
+          '#feedde',
+          '#fdd0a2',
+          '#fdae6b',
+          '#fd8d3c',
+          '#e6550d',
+          '#a63603'
+        ]
+      }
    },
    popup: {
      enable: true,
--- a/examples/district/basic/demo/meta.json
+++ b/examples/district/basic/demo/meta.json
@ -4,7 +4,6 @@
    "en": "District"
  },
  "demos": [
-
    {
      "filename": "china_map.js",
      "title": "中国地图",
@ -29,11 +28,6 @@
      "filename": "county.js",
      "title": "中国县地图",
      "screenshot": "https://gw.alipayobjects.com/mdn/rms_8e1672/afts/img/A*iVwLSpIf_ckAAAAAAAAAAABkARQnAQ"
-    },
-    {
-      "filename": "drill_down.js",
-      "title": "中国地图上钻下取",
-      "screenshot": "https://gw.alipayobjects.com/mdn/rms_8e1672/afts/img/A*xjjARqU70xoAAAAAAAAAAABkARQnAQ"
    }
  ]
 }
--- a/examples/district/basic/demo/province.js
+++ b/examples/district/basic/demo/province.js
@ -37,15 +37,17 @@ async function initMap() {
        textAllowOverlap: false
      },
      fill: {
-        field: 'pop',
-        values: [
-          '#feedde',
-          '#fdd0a2',
-          '#fdae6b',
-          '#fd8d3c',
-          '#e6550d',
-          '#a63603'
-        ]
+        color: {
+          field: 'pop',
+          values: [
+            '#feedde',
+            '#fdd0a2',
+            '#fdae6b',
+            '#fd8d3c',
+            '#e6550d',
+            '#a63603'
+          ]
+        }
      },
      popup: {
        enable: true,
--- a/examples/district/basic/demo/world_map.js
+++ b/examples/district/basic/demo/world_map.js
@ -16,15 +16,17 @@ scene.on('loaded', () => {
  new WorldLayer(scene, {
    data: [],
    fill: {
-      field: 'NAME_CHN',
-      values: [
-        '#feedde',
-        '#fdd0a2',
-        '#fdae6b',
-        '#fd8d3c',
-        '#e6550d',
-        '#a63603'
-      ]
+      color: {
+        field: 'NAME_CHN',
+        values: [
+          '#feedde',
+          '#fdd0a2',
+          '#fdae6b',
+          '#fd8d3c',
+          '#e6550d',
+          '#a63603'
+        ]
+      }
    },
    stroke: '#ccc',
    label: {
--- a/examples/district/basic/index.en.md
+++ b/examples/district/basic/index.en.md
@ -1,4 +1,4 @@
 ---
 title: L7 District
-order: 3
+order: 0
 ---
--- a/examples/district/basic/index.zh.md
+++ b/examples/district/basic/index.zh.md
@ -1,4 +1,4 @@
 ---
-title: 基础组件
-order: 3
+title: 填充图
+order: 1
 ---
--- a/examples/district/bubble/API.en.md
+++ b/examples/district/bubble/API.en.md
--- a/examples/district/bubble/API.zh.md
+++ b/examples/district/bubble/API.zh.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/examples/district/bubble/demo/china_bubble.js
+++ b/examples/district/bubble/demo/china_bubble.js
@ -0,0 +1,210 @@
+import { Scene } from '@antv/l7';
+import { CountryLayer } from '@antv/l7-district';
+import { Mapbox } from '@antv/l7-maps';
+const ProvinceData = [
+  {
+    name: '云南省',
+    code: 530000,
+    value: 17881.12
+  },
+  {
+    name: '黑龙江省',
+    code: 230000,
+    value: 16361.62
+  },
+  {
+    name: '贵州省',
+    code: 520000,
+    value: 14806.45
+  },
+  {
+    name: '北京市',
+    code: 110000,
+    value: 30319.98
+  },
+  {
+    name: '河北省',
+    code: 130000,
+    value: 36010.27
+  },
+  {
+    name: '山西省',
+    code: 140000,
+    value: 16818.11
+  },
+  {
+    name: '吉林省',
+    code: 220000,
+    value: 15074
+  },
+  {
+    name: '宁夏回族自治区',
+    code: 640000,
+    value: 3705.18
+  },
+  {
+    name: '辽宁省',
+    code: 210000,
+    value: 25315.35
+  },
+  {
+    name: '海南省',
+    code: 460000,
+    value: 4832.05
+  },
+  {
+    name: '内蒙古自治区',
+    code: 150000,
+    value: 17289.22
+  },
+  {
+    name: '天津市',
+    code: 120000,
+    value: 18809.64
+  },
+  {
+    name: '新疆维吾尔自治区',
+    code: 650000,
+    value: 12199.08
+  },
+  {
+    name: '上海市',
+    code: 310000,
+    value: 32679.87
+  },
+  {
+    name: '陕西省',
+    code: 610000,
+    value: 24438.32
+  },
+  {
+    name: '甘肃省',
+    code: 620000,
+    value: 8246.07
+  },
+  {
+    name: '安徽省',
+    code: 340000,
+    value: 30006.82
+  },
+  {
+    name: '香港特别行政区',
+    code: 810000,
+    value: 0
+  },
+  {
+    name: '广东省',
+    code: 440000,
+    value: 97277.77
+  },
+  {
+    name: '河南省',
+    code: 410000,
+    value: 48055.86
+  },
+  {
+    name: '湖南省',
+    code: 430000,
+    value: 36425.78
+  },
+  {
+    name: '江西省',
+    code: 360000,
+    value: 21984.78
+  },
+  {
+    name: '四川省',
+    code: 510000,
+    value: 40678.13
+  },
+  {
+    name: '广西壮族自治区',
+    code: 450000,
+    value: 20353.51
+  },
+  {
+    name: '江苏省',
+    code: 320000,
+    value: 92595.4
+  },
+  {
+    name: '澳门特别行政区',
+    code: 820000,
+    value: null
+  },
+  {
+    name: '浙江省',
+    code: 330000,
+    value: 56197.15
+  },
+  {
+    name: '山东省',
+    code: 370000,
+    value: 76469.67
+  },
+  {
+    name: '青海省',
+    code: 630000,
+    value: 2865.23
+  },
+  {
+    name: '重庆市',
+    code: 500000,
+    value: 20363.19
+  },
+  {
+    name: '福建省',
+    code: 350000,
+    value: 35804.04
+  },
+  {
+    name: '湖北省',
+    code: 420000,
+    value: 39366.55
+  },
+  {
+    name: '西藏自治区',
+    code: 540000,
+    value: 1477.63
+  },
+  {
+    name: '台湾省',
+    code: 710000,
+    value: null
+  }
+];
+const scene = new Scene({
+  id: 'map',
+  map: new Mapbox({
+    center: [ 116.2825, 39.9 ],
+    pitch: 0,
+    style: 'blank',
+    zoom: 3,
+    minZoom: 0,
+    maxZoom: 10
+  })
+});
+
+scene.on('loaded', () => {
+  new CountryLayer(scene, {
+    data: ProvinceData,
+    joinBy: [ 'NAME_CHN', 'name' ],
+    depth: 1,
+    fill: {
+      color: '#ccc'
+    },
+    bubble: {
+      enable: true,
+      size: {
+        field: 'value',
+        values: [ 3, 20 ]
+      }
+    },
+    popup: {
+      enable: true,
+      Html: props => {
+        return `<span>${props.NAME_CHN}:</span><span>${props.value}</span>`;
+      }
+    }
+  });
+});
--- a/examples/district/bubble/demo/city.js
+++ b/examples/district/bubble/demo/city.js
@ -0,0 +1,57 @@
+import { Scene } from '@antv/l7';
+import { CityLayer } from '@antv/l7-district';
+import { Mapbox } from '@antv/l7-maps';
+
+async function initMap() {
+  const response = await fetch(
+    'https://gw.alipayobjects.com/os/bmw-prod/149b599d-21ef-4c24-812c-20deaee90e20.json'
+  );
+  const provinceData = await response.json();
+  const data = Object.keys(provinceData).map(key => {
+    return {
+      code: key,
+      name: provinceData[key][0],
+      pop: provinceData[key][2] * 1
+    };
+  });
+
+  const scene = new Scene({
+    id: 'map',
+    map: new Mapbox({
+      center: [ 116.2825, 39.9 ],
+      pitch: 0,
+      style: 'blank',
+      zoom: 3,
+      minZoom: 3,
+      maxZoom: 10
+    })
+  });
+  scene.on('loaded', () => {
+    new CityLayer(scene, {
+      data,
+      joinBy: [ 'adcode', 'code' ],
+      adcode: [ '330000', '330100' ],
+      depth: 3,
+      label: {
+        field: 'NAME_CHN',
+        textAllowOverlap: false
+      },
+      bubble: {
+        enable: true,
+        size: {
+          field: 'pop',
+          values: [ 3, 20 ]
+        }
+      },
+      popup: {
+        enable: true,
+        Html: props => {
+          return `<span>${props.NAME_CHN}:</span><span>${props.pop}</span>`;
+        }
+      }
+    });
+  });
+
+}
+
+initMap();
--- a/examples/district/bubble/demo/county.js
+++ b/examples/district/bubble/demo/county.js
@ -0,0 +1,44 @@
+import { Scene } from '@antv/l7';
+import { CountyLayer } 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: 3,
+    maxZoom: 10
+  })
+});
+scene.on('loaded', () => {
+  new CountyLayer(scene, {
+    data: [],
+    adcode: [ '110101', '110102', '110106' ],
+    depth: 3,
+    label: {
+      field: 'NAME_CHN'
+    },
+    bubble: {
+      enable: true,
+      color: {
+        field: 'NAME_CHN',
+        values: [
+          '#feedde',
+          '#fdd0a2',
+          '#fdae6b',
+          '#fd8d3c',
+          '#e6550d',
+          '#a63603'
+        ]
+      }
+    },
+    popup: {
+      enable: true,
+      Html: props => {
+        return `<span>${props.NAME_CHN}</span>`;
+      }
+    }
+  });
+});
--- a/examples/district/bubble/demo/meta.json
+++ b/examples/district/bubble/demo/meta.json
@ -0,0 +1,57 @@
+{
+  "title": {
+    "zh": "行政区划",
+    "en": "District"
+  },
+  "demos": [
+    {
+      "filename": "china_bubble.js",
+      "title": "中国地图气泡图",
+<<<<<<< HEAD
+      "screenshot": "https://gw.alipayobjects.com/mdn/rms_b82228/afts/img/A*U86gSZpLV54AAAAAAAAAAABkARQnAQ"
+    },
+    {
+      "filename": "world_map.js",
+      "title": "世界地图气泡",
+      "screenshot": "https://gw.alipayobjects.com/mdn/rms_b82228/afts/img/A*jljdRbDWNIgAAAAAAAAAAABkARQnAQ"
+    },
+    {
+      "filename": "province.js",
+      "title": "中国省级地图气泡",
+      "screenshot":  "https://gw.alipayobjects.com/mdn/rms_b82228/afts/img/A*wS2QRa4kPTAAAAAAAAAAAABkARQnAQ"
+    },
+    {
+      "filename": "city.js",
+      "title": "中国市地图气泡",
+      "screenshot":  "https://gw.alipayobjects.com/mdn/rms_b82228/afts/img/A*usBDQ4cHxtsAAAAAAAAAAABkARQnAQ"
+    },
+    {
+      "filename": "county.js",
+      "title": "中国县地图气泡",
+      "screenshot": "https://gw.alipayobjects.com/mdn/rms_b82228/afts/img/A*0p7aSJ8AXoMAAAAAAAAAAABkARQnAQ"
+=======
+      "screenshot": "https://gw.alipayobjects.com/mdn/rms_8e1672/afts/img/A*tClNQoAo5isAAAAAAAAAAABkARQnAQ"
+    },
+    {
+      "filename": "world_map.js",
+      "title": "世界地图",
+      "screenshot": "https://gw.alipayobjects.com/mdn/rms_8e1672/afts/img/A*EtRFRYyGs98AAAAAAAAAAABkARQnAQ"
+    },
+    {
+      "filename": "province.js",
+      "title": "中国省级地图",
+      "screenshot":  "https://gw.alipayobjects.com/mdn/rms_8e1672/afts/img/A*eVVcRaCBkdYAAAAAAAAAAABkARQnAQ"
+    },
+    {
+      "filename": "city.js",
+      "title": "中国市地图",
+      "screenshot":  "https://gw.alipayobjects.com/mdn/rms_8e1672/afts/img/A*C_y8Tr0V8GIAAAAAAAAAAABkARQnAQ"
+    },
+    {
+      "filename": "county.js",
+      "title": "中国县地图",
+      "screenshot": "https://gw.alipayobjects.com/mdn/rms_8e1672/afts/img/A*iVwLSpIf_ckAAAAAAAAAAABkARQnAQ"
+>>>>>>> d3910e34713f288168e16d4cfedca0c7903b0918
+    }
+  ]
+}
--- a/examples/district/bubble/demo/province.js
+++ b/examples/district/bubble/demo/province.js
@ -0,0 +1,62 @@
+import { Scene } from '@antv/l7';
+import { ProvinceLayer } from '@antv/l7-district';
+import { Mapbox } from '@antv/l7-maps';
+async function initMap() {
+  const response = await fetch(
+    'https://gw.alipayobjects.com/os/bmw-prod/149b599d-21ef-4c24-812c-20deaee90e20.json'
+  );
+  const provinceData = await response.json();
+  const data = Object.keys(provinceData).map(key => {
+    return {
+      code: key,
+      name: provinceData[key][0],
+      pop: provinceData[key][2] * 1
+    };
+  });
+
+  const scene = new Scene({
+    id: 'map',
+    map: new Mapbox({
+      center: [ 116.2825, 39.9 ],
+      pitch: 0,
+      style: 'blank',
+      zoom: 3,
+      minZoom: 3,
+      maxZoom: 10
+    })
+  });
+
+  scene.on('loaded', () => {
+    new ProvinceLayer(scene, {
+      data,
+      joinBy: [ 'adcode', 'code' ],
+      adcode: [ '330000' ],
+      depth: 3,
+      label: {
+        field: 'NAME_CHN',
+        textAllowOverlap: false
+      },
+      bubble: {
+        enable: true,
+        color: {
+          field: 'pop',
+          values: [
+            '#feedde',
+            '#fdd0a2',
+            '#fdae6b',
+            '#fd8d3c',
+            '#e6550d',
+            '#a63603'
+          ]
+        }
+      },
+      popup: {
+        enable: true,
+        Html: props => {
+          return `<span>${props.NAME_CHN}:</span><span>${props.pop}</span>`;
+        }
+      }
+    });
+  });
+}
+initMap();
--- a/examples/district/bubble/demo/world_map.js
+++ b/examples/district/bubble/demo/world_map.js
@ -0,0 +1,45 @@
+import { Scene } from '@antv/l7';
+import { WorldLayer } 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: 0,
+    minZoom: 0,
+    maxZoom: 10
+  })
+});
+scene.on('loaded', () => {
+  new WorldLayer(scene, {
+    data: [],
+    bubble: {
+      enable: true,
+      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>`;
+      }
+    }
+  });
+});
--- a/examples/district/bubble/index.en.md
+++ b/examples/district/bubble/index.en.md
@ -0,0 +1,4 @@
+---
+title: L7 District
+order: 0
+---
--- a/examples/district/bubble/index.zh.md
+++ b/examples/district/bubble/index.zh.md
@ -0,0 +1,4 @@
+---
+title: 气泡图
+order: 2
+---
--- a/examples/district/drill/API.en.md
+++ b/examples/district/drill/API.en.md
--- a/examples/district/drill/API.zh.md
+++ b/examples/district/drill/API.zh.md
@ -0,0 +1,127 @@
+## 钻取地图
+钻取是改变展现数据维度的层次，变换分析的粒度。它包括向上钻取（drillup）和向下钻取（drilldown）。
+
+钻取地图支持两种可视化类型
+- 填充图：在地图上显示每个区域，根据区域值设置区块填充颜色
+- 气泡图：每个区域用气泡显示，根据区域值设置气泡的颜色和大小
+
+
+## 使用
+
+```javascript
+import { DrillDownLayer } from '@antv/l7-district';
+```
+DrillDownLayer 提供默认提供通过Layer的交互事件，实现上钻下钻的交互，默认点击当前图层(click)向下钻取，双击非地图区域(undblclick)向上钻取。你可以更改默认交互的的触发事件。通过也可以更改默认的交互行为。
+
+### 构造函数
+- scene L7 scene 对象
+- option 行政区划配置项
+    - drillDepth `number` 下钻深度 `0 | 1 | 2 ` 1 市级 2，县级
+    - customTrigger 是否自定义下钻交互，默认 `false`
+    - drillDownTriggerEvent 向下钻取的触发事件  ⛔customTrigger为 true 时不生效
+    - drillUpTriggleEvent 向上钻取的触发事件    ⛔customTrigger为 true 时不生效
+    - provinceData 省级数据 
+    - cityData 市级数据 可以是全量的数据，下钻时可以不需要重新设置数据
+    - countyData 县级数据  可以是全量的数据，下钻时可以不需要重新设置数据
+    - joinBy 数据关联，属性数据如何内部空间数据关联绑定 目前支持 NAME_CHN,adcode 字段连接
+    对照表 `Array [string, string]` 第一个值为空间数据字段，第二个为传入数据字段名
+    - label 文本配置项 `labelOption`
+    - bubble 气泡配置项 `bubbleOption`
+    - fill 填充配置项 `fillOption`
+    - province  `layerOption` 省级图层配置，如果不设置等同全局配置  
+    - city `layerOption`  市级图层配置，如果不设置等同全局配置
+    - county  `layerOption` 县级图层配置，如果不设置等同全局配置
+
+#### layerOption
+ 下钻各个层级的配置项，可以独立配置，每一层级的样式，不设置和上一层就保持一致
+  - joinBy: [string, string];
+  - label: Partial<ILabelOption>;
+  - bubble: Partial<IBubbleOption>;
+  - fill: Partial<IFillOptions>;
+
+#### labelOption
+  文本标注配置项，目前只支持常量配置，不支持数据映射
+  - enable `boolean` 是否开启标注 `true`
+  - color `string` 标注颜色
+  - field `string` 标注字段名  默认 `NAME_CHN`
+  - size `number` 文本大小 默认 `8`
+  - stroke `string` 描边颜色 `#fff`
+  - strokeWidth `number` 描边宽度 `2` 
+  - textAllowOverlap: `boolean` 文字是否允许压盖 `true`
+  - opacity `number` 透明度 `1`
+
+#### bubbleOption
+
+气泡图配置项
+  - enable `boolean` 是否显示气泡 `true`
+  - shape: AttributeType; 气泡形状支持数据映射
+  - size: AttributeType; 气泡大小支持数据映射
+  - color: AttributeType; 气泡颜色支持数据映射
+  - scale: { // 数字度量
+    field: string; 度量字段
+    type: ScaleTypeName; 度量字段
+  };
+  - style: {
+    opacity: number; 透明度
+    stroke: string; 填充色
+    strokeWidth: number; 填充宽度
+  };
+
+#### fill
+  填充图样式
+  - scale: ScaleTypeName | null; 填充颜色度量类型
+  - color: AttributeType; 填充颜色支持数据映射
+  - style: any; 填充图样式
+  - activeColor: string; 填充图高亮颜色
+
+## 属性
+为了实现灵活相关图层的可视化样式，将内部图层通过属性对外透出
+
+### provinceLayer
+
+全国地图 CountyLayer
+
+### cityLayer
+
+省级地图 ProvinceLayer
+
+### countyLayer
+市级地图 CityLayer
+
+## 方法
+
+### drillDown
+ 向下钻取 自定义钻取交互行为时使用
+
+** 参数 ** 
+- adcode 下钻层级的行政区划代码, 可以设置一个或者多个，多个使用
+- data 下钻层级的数据，可选，如果不设置取全局配置
+- joinBy 下钻关联字段 `Array` 可选 如果不设置取全局配置
+
+```javascirpt
+  drillLayer.drillDown(['110100'])
+```
+
+### drillUp
+ 向上钻取
+
+ ```javascirpt
+  drillLayer.drillUp(['110100'])
+```
+### updateData
+参数
+  - layer 更新图层名称 `province|city|county`
+  - data 数据
+  - joinBy 可选
+### show
+
+显示图形
+
+### hide
+
+隐藏图层
+
+### destroy
+ 移除并销毁图层
+
+
--- a/examples/district/drill/demo/drill_down.js
+++ b/examples/district/drill/demo/drill_down.js
@ -17,15 +17,17 @@ scene.on('loaded', () => {
    data: [],
    depth: 1,
    fill: {
-      field: 'NAME_CHN',
-      values: [
-        '#feedde',
-        '#fdd0a2',
-        '#fdae6b',
-        '#fd8d3c',
-        '#e6550d',
-        '#a63603'
-      ]
+      color: {
+        field: 'NAME_CHN',
+        values: [
+          '#feedde',
+          '#fdd0a2',
+          '#fdae6b',
+          '#fd8d3c',
+          '#e6550d',
+          '#a63603'
+        ]
+      }
    },
    popup: {
      enable: true,
--- a/examples/district/drill/demo/drill_down_bubble.js
+++ b/examples/district/drill/demo/drill_down_bubble.js
@ -0,0 +1,40 @@
+import { Scene } from '@antv/l7';
+import { DrillDownLayer } 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: 3,
+    maxZoom: 10
+  })
+});
+scene.on('loaded', () => {
+  new DrillDownLayer(scene, {
+    data: [],
+    depth: 1,
+    bubble: {
+      enable: true,
+      color: {
+        field: 'NAME_CHN',
+        values: [
+          '#feedde',
+          '#fdd0a2',
+          '#fdae6b',
+          '#fd8d3c',
+          '#e6550d',
+          '#a63603'
+        ]
+      }
+    },
+    popup: {
+      enable: true,
+      Html: props => {
+        return `<span>${props.NAME_CHN}</span>`;
+      }
+    }
+  });
+});
--- a/examples/district/drill/demo/meta.json
+++ b/examples/district/drill/demo/meta.json
@ -0,0 +1,18 @@
+{
+  "title": {
+    "zh": "行政区划",
+    "en": "District"
+  },
+  "demos": [
+    {
+      "filename": "drill_down.js",
+      "title": "中国地图钻取",
+      "screenshot": "https://gw.alipayobjects.com/mdn/rms_8e1672/afts/img/A*xjjARqU70xoAAAAAAAAAAABkARQnAQ"
+    },
+    {
+      "filename": "drill_down_bubble.js",
+      "title": "中国地图钻取气泡图",
+      "screenshot": "https://gw.alipayobjects.com/mdn/rms_8e1672/afts/img/A*xjjARqU70xoAAAAAAAAAAABkARQnAQ"
+    }
+  ]
+}
--- a/examples/district/drill/index.en.md
+++ b/examples/district/drill/index.en.md
@ -0,0 +1,4 @@
+---
+title: Drill Down
+order: 0
+---
--- a/examples/district/drill/index.zh.md
+++ b/examples/district/drill/index.zh.md
@ -0,0 +1,4 @@
+---
+title: 钻取地图
+order: 3
+---
--- a/examples/district/react/demo/city.tsx
+++ b/examples/district/react/demo/city.tsx
@ -58,15 +58,17 @@ class City extends React.Component {
          textAllowOverlap: false,
        },
        fill: {
-          field: 'NAME_CHN',
-          values: [
-            '#feedde',
-            '#fdd0a2',
-            '#fdae6b',
-            '#fd8d3c',
-            '#e6550d',
-            '#a63603',
-          ],
+          color: {
+            field: 'NAME_CHN',
+            values: [
+              '#feedde',
+              '#fdd0a2',
+              '#fdae6b',
+              '#fd8d3c',
+              '#e6550d',
+              '#a63603',
+            ],
+          },
        },
        popup: {
          enable: true,
--- a/examples/district/react/demo/county.tsx
+++ b/examples/district/react/demo/county.tsx
@ -44,15 +44,17 @@ export default class County extends React.Component {
          field: 'NAME_CHN',
        },
        fill: {
-          field: 'NAME_CHN',
-          values: [
-            '#feedde',
-            '#fdd0a2',
-            '#fdae6b',
-            '#fd8d3c',
-            '#e6550d',
-            '#a63603',
-          ],
+          color: {
+            field: 'NAME_CHN',
+            values: [
+              '#feedde',
+              '#fdd0a2',
+              '#fdae6b',
+              '#fd8d3c',
+              '#e6550d',
+              '#a63603'
+            ]
+          }
        },
        popup: {
          enable: true,
@ -100,4 +102,4 @@ export default class County extends React.Component {
  };
 }

-ReactDOM.render(<County />, document.getElementById('map'));
+ReactDOM.render(<County />, document.getElementById('map'));
--- a/examples/district/react/demo/province.tsx
+++ b/examples/district/react/demo/province.tsx
@ -1,9 +1,9 @@
 import { Scene } from '@antv/l7';
 import { ProvinceLayer } from '@antv/l7-district';
 import { GaodeMap, Mapbox } from '@antv/l7-maps';
-import ReactDOM from 'react-dom';
 import { Select } from 'antd';
 import * as React from 'react';
+import ReactDOM from 'react-dom';
 const { Option } = Select;

 const ProvinceData = [
@ -223,15 +223,17 @@ class Province extends React.Component {
          textAllowOverlap: false,
        },
        fill: {
-          field: 'NAME_CHN',
-          values: [
-            '#feedde',
-            '#fdd0a2',
-            '#fdae6b',
-            '#fd8d3c',
-            '#e6550d',
-            '#a63603',
-          ],
+          color: {
+            field: 'NAME_CHN',
+            values: [
+              '#feedde',
+              '#fdd0a2',
+              '#fdae6b',
+              '#fd8d3c',
+              '#e6550d',
+              '#a63603',
+            ],
+          },
        },
        popup: {
          enable: true,
@ -287,4 +289,4 @@ class Province extends React.Component {
    this.provinceLayer.updateDistrict([value]);
  };
 }
-ReactDOM.render(<Province />, document.getElementById('map'))
+ReactDOM.render(<Province />, document.getElementById('map'));
--- a/examples/district/react/index.zh.md
+++ b/examples/district/react/index.zh.md
@ -1,4 +1,4 @@
 ---
 title: React 组件
-order: 3
+order: 4
 ---
--- a/examples/draw/UI/API.zh.md
+++ b/examples/draw/UI/API.zh.md
@ -90,75 +90,39 @@ scene.addControl(control);
 scene.removeControl(control);
 ```

-### Draw Type
+## 方法

-可以不依赖 Draw UI 组件，独立的使用每一个 Draw
+### getDraw(type)

-#### DrawCircle
+获取 draw 实例

-绘制圆形
+参数： type 绘制实例 `point|line|polygon|rect| circle`

 ```javascript
-import { DrawCircle } from '@antv/l7-draw';
-const drawCircle = new DrawCircle(scene);
-drawCircle.enable();
+const pointDraw = drawcontrol.get('point');
 ```

-#### DrawRect
+### getAllData()

-绘制四边形
+获取每个 Draw 实例绘制的结果数据
+
+返回数据格式如下

 ```javascript
-import { DrawRect } from '@antv/l7-draw';
-const drawRect = new DrawRect(scene);
-drawRect.enable();
+{
+  point: []; // geojson数据格式
+  line: [];
+}
 ```

-#### DrawLine
+### removeAllData()

-绘制路径
+移除绘制的的所有数据

 ```javascript
-import { DrawLine } from '@antv/l7-draw';
-const drawLine = new DrawLine(scene);
-drawLine.enable();
+drawcontrol.removeAllData();
 ```

-#### DrawPoint
-
-绘制点
-
-```javascript
-import { DrawPoint } from '@antv/l7-draw';
-const drawPoint = new DrawPoint(scene);
-drawPoint.enable();
-```
-
-#### DrawPolygon
-
-绘制多边形
-
-```javascript
-import { DrawPolygon } from '@antv/l7-draw';
-const drawPoint = new DrawPolygon(scene);
-drawPoint.enable();
-```
-
-### 配置项 DrawOption
-
- editEnable boolean 是否允许编辑
- selectEnable boolean 是否允许选中
-
-### 方法
-
-#### enable
-
-开始编辑，绘制完成之后会自动结束。
-
-#### disable
-
-结束编辑
-
 ### 事件

 #### draw.create
--- a/examples/draw/basic/API.en.md
+++ b/examples/draw/basic/API.en.md
@ -0,0 +1,272 @@
+---
+title: API
+---
+地图绘制组件，支持点、线、面， 圆、矩形、的绘制编辑。
+
+# 使用
+
+**using modules**
+
+```javascript
+import { DrawControl } from '@antv/l7-draw';
+```
+
+**CDN 版本引用**
+
+```html
+<head>
+  <! --引入最新版的L7-Draw -->
+  <script src="https://unpkg.com/@antv/l7-draw"></script>
+</head>
+```
+
+### 参数
+
+```javascript
+const control = new DrawControl(scene, option);
+```
+
+#### scene
+
+scene 对象
+
+#### options
+
+control 配置项
+
+| name     | Type                                          | Default    | Description                     |
+| -------- | --------------------------------------------- | ---------- | ------------------------------- |
+| position | `bottomright、topright、 bottomleft’ topleft` | `topright` | 组件位置                        |
+| layout   | `horizontal、 vertical`                       | `vertical` | 组件布局 支持水平和垂直两种布局 |
+| controls | `controlOptions`                              |            | 设置 UI 组件添加哪些绘制工具    |
+| style    |                                               |            | 地图绘制样式                    |
+
+**controlOptions**
+UI 组件配置项
+
+- point `boolean | drawOption` 绘制点工具配置
+- line `boolean | drawOption` 绘制线工具配置
+- polygon `boolean | drawOption` 绘制面工具配置
+- circle `boolean | drawOption` 绘制圆工具配置
+- rect `boolean | drawOption` 绘制矩形工具配置
+- delete `boolean | drawOption` 添加删除工具
+
+默认配置
+
+```
+  {
+    point: true,
+    line: true,
+    polygon: true,
+    rect: true,
+    circle: true,
+    delete: true
+  }
+```
+
+示例
+
+```
+{
+    point: false,
+    line: {
+      editEnable: false,
+    },
+    polygon: true,
+    rect: true,
+    circle: true,
+    delete: false
+```
+
+### 添加到地图
+
+```javascript
+scene.addControl(control);
+```
+
+### 从地图中移除
+
+```javascript
+scene.removeControl(control);
+```
+
+### Draw Type
+
+可以不依赖 Draw UI 组件，独立的使用每一个 Draw
+
+#### DrawCircle
+
+绘制圆形
+
+```javascript
+import { DrawCircle } from '@antv/l7-draw';
+const drawCircle = new DrawCircle(scene);
+drawCircle.enable();
+```
+
+#### DrawRect
+
+绘制四边形
+
+```javascript
+import { DrawRect } from '@antv/l7-draw';
+const drawRect = new DrawRect(scene);
+drawRect.enable();
+```
+
+#### DrawLine
+
+绘制路径
+
+```javascript
+import { DrawLine } from '@antv/l7-draw';
+const drawLine = new DrawLine(scene);
+drawLine.enable();
+```
+
+#### DrawPoint
+
+绘制点
+
+```javascript
+import { DrawPoint } from '@antv/l7-draw';
+const drawPoint = new DrawPoint(scene);
+drawPoint.enable();
+```
+
+#### DrawPolygon
+
+绘制多边形
+
+```javascript
+import { DrawPolygon } from '@antv/l7-draw';
+const drawPoint = new DrawPolygon(scene);
+drawPoint.enable();
+```
+
+### 配置项 DrawOption
+
+- editEnable boolean 是否允许编辑
+- selectEnable boolean 是否允许选中
+
+### 方法
+
+#### enable
+
+开始编辑，绘制完成之后会自动结束。
+
+#### disable
+
+结束编辑
+
+### 事件
+
+#### draw.create
+
+绘制完成时触发该事件
+
+#### draw.delete
+
+图形删除时触发该事件
+
+#### draw.update
+
+图形更新时触发该事件，图形的平移，顶点的编辑
+
+### style
+
+- active 绘制过程中高亮颜色
+- normal 正常显示状态
+
+```javascript
+const style = {
+  active: {
+    point: {
+      type: 'PointLayer',
+      shape: 'circle',
+      color: '#fbb03b',
+      size: 5,
+      style: {
+        stroke: '#fff',
+        strokeWidth: 2,
+      },
+    },
+    line: {
+      type: 'LineLayer',
+      shape: 'line',
+      color: '#fbb03b',
+      size: 1,
+      style: {
+        opacity: 1,
+        lineType: 'dash',
+        dashArray: [2, 2],
+      },
+    },
+    polygon: {
+      shape: 'fill',
+      color: '#fbb03b',
+      style: {
+        opacity: 0.1,
+        stroke: '#fbb03b',
+        strokeWidth: 1,
+        strokeOpacity: 1,
+        lineType: 'dash',
+        dashArray: [2, 2],
+      },
+    },
+  },
+  normal: {
+    polygon: {
+      type: 'PolygonLayer',
+      shape: 'fill',
+      color: '#3bb2d0',
+      style: {
+        opacity: 0.1,
+        stroke: '#3bb2d0',
+        strokeWidth: 1,
+        strokeOpacity: 1,
+        lineType: 'solid',
+        dashArray: [2, 2],
+      },
+    },
+    line: {
+      type: 'LineLayer',
+      shape: 'line',
+      size: 1,
+      color: '#3bb2d0',
+      style: {
+        opacity: 1,
+      },
+    },
+    point: {
+      type: 'PointLayer',
+      shape: 'circle',
+      color: '#3bb2d0',
+      size: 3,
+      style: {
+        stroke: '#fff',
+        strokeWidth: 2,
+      },
+    },
+  },
+  normal_point: {
+    type: 'PointLayer',
+    shape: 'circle',
+    color: '#3bb2d0',
+    size: 3,
+    style: {
+      stroke: '#fff',
+      strokeWidth: 2,
+    },
+  },
+  mid_point: {
+    point: {
+      type: 'PointLayer',
+      shape: 'circle',
+      color: '#fbb03b',
+      size: 3,
+      style: {},
+    },
+  },
+};
+```
--- a/examples/draw/basic/API.zh.md
+++ b/examples/draw/basic/API.zh.md
@ -0,0 +1,209 @@
+---
+title: API
+---
+地图绘制组件，支持点、线、面， 圆、矩形、的绘制编辑。
+
+# 使用
+
+**using modules**
+
+```javascript
+import { DrawControl } from '@antv/l7-draw';
+```
+
+**CDN 版本引用**
+
+```html
+<head>
+  <! --引入最新版的L7-Draw -->
+  <script src="https://unpkg.com/@antv/l7-draw"></script>
+</head>
+```
+
+### DrawCircle
+
+绘制圆形
+
+```javascript
+import { DrawCircle } from '@antv/l7-draw';
+const drawCircle = new DrawCircle(scene);
+drawCircle.enable();
+```
+
+### DrawRect
+
+绘制矩形
+
+```javascript
+import { DrawRect } from '@antv/l7-draw';
+const drawRect = new DrawRect(scene);
+drawRect.enable();
+```
+
+### DrawLine
+
+绘制路径
+
+```javascript
+import { DrawLine } from '@antv/l7-draw';
+const drawLine = new DrawLine(scene);
+drawLine.enable();
+```
+
+#### DrawPoint
+
+绘制点
+
+```javascript
+import { DrawPoint } from '@antv/l7-draw';
+const drawPoint = new DrawPoint(scene);
+drawPoint.enable();
+```
+
+#### DrawPolygon
+
+绘制多边形
+
+```javascript
+import { DrawPolygon } from '@antv/l7-draw';
+const drawPoint = new DrawPolygon(scene);
+drawPoint.enable();
+```
+
+### 配置项 DrawOption
+
+- data `geojson' 初始化数据仅支持 Polygon, Line, Point, 不支持MultPolygon,Circle 可用编辑现有数据
+- editEnable boolean 是否允许编辑
+- selectEnable boolean 是否允许选中
+- style 绘制样式
+
+### 方法
+
+#### enable
+
+开始编辑，绘制完成之后会自动结束。
+
+```javascript
+  draw.enable();
+```
+
+#### disable
+结束绘制
+
+```javascript
+  draw.disable();
+```
+
+结束编辑
+
+### 事件
+
+#### draw.create
+
+绘制完成时触发该事件
+
+#### draw.delete
+
+图形删除时触发该事件
+
+#### draw.update
+
+图形更新时触发该事件，图形的平移，顶点的编辑
+
+### style
+
+- active 绘制过程中高亮颜色
+- normal 正常显示状态
+
+```javascript
+const style = {
+  active: {
+    point: {
+      type: 'PointLayer',
+      shape: 'circle',
+      color: '#fbb03b',
+      size: 5,
+      style: {
+        stroke: '#fff',
+        strokeWidth: 2,
+      },
+    },
+    line: {
+      type: 'LineLayer',
+      shape: 'line',
+      color: '#fbb03b',
+      size: 1,
+      style: {
+        opacity: 1,
+        lineType: 'dash',
+        dashArray: [2, 2],
+      },
+    },
+    polygon: {
+      shape: 'fill',
+      color: '#fbb03b',
+      style: {
+        opacity: 0.1,
+        stroke: '#fbb03b',
+        strokeWidth: 1,
+        strokeOpacity: 1,
+        lineType: 'dash',
+        dashArray: [2, 2],
+      },
+    },
+  },
+  normal: {
+    polygon: {
+      type: 'PolygonLayer',
+      shape: 'fill',
+      color: '#3bb2d0',
+      style: {
+        opacity: 0.1,
+        stroke: '#3bb2d0',
+        strokeWidth: 1,
+        strokeOpacity: 1,
+        lineType: 'solid',
+        dashArray: [2, 2],
+      },
+    },
+    line: {
+      type: 'LineLayer',
+      shape: 'line',
+      size: 1,
+      color: '#3bb2d0',
+      style: {
+        opacity: 1,
+      },
+    },
+    point: {
+      type: 'PointLayer',
+      shape: 'circle',
+      color: '#3bb2d0',
+      size: 3,
+      style: {
+        stroke: '#fff',
+        strokeWidth: 2,
+      },
+    },
+  },
+  normal_point: {
+    type: 'PointLayer',
+    shape: 'circle',
+    color: '#3bb2d0',
+    size: 3,
+    style: {
+      stroke: '#fff',
+      strokeWidth: 2,
+    },
+  },
+  mid_point: {
+    point: {
+      type: 'PointLayer',
+      shape: 'circle',
+      color: '#fbb03b',
+      size: 3,
+      style: {},
+    },
+  },
+};
+```
--- a/examples/draw/basic/demo/meta.json
+++ b/examples/draw/basic/demo/meta.json
@ -8,12 +8,12 @@
    {
      "filename": "draw_circle.js",
      "title": "绘制圆",
-      "screenshot": "https://gw.alipayobjects.com/mdn/rms_855bab/afts/img/A*nMVTRY3xCuoAAAAAAAAAAABkARQnAQ"
+      "screenshot": "https://gw.alipayobjects.com/mdn/rms_8e1672/afts/img/A*pawjTqbwM4gAAAAAAAAAAABkARQnAQ"
    },
    {
      "filename": "draw_polygon.js",
      "title": "绘制多边形",
-      "screenshot": "https://gw.alipayobjects.com/mdn/rms_855bab/afts/img/A*nMVTRY3xCuoAAAAAAAAAAABkARQnAQ"
+      "screenshot": "https://gw.alipayobjects.com/mdn/rms_8e1672/afts/img/A*m1eqS4gwgz4AAAAAAAAAAABkARQnAQ"
    }
  ]
 }
--- a/examples/draw/basic/design.en.md
+++ b/examples/draw/basic/design.en.md
@ -0,0 +1,3 @@
+---
+title: introduction
+---
--- a/examples/draw/basic/design.zh.md
+++ b/examples/draw/basic/design.zh.md
@ -0,0 +1,54 @@
+---
+title: 如何使用
+---
+图形绘制包括4种状态
+
+- 绘制 绘制图形 
+- 选中 平移图形
+- 编辑 图形顶点编辑
+- 完成态 绘制完成，点击进入选中太
+
+
+### 绘制圆
+
+ #### 绘制态
+
+1. 点击，![l7-draw-cross](https://gw.alipayobjects.com/mdn/rms_8e1672/afts/img/A*UnSAS6X_3AQAAAAAAAAAAABkARQnAQ)地图生成第一个点既圆心
+2. 拖动，![l7-draw-move](https://gw.alipayobjects.com/mdn/rms_8e1672/afts/img/A*eVVASaKz79UAAAAAAAAAAABkARQnAQ)拖动过程中根据当前点实时计算距离圆心的距离，生成当前圆
+3. 拖动结束，绘制完成，进入选中状态
+
+#### 选中态
+  
+  鼠标点击图形进入编辑态，鼠标点击图形外部，取消选中
+
+1. 鼠标 mouseenter 图形鼠标 move
+2. 拖到鼠标即可实现图形的平移
+3. 鼠标点击图形进入编辑态，鼠标点击图形外部
+
+#### 编辑态
+
+鼠标点击图形外部，完成编辑
+
+1. 鼠标滑入顶点，鼠标变成 move
+1. 拖动顶点即可改变圆的半径
+
+### 绘制多边形
+
+ #### 绘制态
+ 1. 点击，![l7-draw-cross](https://gw.alipayobjects.com/mdn/rms_8e1672/afts/img/A*UnSAS6X_3AQAAAAAAAAAAABkARQnAQ) 生成第一个点
+ 2. 连续点击，![l7-draw-cross](https://gw.alipayobjects.com/mdn/rms_8e1672/afts/img/A*UnSAS6X_3AQAAAAAAAAAAABkARQnAQ) 依次生成多边形的点序列，点击过程中会始终显示第一个点和最后一个点
+ 3. 结束，双击地图结束，或者点击第一个点或最后一个点结束 ![l7-draw-pointer](https://gw.alipayobjects.com/mdn/rms_8e1672/afts/img/A*3siqTqg0oX4AAAAAAAAAAABkARQnAQ)
+
+ #### 选中态
+  
+  鼠标点击图形进入选中态，选中态可对图形平移，鼠标点击图形外部，取消选中
+
+ #### 编辑态
+  
+  鼠标点击图形进入编辑态，编辑态会标注多边形顶点，和各个顶点的中心点
+  鼠标点击图形外部，取消选中
+
+  1. 添加顶点，点击中心点![l7-draw-pointer](https://gw.alipayobjects.com/mdn/rms_8e1672/afts/img/A*3siqTqg0oX4AAAAAAAAAAABkARQnAQ)，为多边形新增一个顶点
+  2. 移动顶点，拖动顶点可对顶点移动
+ 
+
--- a/gatsby-config.js
+++ b/gatsby-config.js
@ -77,6 +77,14 @@ module.exports = {
        },
        order: 1
      },
+      {
+        slug: 'api/district',
+        title: {
+          zh: '行政区划',
+          en: 'District'
+        },
+        order: 2
+      },
      {
        slug: 'api/draw',
        title: {
--- a/packages/district/rollup.config.js
+++ b/packages/district/rollup.config.js
@ -25,7 +25,7 @@ export default {
    commonjs({
      namedExports: {
        eventemitter3: [ 'EventEmitter' ],
-        lodash: [ 'merge', 'clone' ]
+        lodash: [ 'merge', 'mergeWith', 'clone', 'isObject' ]
      }
    }),
    buble({
--- a/packages/district/src/config.ts
+++ b/packages/district/src/config.ts
@ -5,7 +5,7 @@ let DataConfig: { [key: string]: any } = {
    fill: {
      type: 'pbf',
      url:
-        '//gw.alipayobjects.com/os/bmw-prod/21bdf832-1dfc-4cae-92d1-aa8d156df40f.bin',
+        '//gw.alipayobjects.com/os/bmw-prod/56cb34eb-cf61-4512-a6f3-fe4a45a7b1a3.bin',
    },
    line: {
      type: 'pbf',
--- a/packages/district/src/layer/baseLayer.ts
+++ b/packages/district/src/layer/baseLayer.ts
@ -12,10 +12,12 @@ import { EventEmitter } from 'eventemitter3';
 // @ts-ignore
 import geobuf from 'geobuf';
 // tslint:disable-next-line: no-submodule-imports
-import merge from 'lodash/mergeWith';
+import isObject from 'lodash/isObject';
+// tslint:disable-next-line: no-submodule-imports
+import mergeWith from 'lodash/mergeWith';
 // @ts-ignore
 import Pbf from 'pbf';
-import { IDistrictLayerOption } from './interface';
+import { AttributeType, IDistrictLayerOption } from './interface';

 function mergeCustomizer(objValue: any, srcValue: any) {
  if (Array.isArray(srcValue)) {
@ -26,6 +28,7 @@ export default class BaseLayer extends EventEmitter {
  public fillLayer: ILayer;
  public lineLayer: ILayer;
  public labelLayer: ILayer;
+  public bubbleLayer: ILayer;
  protected scene: Scene;
  protected options: IDistrictLayerOption;
  protected layers: ILayer[] = [];
@ -35,7 +38,7 @@ export default class BaseLayer extends EventEmitter {
  constructor(scene: Scene, option: Partial<IDistrictLayerOption> = {}) {
    super();
    this.scene = scene;
-    this.options = merge(this.getDefaultOption(), option, mergeCustomizer);
+    this.options = mergeWith(this.getDefaultOption(), option, mergeCustomizer);
  }

  public destroy() {
@ -51,7 +54,7 @@ export default class BaseLayer extends EventEmitter {
  }

  public setOption(newOption: { [key: string]: any }) {
-    this.options = merge(this.options, newOption);
+    this.options = mergeWith(this.options, newOption);
  }

  public updateData(
@ -102,10 +105,20 @@ export default class BaseLayer extends EventEmitter {
        textAllowOverlap: true,
        opacity: 1,
      },
+      bubble: {
+        enable: false,
+        shape: 'circle',
+        color: '#1AA9FF',
+        size: 15,
+        style: {
+          opacity: 1,
+          stroke: '#fff',
+          strokeWidth: 1,
+        },
+      },
      fill: {
        scale: null,
-        field: null,
-        values: '#fff',
+        color: '#ddd',
        style: {
          opacity: 1.0,
        },
@ -128,7 +141,9 @@ export default class BaseLayer extends EventEmitter {
      chinaNationalWidth: 1,
      popup: {
        enable: true,
-        triggerEvent: 'mousemove',
+        openTriggerEvent: 'mouseenter',
+        closeTriggerEvent: 'mouseout',
+        option: {},
        Html: (properties: any) => {
          return `${properties.name}`;
        },
@ -155,14 +170,11 @@ export default class BaseLayer extends EventEmitter {
              },
            ],
    });
-    fill.field
-      ? fillLayer.color(fill.field, fill.values)
-      : fillLayer.color(fill.values as string);
-
-    if (fill.scale) {
+    this.setLayerAttribute(fillLayer, 'color', fill.color as AttributeType);
+    if (fill.scale && isObject(fill.color)) {
      fillLayer.scale('color', {
-        type: 'quantile',
-        field: fill.field as string,
+        type: fill.scale,
+        field: fill.color.field as string,
      });
    }
    fillLayer
@ -174,16 +186,26 @@ export default class BaseLayer extends EventEmitter {
    this.fillLayer = fillLayer;
    this.layers.push(fillLayer);
    this.scene.addLayer(fillLayer);
+    if (this.options.bubble && this.options.bubble?.enable !== false) {
+      const labeldata = fillCountry.features.map((feature: any) => {
+        return {
+          ...feature.properties,
+          center: [feature.properties.x, feature.properties.y],
+        };
+      });
+      this.addBubbleLayer(labeldata);
+    }
    if (popup.enable) {
      this.addPopup();
    }
+
    this.emit('loaded');
  }

  protected addFillLine(provinceLine: any) {
    const { stroke, strokeWidth, zIndex } = this.options;
    const layer2 = new LineLayer({
-      zIndex: zIndex + 1,
+      zIndex: zIndex + 0.1,
    })
      .source(provinceLine)
      .color(stroke)
@ -203,10 +225,46 @@ export default class BaseLayer extends EventEmitter {
    this.labelLayer = labelLayer;
  }

+  protected addBubbleLayer(labelData: any, type: string = 'json') {
+    const { bubble, zIndex, data = [], joinBy } = this.options;
+    const bubbleLayer = new PointLayer({
+      zIndex: zIndex + 0.3,
+    }).source(labelData, {
+      parser: {
+        type,
+        coordinates: 'center',
+      },
+      transforms:
+        data.length === 0
+          ? []
+          : [
+              {
+                type: 'join',
+                sourceField: joinBy[1], // data1 对应字段名
+                targetField: joinBy[0], // data 对应字段名 绑定到的地理数据
+                data,
+              },
+            ],
+    });
+    this.setLayerAttribute(bubbleLayer, 'color', bubble.color as AttributeType);
+    this.setLayerAttribute(bubbleLayer, 'size', bubble.size as AttributeType);
+    this.setLayerAttribute(bubbleLayer, 'shape', bubble.shape as AttributeType);
+    if (bubble.scale) {
+      bubbleLayer.scale(bubble.scale.field, {
+        type: bubble.scale.type,
+      });
+    }
+    bubbleLayer.style(bubble.style);
+    this.scene.addLayer(bubbleLayer);
+    this.layers.push(bubbleLayer);
+    this.bubbleLayer = bubbleLayer;
+    return bubbleLayer;
+  }
+
  protected addLabel(labelData: any, type: string = 'json') {
    const { label, zIndex } = this.options;
    const labelLayer = new PointLayer({
-      zIndex: zIndex + 2,
+      zIndex: zIndex + 0.4,
    })
      .source(labelData, {
        parser: {
@ -228,13 +286,42 @@ export default class BaseLayer extends EventEmitter {

  protected addPopup() {
    const { popup } = this.options;
-    this.fillLayer.on('mousemove', (e) => {
+    let popupLayer;
+    if (popup.triggerLayer) {
+      popupLayer =
+        popup.triggerLayer === 'bubble' ? this.bubbleLayer : this.fillLayer;
+    } else {
+      popupLayer = this.options.bubble.enable
+        ? this.bubbleLayer
+        : this.fillLayer;
+    }
+    popupLayer.on(popup.openTriggerEvent as string, (e) => {
+      const html = popup.Html
+        ? popup.Html(e.feature.properties ? e.feature.properties : e.feature)
+        : '';
      this.popup = new Popup({
        closeButton: false,
+        ...popup.option,
      })
        .setLnglat(e.lngLat)
-        .setHTML(popup.Html ? popup.Html(e.feature.properties) : '');
+        .setHTML(html);
      this.scene.addPopup(this.popup);
    });
+
+    popupLayer.on(popup.closeTriggerEvent as string, (e) => {
+      this.popup.remove();
+    });
+  }
+
+  private setLayerAttribute(
+    layer: ILayer,
+    type: 'color' | 'size' | 'shape',
+    attr: AttributeType,
+  ) {
+    if (isObject(attr)) {
+      layer[type](attr.field, attr.values);
+    } else {
+      layer[type](attr);
+    }
  }
 }
--- a/packages/district/src/layer/country.ts
+++ b/packages/district/src/layer/country.ts
@ -16,12 +16,6 @@ export default class CountryLayer extends BaseLayer {
    const { depth } = this.options;
    this.loadData().then(([fillData, fillLabel]) => {
      this.addFillLayer(fillData);
-      // const labeldata = fillData.features.map((feature: any) => {
-      //   return {
-      //     ...feature.properties,
-      //     center: [feature.properties.x, feature.properties.y],
-      //   };
-      // });
      if (fillLabel && this.options.label?.enable) {
        this.addLabelLayer(
          fillLabel.filter((v: any) => {
@ -111,7 +105,7 @@ export default class CountryLayer extends BaseLayer {
    } = this.options;
    // 添加国界线
    const lineLayer = new LineLayer({
-      zIndex: zIndex + 1,
+      zIndex: zIndex + 0.1,
    })
      .source(boundaries)
      .size('type', (v: string) => {
@ -139,7 +133,7 @@ export default class CountryLayer extends BaseLayer {
      });
    // 添加未定国界
    const lineLayer2 = new LineLayer({
-      zIndex: zIndex + 1,
+      zIndex: zIndex + 0.1,
    })
      .source(boundaries2)
      .size(nationalWidth)
@ -210,7 +204,7 @@ export default class CountryLayer extends BaseLayer {
  private addText(labelData: any, option: any, offset: [number, number]) {
    const { label, zIndex } = this.options;
    const labelLayer = new PointLayer({
-      zIndex: zIndex + 2,
+      zIndex: zIndex + 0.4,
      ...option,
    })
      .source(labelData, {
@ -220,7 +214,7 @@ export default class CountryLayer extends BaseLayer {
        },
      })
      .color(label.color as StyleAttrField)
-      .shape(label.field as StyleAttrField, 'text')
+      .shape('name', 'text')
      .size(10)
      .style({
        opacity: label.opacity,
--- a/packages/district/src/layer/drillDown.ts
+++ b/packages/district/src/layer/drillDown.ts
@ -1,35 +1,57 @@
 import { Scene } from '@antv/l7';
+// tslint:disable-next-line: no-submodule-imports
+import mergeWith from 'lodash/mergeWith';
 import CityLayer from './city';
 import CountryLayer from './country';
-import { adcodeType, IDistrictLayerOption } from './interface';
+import { adcodeType, IDrillDownOption } from './interface';
 import ProvinceLayer from './province';
-
+function mergeCustomizer(objValue: any, srcValue: any) {
+  if (Array.isArray(srcValue)) {
+    return srcValue;
+  }
+}
 export default class DrillDownLayer {
-  private provinceLayer: ProvinceLayer;
-  private cityLayer: CityLayer;
-  private countryLayer: CountryLayer;
+  private options: Partial<IDrillDownOption>;
+  private cityLayer: ProvinceLayer;
+  private countyLayer: CityLayer;
+  private provinceLayer: CountryLayer;
  private scene: Scene;
-  private drillState: 'province' | 'city' | 'county' = 'province';
-  constructor(scene: Scene, option: Partial<IDistrictLayerOption>) {
-    const cfg = this.getDefaultOption();
+  private drillState: 0 | 1 | 2 = 0;
+  private layers: any = [];
+  constructor(scene: Scene, option: Partial<IDrillDownOption>) {
+    this.options = mergeWith(this.getDefaultOption(), option, mergeCustomizer);
    this.scene = scene;
-    this.countryLayer = new CountryLayer(scene, option);
-    this.provinceLayer = new ProvinceLayer(scene, cfg.city);
-    this.cityLayer = new CityLayer(scene, cfg.county);
+    this.provinceLayer = new CountryLayer(
+      scene,
+      this.getLayerOption('province'),
+    );
+    this.cityLayer = new ProvinceLayer(scene, this.getLayerOption('city'));
+    this.countyLayer = new CityLayer(scene, this.getLayerOption('county'));
    this.scene.setMapStatus({ doubleClickZoom: false });
-    this.countryLayer.on('loaded', () => {
-      this.addCountryEvent();
-    });
-    this.provinceLayer.on('loaded', () => {
-      this.addProvinceEvent();
-    });
-    this.cityLayer.on('loaded', () => {
-      this.addCityEvent();
-    });
+    if (!this.options.customTrigger) {
+      this.provinceLayer.on('loaded', () => {
+        this.addCountryEvent();
+        this.layers.push(this.provinceLayer);
+      });
+      this.cityLayer.on('loaded', () => {
+        this.addProvinceEvent();
+        this.layers.push(this.cityLayer);
+      });
+      this.countyLayer.on('loaded', () => {
+        this.addCityEvent();
+        this.layers.push(this.cityLayer);
+      });
+    }
  }
  public getDefaultOption() {
    return {
-      province: {},
+      drillDepth: 2,
+      customTrigger: false,
+      drillDownTriggerEvent: 'click',
+      drillUpTriggerEvent: 'unclick',
+      provinceData: [],
+      cityData: [],
+      countyData: [],
      city: {
        adcode: [],
      },
@ -39,43 +61,43 @@ export default class DrillDownLayer {
    };
  }
  public addCountryEvent() {
-    this.countryLayer.fillLayer.on('click', (e: any) => {
-      this.countryLayer.hide();
-      // 更新市级行政区划
-      // this.provinceLayer.updateDistrict([e.feature.properties.adcode]);
-      // this.drillState = 'city';
-      this.drillDown(e.feature.properties.adcode);
-    });
+    const { drillDownTriggerEvent, drillUpTriggleEvent } = this.options;
+    this.provinceLayer.fillLayer.on(
+      drillDownTriggerEvent as string,
+      (e: any) => {
+        this.provinceLayer.hide();
+        this.drillDown(e.feature.properties.adcode);
+      },
+    );
  }

  public addProvinceEvent() {
-    this.provinceLayer.fillLayer.on('undblclick', () => {
+    const { drillDownTriggerEvent, drillUpTriggleEvent } = this.options;
+    this.cityLayer.fillLayer.on(drillUpTriggleEvent as string, () => {
      this.drillUp();
    });
-    this.provinceLayer.fillLayer.on('click', (e: any) => {
-      // this.provinceLayer.hide();
-      // const adcode = e.feature.properties.adcode.toFixed(0);
+    this.cityLayer.fillLayer.on(drillDownTriggerEvent as string, (e: any) => {
      this.drillDown(e.feature.properties.adcode);
-      // if (adcode.substr(2, 2) === '00') {
-      //   adcode = adcode.substr(0, 2) + '0100';
-      // }
-      // // 更新县级行政区划
-      // this.cityLayer.updateDistrict([adcode]);
-      // this.drillState = 'county';
-      // this.showCityView(adcode);
    });
  }

  public addCityEvent() {
-    this.cityLayer.fillLayer.on('undblclick', () => {
+    const { drillDownTriggerEvent, drillUpTriggleEvent } = this.options;
+    this.countyLayer.fillLayer.on(drillUpTriggleEvent as string, () => {
      this.drillUp();
    });
  }

+  public show() {
+    this.layers.forEach((layer: any) => layer.show());
+  }
+
+  public hide() {
+    this.layers.forEach((layer: any) => layer.hide());
+  }
+
  public destroy() {
-    this.countryLayer.destroy();
-    this.provinceLayer.destroy();
-    this.cityLayer.destroy();
+    this.layers.forEach((layer: any) => layer.destroy());
  }

  public showProvinceView(
@ -83,27 +105,27 @@ export default class DrillDownLayer {
    newData: Array<{ [key: string]: any }> = [],
    joinByField?: [string, string],
  ) {
-    this.provinceLayer.show();
-    this.provinceLayer.updateDistrict(adcode, newData, joinByField);
-    this.provinceLayer.fillLayer.fitBounds();
-    this.cityLayer.hide();
-    this.drillState = 'city';
+    this.cityLayer.show();
+    this.cityLayer.updateDistrict(adcode, newData, joinByField);
+    this.cityLayer.fillLayer.fitBounds();
+    this.countyLayer.hide();
+    this.drillState = 1;
  }
  public showCityView(
    code: adcodeType,
    newData: Array<{ [key: string]: any }> = [],
    joinByField?: [string, string],
  ) {
-    this.cityLayer.show();
+    this.countyLayer.show();
    let adcode = `${code}`;
    if (adcode.substr(2, 2) === '00') {
      adcode = adcode.substr(0, 2) + '0100';
    }
    // 更新县级行政区划
-    this.cityLayer.updateDistrict(adcode, newData, joinByField);
-    this.cityLayer.fillLayer.fitBounds();
-    this.provinceLayer.hide();
-    this.drillState = 'county';
+    this.countyLayer.updateDistrict(adcode, newData, joinByField);
+    this.countyLayer.fillLayer.fitBounds();
+    this.cityLayer.hide();
+    this.drillState = 2;
  }

  /**
@ -111,17 +133,17 @@ export default class DrillDownLayer {
   */
  public drillUp() {
    switch (this.drillState) {
-      case 'county':
+      case 2:
+        this.cityLayer.show();
+        this.cityLayer.fillLayer.fitBounds();
+        this.countyLayer.hide();
+        this.drillState = 1;
+        break;
+      case 1:
        this.provinceLayer.show();
        this.provinceLayer.fillLayer.fitBounds();
        this.cityLayer.hide();
-        this.drillState = 'city';
-        break;
-      case 'city':
-        this.countryLayer.show();
-        this.countryLayer.fillLayer.fitBounds();
-        this.provinceLayer.hide();
-        this.drillState = 'province';
+        this.drillState = 0;
        break;
    }
  }
@ -130,13 +152,51 @@ export default class DrillDownLayer {
    newData: Array<{ [key: string]: any }> = [],
    joinByField?: [string, string],
  ) {
+    const { drillDepth } = this.options;
+    if (this.drillState === drillDepth) {
+      return;
+    }
    switch (this.drillState) {
-      case 'province':
-        this.showProvinceView(adcode);
+      case 0:
+        this.showProvinceView(adcode, newData, joinByField);
        break;
-      case 'city':
-        this.showCityView(adcode);
+      case 1:
+        this.showCityView(adcode, newData, joinByField);
        break;
    }
  }
+
+  public updateData(
+    layer: 'province' | 'city' | 'county',
+    newData: Array<{ [key: string]: any }>,
+    joinByField?: [string, string],
+  ) {
+    switch (layer) {
+      case 'province':
+        this.provinceLayer.updateData(newData, joinByField);
+        break;
+      case 'city':
+        this.cityLayer.updateData(newData, joinByField);
+        break;
+      case 'county':
+        this.countyLayer.updateData(newData, joinByField);
+    }
+  }
+
+  private getLayerOption(type: 'province' | 'city' | 'county') {
+    const { joinBy, label, bubble, fill, popup, province } = this.options;
+    const datatype = (type + 'Data') as
+      | 'provinceData'
+      | 'cityData'
+      | 'countyData';
+    return {
+      data: this.options[datatype],
+      joinBy,
+      label,
+      bubble,
+      fill,
+      popup,
+      ...this.options[type],
+    };
+  }
 }
--- a/packages/district/src/layer/interface.ts
+++ b/packages/district/src/layer/interface.ts
@ -1,4 +1,9 @@
-import { ScaleTypeName, StyleAttributeOption } from '@antv/l7';
+import {
+  IPopupOption,
+  ScaleTypeName,
+  StyleAttributeField,
+  StyleAttributeOption,
+} from '@antv/l7';
 export interface ILabelOption {
  enable: boolean;
  color: string;
@ -9,6 +14,62 @@ export interface ILabelOption {
  textAllowOverlap: boolean;
  opacity: number;
 }
+
+export interface IAttributeOption {
+  field: StyleAttributeField;
+  values: StyleAttributeOption;
+}
+
+export type AttributeType = IAttributeOption | string | number;
+export interface IPopupOptions {
+  enable: boolean;
+  openTriggerEvent: TriggeEventType;
+  closeTriggerEvent: TriggeEventType;
+  triggerLayer: 'fill' | 'bubble';
+  option?: Partial<IPopupOption>;
+  Html: (properties: any) => string;
+}
+
+export interface IFillOptions {
+  scale: ScaleTypeName | null;
+  // field: string | null;
+  color: AttributeType;
+  values: StyleAttributeOption;
+  style: any;
+  activeColor: string;
+}
+export type TriggeEventType =
+  | 'mousemove'
+  | 'click'
+  | 'mousedown'
+  | 'mouseenter'
+  | 'mouseout'
+  | 'dblclick'
+  | 'contextmenu'
+  | 'mouseup';
+
+export type DrillUpTriggeEventType =
+  | 'mousemove'
+  | 'unclick'
+  | 'unmousedown'
+  | 'undblclick'
+  | 'uncontextmenu'
+  | 'unmouseup';
+export interface IBubbleOption {
+  enable: boolean;
+  shape: AttributeType;
+  size: AttributeType;
+  color: AttributeType;
+  scale: {
+    field: string;
+    type: ScaleTypeName;
+  };
+  style: {
+    opacity: number;
+    stroke: string;
+    strokeWidth: number;
+  };
+}
 export type adcodeType = string[] | string | number | number[];
 export interface IDistrictLayerOption {
  zIndex: number;
@ -17,13 +78,8 @@ export interface IDistrictLayerOption {
  adcode: adcodeType;
  depth: 0 | 1 | 2 | 3;
  label: Partial<ILabelOption>;
-  fill: Partial<{
-    scale: ScaleTypeName | null;
-    field: string | null;
-    values: StyleAttributeOption;
-    style: any;
-    activeColor: string;
-  }>;
+  bubble: Partial<IBubbleOption>;
+  fill: Partial<IFillOptions>;
  autoFit: boolean;
  stroke: string;
  strokeWidth: number;
@ -33,16 +89,34 @@ export interface IDistrictLayerOption {
  cityStrokeWidth: number;
  countyStroke: string;
  countyStrokeWidth: number;
-
  coastlineStroke: string;
  coastlineWidth: number;
  nationalStroke: string;
  nationalWidth: number;
  chinaNationalStroke: string;
  chinaNationalWidth: number;
-  popup: Partial<{
-    enable: boolean;
-    triggerEvent: 'mousemove' | 'click';
-    Html: (properties: any) => string;
-  }>;
+  popup: Partial<IPopupOptions>;
+}
+interface IDrawOption {
+  joinBy: [string, string];
+  label: Partial<ILabelOption>;
+  bubble: Partial<IBubbleOption>;
+  fill: Partial<IFillOptions>;
+}
+export interface IDrillDownOption {
+  drillDepth: 0 | 1 | 2;
+  customTrigger: boolean;
+  drillDownTriggerEvent: TriggeEventType;
+  drillUpTriggleEvent: TriggeEventType & DrillUpTriggeEventType;
+  provinceData?: Array<{ [key: string]: any }>;
+  cityData?: Array<{ [key: string]: any }>;
+  countyData?: Array<{ [key: string]: any }>;
+  joinBy: [string, string];
+  label: Partial<ILabelOption>;
+  bubble: Partial<IBubbleOption>;
+  fill: Partial<IFillOptions>;
+  popup: Partial<IPopupOptions>;
+  province: Partial<IDrawOption>;
+  city: Partial<IDrawOption>;
+  county: Partial<IDrawOption>;
 }
--- a/packages/district/src/layer/province.ts
+++ b/packages/district/src/layer/province.ts
@ -38,6 +38,15 @@ export default class ProvinceLayer extends BaseLayer {
    const fillData = this.filterData(this.fillRawData, adcode);
    const lineData = this.filterData(this.lineRawData, adcode);
    const labelData = this.filterLabelData(this.labelRawData, adcode);
+    if (this.options.bubble && this.options.bubble?.enable !== false) {
+      const bubbleData = fillData.features.map((feature: any) => {
+        return {
+          ...feature.properties,
+          center: [feature.properties.x, feature.properties.y],
+        };
+      });
+      this.bubbleLayer.setData(bubbleData);
+    }
    this.fillData = fillData;
    this.updateData(newData, joinByField);
    this.lineLayer.setData(lineData);
@ -54,17 +63,6 @@ export default class ProvinceLayer extends BaseLayer {
        field: 'NAME_CHN',
        textAllowOverlap: false,
      },
-      fill: {
-        field: 'NAME_CHN',
-        values: [
-          '#feedde',
-          '#fdd0a2',
-          '#fdae6b',
-          '#fd8d3c',
-          '#e6550d',
-          '#a63603',
-        ],
-      },
      popup: {
        enable: true,
        Html: (props: any) => {
--- a/packages/district/src/layer/world.ts
+++ b/packages/district/src/layer/world.ts
@ -71,7 +71,7 @@ export default class WorldLayer extends BaseLayer {
    } = this.options;
    // 添加国界线
    const lineLayer = new LineLayer({
-      zIndex: zIndex + 1,
+      zIndex: zIndex + 0.1,
    })
      .source(boundaries)
      // .size(0.6)
@ -99,7 +99,7 @@ export default class WorldLayer extends BaseLayer {
      });
    // 添加未定国界
    const lineLayer2 = new LineLayer({
-      zIndex: zIndex + 1,
+      zIndex: zIndex + 0.1,
    })
      .source(boundaries2)
      .size('type', (v: string) => {
--- a/packages/draw/src/draw_control.ts
+++ b/packages/draw/src/draw_control.ts
@ -2,7 +2,7 @@
 * @Author: lzxue
 * @Date: 2020-04-03 19:24:16
 * @Last Modified by: lzxue
- * @Last Modified time: 2020-04-22 19:09:42
+ * @Last Modified time: 2020-05-13 11:58:01
 */
 import { Control, DOM, IControlOption, PositionType, Scene } from '@antv/l7';
 import './css/draw.less';
@ -35,6 +35,7 @@ export interface IDrawControlOption extends IControlOption {
  pickBuffer: number;
  controls: IControls;
  layout: 'horizontal' | 'vertical';
+  style: any;
 }
 export class DrawControl extends Control {
  private draw: {
@ -110,9 +111,15 @@ export class DrawControl extends Control {
  }

  private addControls(controls: IControls, container: HTMLElement) {
+    const { style } = this.controlOption as IDrawControlOption;
    for (const type in controls) {
      if (DrawType[type] && controls[type] !== false) {
-        const drawOption = isObject(controls[type]) ? controls[type] : false;
+        const drawOption: Partial<IDrawFeatureOption> = isObject(controls[type])
+          ? (controls[type] as Partial<IDrawFeatureOption>)
+          : {};
+        if (style) {
+          drawOption.style = style;
+        }
        const draw = new DrawType[type](this.scene, drawOption);
        draw.on(DrawEvent.MODE_CHANGE, this.onModeChange.bind(null, type));
        this.draw[type] = draw;
--- a/stories/District/Layer/Country.tsx
+++ b/stories/District/Layer/Country.tsx
@ -205,15 +205,17 @@ export default class Country extends React.Component {
        // },
        depth: 1,
        fill: {
-          field: 'value',
-          values: [
-            '#feedde',
-            '#fdd0a2',
-            '#fdae6b',
-            '#fd8d3c',
-            '#e6550d',
-            '#a63603',
-          ],
+          color: {
+            field: 'value',
+            values: [
+              '#feedde',
+              '#fdd0a2',
+              '#fdae6b',
+              '#fd8d3c',
+              '#e6550d',
+              '#a63603',
+            ],
+          },
        },
        popup: {
          enable: true,
--- a/stories/District/Layer/Country2.tsx
+++ b/stories/District/Layer/Country2.tsx
@ -269,15 +269,17 @@ export default class Country extends React.Component {
        depth: 1,
        fill: {
          scale: 'quantile',
-          field: 'confirm',
-          values: [
-            '#feedde',
-            '#fdd0a2',
-            '#fdae6b',
-            '#fd8d3c',
-            '#e6550d',
-            '#a63603',
-          ],
+          color: {
+            field: 'confirm',
+            values: [
+              '#feedde',
+              '#fdd0a2',
+              '#fdae6b',
+              '#fd8d3c',
+              '#e6550d',
+              '#a63603',
+            ],
+          },
        },
      });
    });
@ -307,15 +309,17 @@ export default class Country extends React.Component {
        autoFit: false,
        fill: {
          scale: 'quantile',
-          field: 'confirm',
-          values: [
-            '#feedde',
-            '#fdd0a2',
-            '#fdae6b',
-            '#fd8d3c',
-            '#e6550d',
-            '#a63603',
-          ],
+          color: {
+            field: 'confirm',
+            values: [
+              '#feedde',
+              '#fdd0a2',
+              '#fdae6b',
+              '#fd8d3c',
+              '#e6550d',
+              '#a63603',
+            ],
+          },
        },
      });
    });
--- a/stories/District/Layer/city.tsx
+++ b/stories/District/Layer/city.tsx
@ -56,16 +56,19 @@ export default class Country extends React.Component {
          field: 'NAME_CHN',
          textAllowOverlap: false,
        },
-        fill: {
-          field: 'pop',
-          values: [
-            '#feedde',
-            '#fdd0a2',
-            '#fdae6b',
-            '#fd8d3c',
-            '#e6550d',
-            '#a63603',
-          ],
+        bubble: {
+          enable: true,
+          color: {
+            field: 'pop',
+            values: [
+              '#feedde',
+              '#fdd0a2',
+              '#fdae6b',
+              '#fd8d3c',
+              '#e6550d',
+              '#a63603',
+            ],
+          },
        },
        popup: {
          enable: true,
@ -109,6 +112,5 @@ export default class Country extends React.Component {
  }
  private handleProvinceChange = (value: string[]) => {
    this.cityLayer.updateDistrict([value[1]]);
-    console.log(this.cityLayer.fillLayer);
  };
 }
--- a/stories/District/Layer/country_bubble.tsx
+++ b/stories/District/Layer/country_bubble.tsx
@ -0,0 +1,235 @@
+import { Scene } from '@antv/l7';
+import { CountryLayer } from '@antv/l7-district';
+import { GaodeMap, Mapbox } from '@antv/l7-maps';
+import * as React from 'react';
+
+export default class Country extends React.Component {
+  // @ts-ignore
+  private scene: Scene;
+
+  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: 'blank',
+        zoom: 3,
+        minZoom: 0,
+        maxZoom: 10,
+      }),
+    });
+    const ProvinceData = [
+      {
+        name: '云南省',
+        code: 530000,
+        value: 17881.12,
+      },
+      {
+        name: '黑龙江省',
+        code: 230000,
+        value: 16361.62,
+      },
+      {
+        name: '贵州省',
+        code: 520000,
+        value: 14806.45,
+      },
+      {
+        name: '北京市',
+        code: 110000,
+        value: 30319.98,
+      },
+      {
+        name: '河北省',
+        code: 130000,
+        value: 36010.27,
+      },
+      {
+        name: '山西省',
+        code: 140000,
+        value: 16818.11,
+      },
+      {
+        name: '吉林省',
+        code: 220000,
+        value: 15074,
+      },
+      {
+        name: '宁夏回族自治区',
+        code: 640000,
+        value: 3705.18,
+      },
+      {
+        name: '辽宁省',
+        code: 210000,
+        value: 25315.35,
+      },
+      {
+        name: '海南省',
+        code: 460000,
+        value: 4832.05,
+      },
+      {
+        name: '内蒙古自治区',
+        code: 150000,
+        value: 17289.22,
+      },
+      {
+        name: '天津市',
+        code: 120000,
+        value: 18809.64,
+      },
+      {
+        name: '新疆维吾尔自治区',
+        code: 650000,
+        value: 12199.08,
+      },
+      {
+        name: '上海市',
+        code: 310000,
+        value: 32679.87,
+      },
+      {
+        name: '陕西省',
+        code: 610000,
+        value: 24438.32,
+      },
+      {
+        name: '甘肃省',
+        code: 620000,
+        value: 8246.07,
+      },
+      {
+        name: '安徽省',
+        code: 340000,
+        value: 30006.82,
+      },
+      {
+        name: '香港特别行政区',
+        code: 810000,
+        value: 0,
+      },
+      {
+        name: '广东省',
+        code: 440000,
+        value: 97277.77,
+      },
+      {
+        name: '河南省',
+        code: 410000,
+        value: 48055.86,
+      },
+      {
+        name: '湖南省',
+        code: 430000,
+        value: 36425.78,
+      },
+      {
+        name: '江西省',
+        code: 360000,
+        value: 21984.78,
+      },
+      {
+        name: '四川省',
+        code: 510000,
+        value: 40678.13,
+      },
+      {
+        name: '广西壮族自治区',
+        code: 450000,
+        value: 20353.51,
+      },
+      {
+        name: '江苏省',
+        code: 320000,
+        value: 92595.4,
+      },
+      {
+        name: '澳门特别行政区',
+        code: 820000,
+        value: null,
+      },
+      {
+        name: '浙江省',
+        code: 330000,
+        value: 56197.15,
+      },
+      {
+        name: '山东省',
+        code: 370000,
+        value: 76469.67,
+      },
+      {
+        name: '青海省',
+        code: 630000,
+        value: 2865.23,
+      },
+      {
+        name: '重庆市',
+        code: 500000,
+        value: 20363.19,
+      },
+      {
+        name: '福建省',
+        code: 350000,
+        value: 35804.04,
+      },
+      {
+        name: '湖北省',
+        code: 420000,
+        value: 39366.55,
+      },
+      {
+        name: '西藏自治区',
+        code: 540000,
+        value: 1477.63,
+      },
+      {
+        name: '台湾省',
+        code: 710000,
+        value: null,
+      },
+    ];
+    scene.on('loaded', () => {
+      const Layer = new CountryLayer(scene, {
+        data: ProvinceData,
+        joinBy: ['NAME_CHN', 'name'],
+        depth: 1,
+        bubble: {
+          enable: true,
+          size: {
+            field: 'value',
+            values: [3, 20],
+          },
+        },
+        popup: {
+          enable: true,
+          Html: (props) => {
+            return `<span>${props.NAME_CHN}:</span><span>${props.value}</span>`;
+          },
+        },
+      });
+    });
+    this.scene = scene;
+  }
+
+  public render() {
+    return (
+      <div
+        id="map"
+        style={{
+          position: 'absolute',
+          top: 0,
+          left: 0,
+          right: 0,
+          bottom: 0,
+        }}
+      />
+    );
+  }
+}
--- a/stories/District/Layer/country_city.tsx
+++ b/stories/District/Layer/country_city.tsx
@ -31,16 +31,17 @@ export default class Country extends React.Component {
        coastlineWidth: 0.5,
        nationalWidth: 0.5,
        fill: {
-          // scale: 'quantile',
-          field: 'NAME_CHN',
-          values: [
-            '#feedde',
-            '#fdd0a2',
-            '#fdae6b',
-            '#fd8d3c',
-            '#e6550d',
-            '#a63603',
-          ],
+          color: {
+            field: 'NAME_CHN',
+            values: [
+              '#feedde',
+              '#fdd0a2',
+              '#fdae6b',
+              '#fd8d3c',
+              '#e6550d',
+              '#a63603',
+            ],
+          },
        },
        popup: {
          enable: true,
--- a/stories/District/Layer/country_county.tsx
+++ b/stories/District/Layer/country_county.tsx
@ -32,16 +32,17 @@ export default class Country extends React.Component {
        coastlineWidth: 0.5,
        nationalWidth: 0.5,
        fill: {
-          // scale: 'quantile',
-          field: 'NAME_CHN',
-          values: [
-            '#feedde',
-            '#fdd0a2',
-            '#fdae6b',
-            '#fd8d3c',
-            '#e6550d',
-            '#a63603',
-          ],
+          color: {
+            field: 'NAME_CHN',
+            values: [
+              '#feedde',
+              '#fdd0a2',
+              '#fdae6b',
+              '#fd8d3c',
+              '#e6550d',
+              '#a63603',
+            ],
+          },
        },
        popup: {
          enable: true,
--- a/stories/District/Layer/county.tsx
+++ b/stories/District/Layer/county.tsx
@ -43,15 +43,17 @@ export default class Country extends React.Component {
          field: 'NAME_CHN',
        },
        fill: {
-          field: 'NAME_CHN',
-          values: [
-            '#feedde',
-            '#fdd0a2',
-            '#fdae6b',
-            '#fd8d3c',
-            '#e6550d',
-            '#a63603',
-          ],
+          color: {
+            field: 'NAME_CHN',
+            values: [
+              '#feedde',
+              '#fdd0a2',
+              '#fdae6b',
+              '#fd8d3c',
+              '#e6550d',
+              '#a63603',
+            ],
+          },
        },
        popup: {
          enable: true,
--- a/stories/District/Layer/drillDown.tsx
+++ b/stories/District/Layer/drillDown.tsx
@ -31,18 +31,19 @@ export default class Country extends React.Component {
    scene.on('loaded', () => {
      this.scene = scene;
      this.drillDown = new DrillDownLayer(scene, {
-        data: [],
-        depth: 1,
+        drillDepth: 2,
        fill: {
-          field: 'NAME_CHN',
-          values: [
-            '#feedde',
-            '#fdd0a2',
-            '#fdae6b',
-            '#fd8d3c',
-            '#e6550d',
-            '#a63603',
-          ],
+          color: {
+            field: 'NAME_CHN',
+            values: [
+              '#feedde',
+              '#fdd0a2',
+              '#fdae6b',
+              '#fd8d3c',
+              '#e6550d',
+              '#a63603',
+            ],
+          },
        },
        popup: {
          enable: true,
--- a/stories/District/Layer/province.tsx
+++ b/stories/District/Layer/province.tsx
@ -224,16 +224,19 @@ export default class Country extends React.Component {
          field: 'NAME_CHN',
          textAllowOverlap: false,
        },
-        fill: {
-          field: 'pop',
-          values: [
-            '#feedde',
-            '#fdd0a2',
-            '#fdae6b',
-            '#fd8d3c',
-            '#e6550d',
-            '#a63603',
-          ],
+        bubble: {
+          enable: true,
+          color: {
+            field: 'NAME_CHN',
+            values: [
+              '#feedde',
+              '#fdd0a2',
+              '#fdae6b',
+              '#fd8d3c',
+              '#e6550d',
+              '#a63603',
+            ],
+          },
        },
        popup: {
          enable: true,
--- a/stories/District/Layer/world.tsx
+++ b/stories/District/Layer/world.tsx
@ -26,16 +26,19 @@ export default class Country extends React.Component {
    scene.on('loaded', () => {
      const Layer = new WorldLayer(scene, {
        data: [],
-        fill: {
-          field: 'NAME_CHN',
-          values: [
-            '#feedde',
-            '#fdd0a2',
-            '#fdae6b',
-            '#fd8d3c',
-            '#e6550d',
-            '#a63603',
-          ],
+        bubble: {
+          enable: true,
+          color: {
+            field: 'NAME_CHN',
+            values: [
+              '#feedde',
+              '#fdd0a2',
+              '#fdae6b',
+              '#fd8d3c',
+              '#e6550d',
+              '#a63603',
+            ],
+          },
        },
        stroke: '#ccc',
        label: {
--- a/stories/District/district.stories.tsx
+++ b/stories/District/district.stories.tsx
@ -1,6 +1,7 @@
 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';
@ -14,6 +15,7 @@ import World from './Layer/world';
 storiesOf('行政区划', module)
  .add('世界地图', () => <World />)
  .add('中国地图', () => <Country />)
+  .add('中国地图气泡', () => <ChinaBubble />)
  .add('中国地图市级', () => <CountryCity />)
  .add('中国地图县级', () => <CountryCounty />)
  .add('中国地图附图', () => <Country2 />)
--- a/stories/Layers/components/PointImage.tsx
+++ b/stories/Layers/components/PointImage.tsx
@ -35,28 +35,31 @@ export default class PointImage extends React.Component {
      '02',
      'https://gw.alipayobjects.com/zos/rmsportal/xZXhTxbglnuTmZEwqQrE.png',
    );
-    let i = 0;
+    const i = 0;
    const data = await response.json();
-    while (i < 1) {
-      const imageLayer = new PointLayer()
-        .source(data, {
-          parser: {
-            type: 'json',
-            x: 'longitude',
-            y: 'latitude',
-          },
-        })
-        .shape('name', ['00', '01', '02'])
-        // .shape('triangle')
-        // .color('red')
-        .active(true)
-        .size(20);
-      // imageLayer.on('click', (e) => {
-      //   console.log(e);
-      // });
-      scene.addLayer(imageLayer);
-      i++;
-    }
+    const newData = data.map((item: any) => {
+      item.type = '00';
+      return item;
+    });
+    const imageLayer = new PointLayer()
+      .source(newData, {
+        parser: {
+          type: 'json',
+          x: 'longitude',
+          y: 'latitude',
+        },
+      })
+      .shape('type', (v: any) => {
+        return v;
+      })
+      // .shape('triangle')
+      // .color('red')
+      .active(true)
+      .size(20);
+    // imageLayer.on('click', (e) => {
+    //   console.log(e);
+    // });
+    scene.addLayer(imageLayer);
  }

  public render() {