chore(scene): merge master

2020-06-19 11:26:18 +08:00 · 2020-06-19 11:26:18 +08:00 · 303ea17437
parent 1163099e2e e07724a010
commit 303ea17437
64 changed files with 1046 additions and 423 deletions
--- a/docs/api/district/baselayer.en.md
+++ b/docs/api/district/baselayer.en.md
@ -0,0 +1,115 @@
+---
+title: 标准地图
+order: 2
+---
+
+## 五种地图类型
+
+- WorldLayer 世界地图
+- CountryLayer 国家地图，目前只支持中国
+- ProvinceLayer 省级地图
+- CityLayer 市级地图
+- CountyLayer 县级地图
+
+## 构造函数
+
+参数：
+
+- scene L7 scene 对象
+- option 行政区划配置项
+
+  - zIndex 图层绘制顺序
+  - data `Array` 属性数据用于可视化渲染
+  - visible 地图是否可见
+  - 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 填充描边颜色 `ProvinceLayer, CityLayer, CountyLayer`
+  - strokeWidth 填充描边宽度 `ProvinceLayer, CityLayer, CountyLayer`
+  - autoFit 是否自动缩放到图层范围 `boolean`
+  - popup 信息窗口
+
+    - enable 是否开启 `boolean`
+    - triggerEvent 触发事件 例如 'mousemove' | 'click';
+    - Html popup html 字符串，支持回调函数 (properties: any) => string;
+
+  - chinaNationalStroke 中国国界线颜色 `CountryLayer`
+  - chinaNationalWidth 中国国界线宽度 `CountryLayer`
+  - coastlineStroke 海岸线颜色 `CountryLayer`
+  - coastlineWidth 海岸线宽度 `WorldLayer` `CountryLayer`
+  - nationalWidth 国界线 `WorldLayer` `CountryLayer`
+  - nationalStroke 国界线 `WorldLayer` `CountryLayer`
+  - provinceStroke 省界颜色 `CountryLayer depth= 0，1，2时生效`
+  - provinceStrokeWidth 省界宽度 `CountryLayer depth = 0，1，2时生效`
+  - cityStroke 市级边界颜色 `CountryLayer depth =1，2时生效`
+  - cityStrokeWidth 市级边界宽度 `CountryLayer depth =1，2 时生效`
+  - countyStroke 县级边界颜色 `CountryLayer depth =2时生效`
+  - countyStrokeWidth 县级边界宽度 `CountryLayer depth =2时生效`
+
+⛔ ProvinceLayer, CityLayer, CountyLayer 如需要设置描边颜色，宽度使用 storke,strokeWidth 配置。
+
+### 数据
+
+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/baselayer.zh.md
+++ b/docs/api/district/baselayer.zh.md
@ -3,6 +3,14 @@ title: 标准地图
 order: 2
 ---

+## 五种地图类型
+
+- WorldLayer 世界地图
+- CountryLayer 国家地图，目前只支持中国
+- ProvinceLayer 省级地图
+- CityLayer 市级地图
+- CountyLayer 县级地图
+
 ## 构造函数

 参数：
@ -12,10 +20,12 @@ order: 2

  - zIndex 图层绘制顺序
  - data `Array` 属性数据用于可视化渲染
+  - visible 地图是否可见
  - joinBy 数据关联，属性数据如何内部空间数据关联绑定 目前支持 NAME_CHN,adcode 字段连接
    对照表 `Array [string, string]` 第一个值为空间数据字段，第二个为传入数据字段名
  - depth 数据显示层级 0：国家级，1:省级，2: 市级，3：线级
  - label 标注配置项 支持常量，不支持数据映射
+
    - enable `boolean` 是否显示标注
    - color 标注字体颜色 常量
    - field 标注字段 常量
@ -24,6 +34,7 @@ order: 2
    - strokeWidth 文字描边宽度
    - textAllowOverlap 是否允许文字压盖
    - opacity 标注透明度
+
  - fill 填充配置项 支持数据映射
    - color 图层填充颜色，支持常量和数据映射
      常量：统一设置成一样的颜色
@ -38,8 +49,8 @@ order: 2
    - size 气泡大小 支持常量、数据映射
    - shape 气泡形状 支持常量、数据映射
    - style 气泡图样式 同 PointLayer
-  - stroke 填充描边颜色
-  - strokeWidth 填充描边宽度
+  - stroke 填充描边颜色 `ProvinceLayer, CityLayer, CountyLayer`
+  - strokeWidth 填充描边宽度 `ProvinceLayer, CityLayer, CountyLayer`
  - autoFit 是否自动缩放到图层范围 `boolean`
  - popup 信息窗口

@ -47,18 +58,20 @@ order: 2
    - triggerEvent 触发事件 例如 'mousemove' | 'click';
    - Html popup html 字符串，支持回调函数 (properties: any) => string;

-  - chinaNationalStroke 中国国界线颜色
-  - chinaNationalWidth 中国国界线宽度
-  - coastlineStroke 海岸线颜色
+  - chinaNationalStroke 中国国界线颜色 `CountryLayer`
+  - chinaNationalWidth 中国国界线宽度 `CountryLayer`
+  - coastlineStroke 海岸线颜色 `CountryLayer`
  - coastlineWidth 海岸线宽度 `WorldLayer` `CountryLayer`
  - nationalWidth 国界线 `WorldLayer` `CountryLayer`
  - nationalStroke 国界线 `WorldLayer` `CountryLayer`
-  - provinceStroke 省界颜色 `CountryLayer`
-  - provinceStrokeWidth 省界宽度 `CountryLayer`
-  - cityStroke 市级边界颜色 `CountryLayer`
-  - cityStrokeWidth 市级边界宽度 `CountryLayer`
-  - countyStroke 县级边界颜色 `CountryLayer`
-  - countyStrokeWidth 县级边界宽度 `CountryLayer`
+  - provinceStroke 省界颜色 `CountryLayer depth= 0，1，2时生效`
+  - provinceStrokeWidth 省界宽度 `CountryLayer depth = 0，1，2时生效`
+  - cityStroke 市级边界颜色 `CountryLayer depth =1，2时生效`
+  - cityStrokeWidth 市级边界宽度 `CountryLayer depth =1，2 时生效`
+  - countyStroke 县级边界颜色 `CountryLayer depth =2时生效`
+  - countyStrokeWidth 县级边界宽度 `CountryLayer depth =2时生效`
+
+⛔ ProvinceLayer, CityLayer, CountyLayer 如需要设置描边颜色，宽度使用 storke,strokeWidth 配置。

 ### 数据

--- a/docs/api/district/drilldown.en.md
+++ b/docs/api/district/drilldown.en.md
@ -0,0 +1,159 @@
+---
+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>`;
+
+⛔ 中国地图视角设置，省界，海岸线，宽度通过以下属性
+
+- chinaNationalStroke 中国国界线颜色
+- chinaNationalWidth 中国国界线宽度
+- coastlineStroke 海岸线颜色
+- coastlineWidth 海岸线宽度
+- nationalWidth 国界线
+- nationalStroke 国界线
+- provinceStroke 省界颜色
+- provinceStrokeWidth 省界宽度
+
+#### 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/drilldown.zh.md
+++ b/docs/api/district/drilldown.zh.md
@ -47,6 +47,17 @@ DrillDownLayer 提供默认提供通过 Layer 的交互事件，实现上钻下
 - bubble: `Partial<IBubbleOption>`;
 - fill: `Partial<IFillOptions>`;

+⛔ 中国地图视角设置，省界，海岸线，宽度通过以下属性
+
+- chinaNationalStroke 中国国界线颜色
+- chinaNationalWidth 中国国界线宽度
+- coastlineStroke 海岸线颜色
+- coastlineWidth 海岸线宽度
+- nationalWidth 国界线
+- nationalStroke 国界线
+- provinceStroke 省界颜色
+- provinceStrokeWidth 省界宽度
+
 #### labelOption

 文本标注配置项，目前只支持常量配置，不支持数据映射
--- a/examples/district/basic/API.en.md
+++ b/examples/district/basic/API.en.md
@ -39,6 +39,7 @@ District 支持下面几种图
 - option 行政区划配置项
  - zIndex 图层绘制顺序
  - data `Array` 属性数据用于可视化渲染
+  - visible 地图是否可见
  - joinBy 数据关联，属性数据如何内部空间数据关联绑定 目前支持 NAME_CHN,adcode 字段连接
    对照表 `Array [string, string]` 第一个值为空间数据字段，第二个为传入数据字段名
  - depth 数据显示层级 0：国家级，1:省级，2: 市级，3：线级
--- a/examples/district/basic/API.zh.md
+++ b/examples/district/basic/API.zh.md
@ -38,6 +38,7 @@ District 支持下面几种图
 - option 行政区划配置项
  - zIndex 图层绘制顺序
  - data `Array` 属性数据用于可视化渲染
+  - visible 地图是否可见
  - joinBy 数据关联，属性数据如何内部空间数据关联绑定 目前支持 NAME_CHN,adcode 字段连接
    对照表 `Array [string, string]` 第一个值为空间数据字段，第二个为传入数据字段名
  - depth 数据显示层级 0：国家级，1:省级，2: 市级，3：线级
@ -64,26 +65,28 @@ District 支持下面几种图
    - size 气泡大小 支持常量、数据映射
    - shape 气泡形状 支持常量、数据映射
    - style 气泡图样式 同 PointLayer
-  - stroke 填充描边颜色 
-  - strokeWidth 填充描边宽度
+  - stroke 填充描边颜色 `ProvinceLayer, CityLayer, CountyLayer`
+  - strokeWidth 填充描边宽度 `ProvinceLayer, CityLayer, CountyLayer`
  - autoFit 是否自动缩放到图层范围 `boolean`
  - popup 信息窗口
      - enable 是否开启 `boolean`
      - triggerEvent 触发事件 例如 'mousemove' | 'click';
      - Html popup html字符串，支持回调函数  (properties: any) => string;

-  - chinaNationalStroke 中国国界线颜色
-  - chinaNationalWidth 中国国界线宽度
-  - coastlineStroke 海岸线颜色
+  - chinaNationalStroke 中国国界线颜色 `CountryLayer`
+  - chinaNationalWidth 中国国界线宽度 `CountryLayer`
+  - coastlineStroke 海岸线颜色  `CountryLayer`
  - coastlineWidth 海岸线宽度 `WorldLayer` `CountryLayer`
  - nationalWidth 国界线 `WorldLayer` `CountryLayer`
  - nationalStroke 国界线 `WorldLayer` `CountryLayer`
-  - provinceStroke 省界颜色 `CountryLayer`
-  - provinceStrokeWidth 省界宽度 `CountryLayer`
-  - cityStroke 市级边界颜色 `CountryLayer`
-  - cityStrokeWidth 市级边界宽度 `CountryLayer`
-  - countyStroke 县级边界颜色 `CountryLayer`
-  - countyStrokeWidth 县级边界宽度  `CountryLayer`
+  - provinceStroke 省界颜色 `CountryLayer depth= 0，1，2时生效`
+  - provinceStrokeWidth 省界宽度 `CountryLayer depth = 0，1，2时生效 `
+  - cityStroke 市级边界颜色 `CountryLayer depth =1，2时生效`
+  - cityStrokeWidth 市级边界宽度 `CountryLayer depth =1，2 时生效`
+  - countyStroke 县级边界颜色 `CountryLayer depth =2时生效`
+  - countyStrokeWidth 县级边界宽度 `CountryLayer depth =2时生效`
+
+⛔ ProvinceLayer, CityLayer, CountyLayer 如需要设置描边颜色，宽度使用storke,strokeWidth配置。

 ### 数据
 District 提供polygon数据需要跟用户的属性数据，通过关系字段进行连接
--- a/examples/district/basic/demo/china_map_2.js
+++ b/examples/district/basic/demo/china_map_2.js
@ -190,6 +190,9 @@ scene.on('loaded', () => {
    data: ProvinceData,
    joinBy: [ 'NAME_CHN', 'name' ],
    depth: 1,
+    provinceStroke: '#783D2D',
+    cityStroke: '#EBCCB4',
+    cityStrokeWidth: 1,
    fill: {
      color: {
        field: 'NAME_CHN',
--- a/examples/district/basic/demo/world_map.js
+++ b/examples/district/basic/demo/world_map.js
@ -9,7 +9,7 @@ const scene = new Scene({
    style: 'blank',
    zoom: 0,
    minZoom: 0,
-    maxZoom: 10
+    maxZoom: 5
  })
 });
 scene.on('loaded', () => {
--- a/examples/district/drill/API.zh.md
+++ b/examples/district/drill/API.zh.md
@ -38,6 +38,15 @@ DrillDownLayer 提供默认提供通过Layer的交互事件，实现上钻下钻
  - label: Partial<ILabelOption>;
  - bubble: Partial<IBubbleOption>;
  - fill: Partial<IFillOptions>;
+   ⛔中国地图视角设置，省界，海岸线，宽度通过以下属性
+  - chinaNationalStroke 中国国界线颜色 
+  - chinaNationalWidth 中国国界线宽度 
+  - coastlineStroke 海岸线颜色 
+  - coastlineWidth 海岸线宽度 
+  - nationalWidth 国界线 
+  - nationalStroke 国界线 
+  - provinceStroke 省界颜色 
+  - provinceStrokeWidth 省界宽度 

 #### labelOption
  文本标注配置项，目前只支持常量配置，不支持数据映射
--- a/lerna.json
+++ b/lerna.json
@ -14,7 +14,7 @@
      "message": "chore: publish"
    }
  },
-  "version": "2.2.11",
+  "version": "2.2.14",
  "npmClient": "yarn",
  "useWorkspaces": true,
  "publishConfig": {
--- a/packages/boundry/package.json
+++ b/packages/boundry/package.json
@ -1,6 +1,6 @@
 {
  "name": "@antv/l7-district",
-  "version": "2.2.11",
+  "version": "2.2.14",
  "description": "L7 district moudules",
  "keywords": [],
  "author": "thinkinggis <lzx199065@gmail.com>",
@ -34,7 +34,7 @@
    "test": "jest"
  },
  "dependencies": {
-    "@antv/l7": "2.2.11",
+    "@antv/l7": "2.2.14",
    "@babel/runtime": "^7.7.7",
    "@turf/circle": "^6.0.1",
    "@turf/distance": "^6.0.1",
--- a/packages/boundry/src/config.ts
+++ b/packages/boundry/src/config.ts
@ -7,12 +7,12 @@ const dataLevel2: { [key: string]: any } = {
    fill: {
      type: 'pbf',
      url:
-        'https://gw.alipayobjects.com/os/bmw-prod/d666a08d-fce1-48e2-913a-87d81772bcc9.bin',
+        'https://gw.alipayobjects.com/os/bmw-prod/e66cdd3f-cd41-4533-9746-d8fdbe0a0056.bin',
    },
    line: {
      type: 'pbf',
      url:
-        'https://gw.alipayobjects.com/os/bmw-prod/62f61f5f-cca7-4137-845d-13c8f9969664.bin',
+        'https://gw.alipayobjects.com/os/bmw-prod/f1b0fd97-ac90-4adb-b99c-01709e0e52c8.bin',
    },
    label: {
      type: 'pbf',
@ -181,17 +181,17 @@ const dataLevel1: { [key: string]: any } = {
        line: {
          type: 'pbf',
          url:
-            '//gw.alipayobjects.com/os/bmw-prod/561e2cfe-9460-42d1-a2f8-3fd2e1274c52.bin',
+            'https://gw.alipayobjects.com/os/bmw-prod/8bfbfe7e-bd0e-4bbe-84d8-629f4dc7abc4.bin',
        },
        cityLine: {
          type: 'pbf',
          url:
-            '//gw.alipayobjects.com/os/bmw-prod/561e2cfe-9460-42d1-a2f8-3fd2e1274c52.bin',
+            'https://gw.alipayobjects.com/os/bmw-prod/8bfbfe7e-bd0e-4bbe-84d8-629f4dc7abc4.bin',
        },
        provinceLine: {
          type: 'pbf',
          url:
-            '//gw.alipayobjects.com/os/bmw-prod/778ad7ba-5a3f-4ed6-a94a-b8ab8acae9d6.bin',
+            'https://gw.alipayobjects.com/os/bmw-prod/778ad7ba-5a3f-4ed6-a94a-b8ab8acae9d6.bin',
        },
      },
      3: {
--- a/packages/boundry/src/index.ts
+++ b/packages/boundry/src/index.ts
@ -14,3 +14,4 @@ export {
  DrillDownLayer,
 };
 export * from './config';
+export * from './layer/interface';
--- a/packages/boundry/src/layer/baseLayer.ts
+++ b/packages/boundry/src/layer/baseLayer.ts
@ -94,6 +94,7 @@ export default class BaseLayer extends EventEmitter {
  protected getDefaultOption(): IDistrictLayerOption {
    return {
      zIndex: 0,
+      visible: true,
      geoDataLevel: 2,
      depth: 1,
      adcode: [],
@ -156,10 +157,11 @@ export default class BaseLayer extends EventEmitter {

  protected addFillLayer(fillCountry: any) {
    // 添加省份填充
-    const { popup, data = [], fill, autoFit, joinBy } = this.options;
+    const { popup, data = [], fill, autoFit, joinBy, visible } = this.options;
    this.fillData = fillCountry;
    const fillLayer = new PolygonLayer({
      autoFit,
+      visible,
    }).source(fillCountry, {
      transforms:
        data.length === 0
@ -206,9 +208,10 @@ export default class BaseLayer extends EventEmitter {
  }

  protected addFillLine(provinceLine: any) {
-    const { stroke, strokeWidth, zIndex } = this.options;
+    const { stroke, strokeWidth, zIndex, visible } = this.options;
    const layer2 = new LineLayer({
      zIndex: zIndex + 0.1,
+      visible,
    })
      .source(provinceLine)
      .color(stroke)
@ -229,9 +232,10 @@ export default class BaseLayer extends EventEmitter {
  }

  protected addBubbleLayer(labelData: any, type: string = 'json') {
-    const { bubble, zIndex, data = [], joinBy } = this.options;
+    const { bubble, zIndex, data = [], joinBy, visible } = this.options;
    const bubbleLayer = new PointLayer({
      zIndex: zIndex + 0.3,
+      visible,
    }).source(labelData, {
      parser: {
        type,
@ -265,9 +269,10 @@ export default class BaseLayer extends EventEmitter {
  }

  protected addLabel(labelData: any, type: string = 'json') {
-    const { label, zIndex } = this.options;
+    const { label, zIndex, visible } = this.options;
    const labelLayer = new PointLayer({
      zIndex: zIndex + 0.4,
+      visible,
    })
      .source(labelData, {
        parser: {
--- a/packages/boundry/src/layer/country.ts
+++ b/packages/boundry/src/layer/country.ts
@ -52,12 +52,23 @@ export default class CountryLayer extends BaseLayer {
    const lineData = await this.fetchData(cfg);
    const border1 = lineData.features.filter((feature: any) => {
      const type = feature.properties.type;
-      return type === '1' || type === '4';
+      return type === '1';
+    });
+    // 香港 澳门
+    const border2 = lineData.features.filter((feature: any) => {
+      const type = feature.properties.type;
+      return type === '4';
    });
    const borderFc = {
      type: 'FeatureCollection',
      features: border1,
    };
+
+    const borderFc2 = {
+      type: 'FeatureCollection',
+      features: border2,
+    };
+
    const nationalBorder = lineData.features.filter((feature: any) => {
      const type = feature.properties.type;
      return type !== '1' && type !== '4';
@ -66,29 +77,29 @@ export default class CountryLayer extends BaseLayer {
      type: 'FeatureCollection',
      features: nationalBorder,
    };
-    this.addNationBorder(nationalFc, borderFc);
+    this.addNationBorder(nationalFc, borderFc, borderFc2);
  }

  // 国界,省界
-  protected addFillLine(lineData: any) {
-    const border1 = lineData.features.filter((feature: any) => {
-      const type = feature.properties.type;
-      return type === '1' || type === '4';
-    });
-    const borderFc = {
-      type: 'FeatureCollection',
-      features: border1,
-    };
-    const nationalBorder = lineData.features.filter((feature: any) => {
-      const type = feature.properties.type;
-      return type !== '1' && type !== '4';
-    });
-    const nationalFc = {
-      type: 'FeatureCollection',
-      features: nationalBorder,
-    };
-    this.addNationBorder(nationalFc, borderFc);
-  }
+  // protected addFillLine(lineData: any) {
+  //   const border1 = lineData.features.filter((feature: any) => {
+  //     const type = feature.properties.type;
+  //     return type === '1' || type === '4';
+  //   });
+  //   const borderFc = {
+  //     type: 'FeatureCollection',
+  //     features: border1,
+  //   };
+  //   const nationalBorder = lineData.features.filter((feature: any) => {
+  //     const type = feature.properties.type;
+  //     return type !== '1' && type !== '4';
+  //   });
+  //   const nationalFc = {
+  //     type: 'FeatureCollection',
+  //     features: nationalBorder,
+  //   };
+  //   this.addNationBorder(nationalFc, borderFc);
+  // }

  private async loadData() {
    const { depth } = this.options;
@ -102,7 +113,11 @@ export default class CountryLayer extends BaseLayer {
    return [fillData, fillLabel];
  }
  // 省级行政区划
-  private async addNationBorder(boundaries: any, boundaries2: any) {
+  private async addNationBorder(
+    boundaries: any,
+    boundaries2: any,
+    boundaries3: any,
+  ) {
    const {
      nationalStroke,
      provinceStroke,
@ -114,11 +129,13 @@ export default class CountryLayer extends BaseLayer {
      coastlineWidth,
      stroke,
      strokeWidth,
+      visible,
      zIndex,
    } = this.options;
    // 添加国界线
    const lineLayer = new LineLayer({
      zIndex: zIndex + 0.1,
+      visible,
    })
      .source(boundaries)
      .size('type', (v: string) => {
@ -147,26 +164,43 @@ export default class CountryLayer extends BaseLayer {
    // 添加未定国界
    const lineLayer2 = new LineLayer({
      zIndex: zIndex + 0.1,
+      visible,
    })
      .source(boundaries2)
-      .size(nationalWidth)
+      .size(chinaNationalWidth)
      .shape('line')
-      .color('gray')
+      .color(chinaNationalStroke)
      .style({
        lineType: 'dash',
        dashArray: [2, 2],
      });

+    // 添加澳门香港界限
+    const lineLayer3 = new LineLayer({
+      zIndex: zIndex + 0.1,
+      visible,
+    })
+      .source(boundaries3)
+      .size(provinceStrokeWidth)
+      .shape('line')
+      .color(provinceStroke)
+      .style({
+        lineType: 'dash',
+        dashArray: [4, 2, 2, 2],
+      });
+
    this.scene.addLayer(lineLayer);
    this.scene.addLayer(lineLayer2);
-    this.layers.push(lineLayer, lineLayer2);
+    this.scene.addLayer(lineLayer3);
+    this.layers.push(lineLayer, lineLayer2, lineLayer3);
  }
  // 市边界
  private async addCityBorder(cfg: any) {
    const border1 = await this.fetchData(cfg);
-    const { cityStroke, cityStrokeWidth } = this.options;
+    const { cityStroke, cityStrokeWidth, visible } = this.options;
    const cityline = new LineLayer({
      zIndex: 2,
+      visible,
    })
      .source(border1)
      .color(cityStroke)
@ -181,9 +215,10 @@ export default class CountryLayer extends BaseLayer {
  // 县级边界
  private async addCountyBorder(cfg: any) {
    const border1 = await this.fetchData(cfg);
-    const { countyStrokeWidth, countyStroke } = this.options;
+    const { countyStrokeWidth, countyStroke, visible } = this.options;
    const cityline = new LineLayer({
      zIndex: 2,
+      visible,
    })
      .source(border1)
      .color(countyStroke)
@ -215,9 +250,10 @@ export default class CountryLayer extends BaseLayer {
  }

  private addText(labelData: any, option: any, offset: [number, number]) {
-    const { label, zIndex } = this.options;
+    const { label, zIndex, visible } = this.options;
    const labelLayer = new PointLayer({
      zIndex: zIndex + 0.4,
+      visible,
      ...option,
    })
      .source(labelData, {
--- a/packages/boundry/src/layer/interface.ts
+++ b/packages/boundry/src/layer/interface.ts
@ -73,6 +73,7 @@ export interface IBubbleOption {
 export type adcodeType = string[] | string | number | number[];
 export interface IDistrictLayerOption {
  zIndex: number;
+  visible: boolean;
  geoDataLevel: 1 | 2;
  data?: Array<{ [key: string]: any }>;
  joinBy: [string, string];
--- a/packages/boundry/src/layer/world.ts
+++ b/packages/boundry/src/layer/world.ts
@ -73,11 +73,13 @@ export default class WorldLayer extends BaseLayer {
      chinaNationalStroke,
      chinaNationalWidth,
      coastlineWidth,
+      visible,
      zIndex,
    } = this.options;
    // 添加国界线
    const lineLayer = new LineLayer({
      zIndex: zIndex + 0.1,
+      visible,
    })
      .source(boundaries)
      // .size(0.6)
@ -106,6 +108,7 @@ export default class WorldLayer extends BaseLayer {
    // 添加未定国界
    const lineLayer2 = new LineLayer({
      zIndex: zIndex + 0.1,
+      visible,
    })
      .source(boundaries2)
      .size('type', (v: string) => {
--- a/packages/component/package.json
+++ b/packages/component/package.json
@ -1,6 +1,6 @@
 {
  "name": "@antv/l7-component",
-  "version": "2.2.11",
+  "version": "2.2.14",
  "description": "",
  "main": "lib/index.js",
  "module": "es/index.js",
@ -24,8 +24,8 @@
  "author": "lzxue",
  "license": "ISC",
  "dependencies": {
-    "@antv/l7-core": "2.2.11",
-    "@antv/l7-utils": "2.2.11",
+    "@antv/l7-core": "2.2.14",
+    "@antv/l7-utils": "2.2.14",
    "@babel/runtime": "^7.7.7",
    "eventemitter3": "^4.0.0",
    "inversify": "^5.0.1",
--- a/packages/component/src/popup.ts
+++ b/packages/component/src/popup.ts
@ -208,11 +208,10 @@ export default class Popup extends EventEmitter implements IPopup {
          .split(' ')
          .forEach((name) => this.container.classList.add(name));
      }
-      this.container.addEventListener('mousedown', (e) => {
-        e.stopPropagation();
-      });
-      this.container.addEventListener('click', (e) => {
-        e.stopPropagation();
+      ['mousemove', 'mousedown', 'mouseup', 'click'].forEach((type) => {
+        this.container.addEventListener(type, (e) => {
+          e.stopPropagation();
+        });
      });
    }
    if (maxWidth && this.container.style.maxWidth !== maxWidth) {
--- a/packages/core/package.json
+++ b/packages/core/package.json
@ -1,6 +1,6 @@
 {
  "name": "@antv/l7-core",
-  "version": "2.2.11",
+  "version": "2.2.14",
  "description": "",
  "main": "lib/index.js",
  "module": "es/index.js",
@ -23,7 +23,7 @@
  "license": "ISC",
  "dependencies": {
    "@antv/async-hook": "^2.1.0",
-    "@antv/l7-utils": "2.2.11",
+    "@antv/l7-utils": "2.2.14",
    "@babel/runtime": "^7.7.7",
    "@mapbox/tiny-sdf": "^1.1.1",
    "ajv": "^6.10.2",
--- a/packages/draw/package.json
+++ b/packages/draw/package.json
@ -1,6 +1,6 @@
 {
  "name": "@antv/l7-draw",
-  "version": "2.2.11",
+  "version": "2.2.14",
  "description": "L7 Draw moudules",
  "keywords": [],
  "author": "thinkinggis <lzx199065@gmail.com>",
@ -35,7 +35,7 @@
    "test": "jest"
  },
  "dependencies": {
-    "@antv/l7": "2.2.11",
+    "@antv/l7": "2.2.14",
    "@babel/runtime": "^7.7.7",
    "@turf/circle": "^6.0.1",
    "@turf/distance": "^6.0.1",
--- a/packages/draw/src/modes/draw_feature.ts
+++ b/packages/draw/src/modes/draw_feature.ts
@ -58,6 +58,10 @@ export default abstract class DrawFeature extends DrawMode {
    this.on(DrawEvent.CREATE, this.onDrawCreate);
    this.on(DrawEvent.MODE_CHANGE, this.onModeChange);
    document.addEventListener('keydown', this.addKeyDownEvent);
+    if (this.options.data && this.initData()) {
+      this.normalLayer.update(this.source.data);
+      this.normalLayer.enableSelect();
+    }
  }
  public abstract drawFinish(): void;
  public setCurrentFeature(feature: Feature) {
@ -143,6 +147,9 @@ export default abstract class DrawFeature extends DrawMode {
  protected abstract hideOtherLayer(): void;

  protected abstract showOtherLayer(): void;
+  protected initData(): boolean {
+    return false;
+  }

  private addDrawPopup(lnglat: ILngLat, dis: number) {
    const popup = new Popup({
--- a/packages/draw/src/modes/draw_line.ts
+++ b/packages/draw/src/modes/draw_line.ts
@ -30,16 +30,39 @@ export default class DrawLine extends DrawPolygon {
    this.pointFeatures = newPointFeture;
    return this.currentFeature;
  }
-  protected createFeature(points: ILngLat[]): Feature {
-    const pointfeatures = createPoint(this.points);
+  protected createFeature(
+    points: ILngLat[],
+    id?: string,
+    active: boolean = true,
+  ): Feature {
+    const pointfeatures = createPoint(points);
    this.pointFeatures = pointfeatures.features;
    const feature = createLine(points, {
-      id: this.getUniqId(),
+      id: id || this.getUniqId(),
      type: 'line',
-      active: true,
+      active,
      pointFeatures: this.pointFeatures,
    });
    this.setCurrentFeature(feature as Feature);
    return feature;
  }
+  protected initData(): boolean {
+    const features: Feature[] = [];
+    this.source.data.features.forEach((feature) => {
+      if (feature.geometry.type === 'LineString') {
+        // @ts-ignore
+        const points = feature.geometry.coordinates.map((coord) => {
+          return {
+            lng: coord[0],
+            lat: coord[1],
+          };
+        });
+        features.push(
+          this.createFeature(points, feature?.properties?.id, false),
+        );
+      }
+    });
+    this.source.data.features = features;
+    return true;
+  }
 }
--- a/packages/draw/src/modes/draw_point.ts
+++ b/packages/draw/src/modes/draw_point.ts
@ -57,15 +57,34 @@ export default class DrawPoint extends DrawFeature {
    };
    return this.currentFeature;
  }
-  protected createFeature(p: ILngLat): Feature {
+  protected createFeature(
+    p: ILngLat,
+    id?: string,
+    active: boolean = true,
+  ): Feature {
    const feature = point([p.lng, p.lat], {
-      id: this.getUniqId(),
+      id: id || this.getUniqId(),
      type: 'point',
+      active,
      pointFeatures: [point([p.lng, p.lat])],
    });
    this.setCurrentFeature(feature as Feature);
    return feature;
  }
+  protected initData(): boolean {
+    const features: Feature[] = [];
+    this.source.data.features.forEach((feature) => {
+      if (feature.geometry.type === 'Point') {
+        const p = {
+          lng: feature.geometry.coordinates[0] as number,
+          lat: feature.geometry.coordinates[1] as number,
+        };
+        features.push(this.createFeature(p, feature?.properties?.id, false));
+      }
+    });
+    this.source.data.features = features;
+    return true;
+  }

  protected editFeature(endPoint: ILngLat): void {
    this.createFeature(endPoint);
--- a/packages/draw/src/modes/draw_polygon.ts
+++ b/packages/draw/src/modes/draw_polygon.ts
@ -29,11 +29,6 @@ export default class DrawPolygon extends DrawFeature {
    this.type = 'polygon';
    this.drawMidVertexLayer = new DrawMidVertex(this);
    this.on(DrawEvent.MODE_CHANGE, this.addMidLayerEvent);
-    if (this.options.data) {
-      this.initData();
-      this.normalLayer.update(this.source.data);
-      this.normalLayer.enableSelect();
-    }
  }
  public enable() {
    super.enable();
@ -240,6 +235,26 @@ export default class DrawPolygon extends DrawFeature {
        break;
    }
  }
+  protected initData(): boolean {
+    const features: Feature[] = [];
+    this.source.data.features.forEach((feature) => {
+      if (feature.geometry.type === 'Polygon') {
+        const points = (feature.geometry.coordinates[0] as Position[]).map(
+          (coord) => {
+            return {
+              lng: coord[0],
+              lat: coord[1],
+            };
+          },
+        );
+        features.push(
+          this.createFeature(points.slice(1), feature?.properties?.id, false),
+        );
+      }
+    });
+    this.source.data.features = features;
+    return true;
+  }

  private editPolygonVertex(id: number, vertex: ILngLat) {
    const feature = this.currentFeature as Feature<Geometries, Properties>;
@ -259,26 +274,6 @@ export default class DrawPolygon extends DrawFeature {
      featureCollection([this.currentFeature as Feature]),
    );
  }
-
-  private initData() {
-    const features: Feature[] = [];
-    this.source.data.features.forEach((feature) => {
-      if (feature.geometry.type === 'Polygon') {
-        const points = (feature.geometry.coordinates[0] as Position[]).map(
-          (coord) => {
-            return {
-              lng: coord[0],
-              lat: coord[1],
-            };
-          },
-        );
-        features.push(
-          this.createFeature(points.slice(1), feature?.properties?.id, false),
-        );
-      }
-    });
-    this.source.data.features = features;
-  }
 }
 /**
 * draw 端点响应事件
--- a/packages/l7/package.json
+++ b/packages/l7/package.json
@ -1,6 +1,6 @@
 {
  "name": "@antv/l7",
-  "version": "2.2.11",
+  "version": "2.2.14",
  "description": "A Large-scale WebGL-powered Geospatial Data Visualization",
  "main": "lib/index.js",
  "module": "es/index.js",
@ -24,12 +24,12 @@
  "author": "antv",
  "license": "MIT",
  "dependencies": {
-    "@antv/l7-component": "2.2.11",
-    "@antv/l7-core": "2.2.11",
-    "@antv/l7-layers": "2.2.11",
-    "@antv/l7-maps": "2.2.11",
-    "@antv/l7-scene": "2.2.11",
-    "@antv/l7-utils": "2.2.11",
+    "@antv/l7-component": "2.2.14",
+    "@antv/l7-core": "2.2.14",
+    "@antv/l7-layers": "2.2.14",
+    "@antv/l7-maps": "2.2.14",
+    "@antv/l7-scene": "2.2.14",
+    "@antv/l7-utils": "2.2.14",
    "@babel/runtime": "^7.7.7"
  },
  "gitHead": "532ade40831b35b04a677b351d092e54c00613d8",
--- a/packages/l7/src/version.ts
+++ b/packages/l7/src/version.ts
@ -1,2 +1,2 @@
-const version = '2.2.11';
+const version = '2.2.13';
 export { version };
--- a/packages/layers/package.json
+++ b/packages/layers/package.json
@ -1,6 +1,6 @@
 {
  "name": "@antv/l7-layers",
-  "version": "2.2.11",
+  "version": "2.2.14",
  "description": "L7's collection of built-in layers",
  "main": "lib/index.js",
  "module": "es/index.js",
@ -23,9 +23,9 @@
  "license": "ISC",
  "dependencies": {
    "@antv/async-hook": "^2.1.0",
-    "@antv/l7-core": "2.2.11",
-    "@antv/l7-source": "2.2.11",
-    "@antv/l7-utils": "2.2.11",
+    "@antv/l7-core": "2.2.14",
+    "@antv/l7-source": "2.2.14",
+    "@antv/l7-utils": "2.2.14",
    "@babel/runtime": "^7.7.7",
    "@mapbox/martini": "^0.2.0",
    "@turf/meta": "^6.0.2",
--- a/packages/layers/src/core/BaseLayer.ts
+++ b/packages/layers/src/core/BaseLayer.ts
@ -434,10 +434,10 @@ export default class BaseLayer<ChildLayerStyleOptions = {}> extends EventEmitter

  public setData(data: any, options?: ISourceCFG) {
    if (this.inited) {
-      this.layerSource.setData(data);
+      this.layerSource.setData(data, options);
    } else {
      this.on('inited', () => {
-        this.layerSource.setData(data);
+        this.layerSource.setData(data, options);
      });
    }

--- a/packages/layers/src/line/models/arc.ts
+++ b/packages/layers/src/line/models/arc.ts
@ -24,6 +24,9 @@ export default class ArcModel extends BaseModel {
      lineType = 'solid',
      dashArray = [10, 5],
    } = this.layer.getLayerConfig() as ILineLayerStyleOptions;
+    if (dashArray.length === 2) {
+      dashArray.push(0, 0);
+    }
    return {
      u_opacity: opacity || 1,
      segmentNumber: 30,
--- a/packages/layers/src/line/models/arc_3d.ts
+++ b/packages/layers/src/line/models/arc_3d.ts
@ -23,6 +23,9 @@ export default class Arc3DModel extends BaseModel {
      lineType = 'solid',
      dashArray = [10, 5],
    } = this.layer.getLayerConfig() as ILineLayerStyleOptions;
+    if (dashArray.length === 2) {
+      dashArray.push(0, 0);
+    }
    return {
      u_opacity: opacity || 1,
      segmentNumber: 30,
--- a/packages/layers/src/line/models/great_circle.ts
+++ b/packages/layers/src/line/models/great_circle.ts
@ -25,6 +25,9 @@ export default class GreatCircleModel extends BaseModel {
      lineType = 'solid',
      dashArray = [10, 5],
    } = this.layer.getLayerConfig() as Partial<ILineLayerStyleOptions>;
+    if (dashArray.length === 2) {
+      dashArray.push(0, 0);
+    }
    return {
      u_opacity: opacity || 1,
      segmentNumber: 30,
--- a/packages/layers/src/line/models/line.ts
+++ b/packages/layers/src/line/models/line.ts
@ -22,8 +22,11 @@ export default class LineModel extends BaseModel {
    const {
      opacity,
      lineType = 'solid',
-      dashArray = [10, 5],
+      dashArray = [10, 5, 0, 0],
    } = this.layer.getLayerConfig() as ILineLayerStyleOptions;
+    if (dashArray.length === 2) {
+      dashArray.push(0, 0);
+    }
    return {
      u_opacity: opacity || 1.0,
      u_line_type: lineStyleObj[lineType],
--- a/packages/layers/src/line/shaders/line_arc2d_vert.glsl
+++ b/packages/layers/src/line/shaders/line_arc2d_vert.glsl
@ -13,8 +13,8 @@ varying vec2 v_normal;

 varying float v_distance_ratio;
 uniform float u_line_type: 0.0;
-uniform vec2 u_dash_array: [10.0, 5.];
-varying vec2 v_dash_array;
+uniform vec4 u_dash_array: [10.0, 5., 0, 0];
+varying vec4 v_dash_array;

 #pragma include "projection"
 #pragma include "project"
--- a/packages/layers/src/line/shaders/line_arc_3d_vert.glsl
+++ b/packages/layers/src/line/shaders/line_arc_3d_vert.glsl
@ -13,9 +13,8 @@ varying vec4 v_color;
 varying vec2 v_normal;
 varying float v_distance_ratio;
 uniform float u_line_type: 0.0;
-uniform vec2 u_dash_array: [10.0, 5.];
-
-varying vec2 v_dash_array;
+uniform vec4 u_dash_array: [10.0, 5., 0, 0];
+varying vec4 v_dash_array;

 #pragma include "projection"
 #pragma include "project"
--- a/packages/layers/src/line/shaders/line_arc_frag.glsl
+++ b/packages/layers/src/line/shaders/line_arc_frag.glsl
@ -6,7 +6,7 @@ uniform float u_opacity;
 uniform float u_blur : 0.9;
 uniform float u_line_type: 0.0;
 varying vec2 v_normal;
-varying vec2 v_dash_array;
+varying vec4 v_dash_array;
 varying float v_distance_ratio;
 varying vec4 v_color;

@ -21,7 +21,12 @@ void main() {
  // float blur = smoothstep(1.0, u_blur, length(v_normal.xy));
  gl_FragColor.a *= u_opacity;
  if(u_line_type == LineTypeDash) {
-    gl_FragColor.a *= (1.0- step(v_dash_array.x, mod(v_distance_ratio, v_dash_array.x +v_dash_array.y)));
+   float flag = 0.;
+    float dashLength = mod(v_distance_ratio, v_dash_array.x + v_dash_array.y + v_dash_array.z + v_dash_array.w);
+    if(dashLength < v_dash_array.x || (dashLength > (v_dash_array.x + v_dash_array.y) && dashLength <  v_dash_array.x + v_dash_array.y + v_dash_array.z)) {
+      flag = 1.;
+    }
+    gl_FragColor.a *=flag;
  }

  if(u_aimate.x == Animate) {
--- a/packages/layers/src/line/shaders/line_arc_great_circle_vert.glsl
+++ b/packages/layers/src/line/shaders/line_arc_great_circle_vert.glsl
@ -13,8 +13,8 @@ varying vec2 v_normal;

 varying float v_distance_ratio;
 uniform float u_line_type: 0.0;
-uniform vec2 u_dash_array: [10.0, 5.];
-varying vec2 v_dash_array;
+uniform vec4 u_dash_array: [10.0, 5., 0, 0];
+varying vec4 v_dash_array;

 #pragma include "projection"
 #pragma include "project"
--- a/packages/layers/src/line/shaders/line_arc_vert.glsl
+++ b/packages/layers/src/line/shaders/line_arc_vert.glsl
@ -13,8 +13,8 @@ varying vec2 v_normal;

 varying float v_distance_ratio;
 uniform float u_line_type: 0.0;
-uniform vec2 u_dash_array: [10.0, 5.];
-varying vec2 v_dash_array;
+uniform vec4 u_dash_array: [10.0, 5., 0, 0];
+varying vec4 v_dash_array;
 #pragma include "projection"
 #pragma include "project"
 #pragma include "picking"
@ -48,7 +48,7 @@ vec2 getExtrusionOffset(vec2 line_clipspace, float offset_direction) {
  vec2 dir_screenspace = normalize(line_clipspace);
  // rotate by 90 degrees
   dir_screenspace = vec2(-dir_screenspace.y, dir_screenspace.x);
-  vec2 offset = dir_screenspace * offset_direction * a_Size / 2.0;
+  vec2 offset = dir_screenspace * offset_direction * setPickingSize(a_Size) / 2.0;
  return offset;
 }
 vec2 getNormal(vec2 line_clipspace, float offset_direction) {
--- a/packages/layers/src/line/shaders/line_bezier_vert.glsl
+++ b/packages/layers/src/line/shaders/line_bezier_vert.glsl
@ -13,8 +13,8 @@ varying vec2 v_normal;

 varying float v_distance_ratio;
 uniform float u_line_type: 0.0;
-uniform vec2 u_dash_array: [10.0, 5.];
-varying vec2 v_dash_array;
+uniform vec4 u_dash_array: [10.0, 5., 0, 0];
+varying vec4 v_dash_array;
 #pragma include "projection"
 #pragma include "project"
 #pragma include "picking"
--- a/packages/layers/src/line/shaders/line_frag.glsl
+++ b/packages/layers/src/line/shaders/line_frag.glsl
@ -12,7 +12,7 @@ varying vec2 v_normal;
 uniform float u_dash_offset : 0.0;
 uniform float u_dash_ratio : 0.1;
 varying float v_distance_ratio;
-varying vec2 v_dash_array;
+varying vec4 v_dash_array;
 varying float v_side;


@ -35,7 +35,13 @@ void main() {
  }
 // dash line
  if(u_line_type == LineTypeDash) {
-    gl_FragColor.a *=(1.0- step(v_dash_array.x, mod(v_distance_ratio, v_dash_array.x +v_dash_array.y)));
+    float flag = 0.;
+    float dashLength = mod(v_distance_ratio, v_dash_array.x + v_dash_array.y + v_dash_array.z + v_dash_array.w);
+    if(dashLength < v_dash_array.x || (dashLength > (v_dash_array.x + v_dash_array.y) && dashLength <  v_dash_array.x + v_dash_array.y + v_dash_array.z)) {
+      flag = 1.;
+    }
+    gl_FragColor.a *=flag;
+    // gl_FragColor.a *=(1.0- step(v_dash_array.x, mod(v_distance_ratio, dashLength)));
  }

  gl_FragColor = filterColor(gl_FragColor);
--- a/packages/layers/src/line/shaders/line_vert.glsl
+++ b/packages/layers/src/line/shaders/line_vert.glsl
@ -14,14 +14,14 @@ attribute float a_Distance;

 uniform mat4 u_ModelMatrix;
 uniform float u_line_type: 0.0;
-uniform vec2 u_dash_array: [10.0, 5.];
+uniform vec4 u_dash_array: [10.0, 5.，0, 0];
 uniform vec4 u_aimate: [ 0, 2., 1.0, 0.2 ];

 #pragma include "projection"
 #pragma include "picking"

 varying vec4 v_color;
-varying vec2 v_dash_array;
+varying vec4 v_dash_array;
 varying vec2 v_normal;
 varying float v_distance_ratio;
 varying float v_side;
--- a/packages/map/src/geo/simple.ts
+++ b/packages/map/src/geo/simple.ts
@ -0,0 +1,84 @@
+import LngLat, { earthRadius, LngLatLike } from '../geo/lng_lat';
+
+/*
+ * The average circumference of the world in meters.
+ */
+const earthCircumfrence = 2 * Math.PI * earthRadius; // meters
+
+/*
+ * The circumference at a line of latitude in meters.
+ */
+function circumferenceAtLatitude(latitude: number) {
+  return earthCircumfrence * Math.cos((latitude * Math.PI) / 180);
+}
+
+export function mercatorXfromLng(lng: number) {
+  return lng;
+}
+
+export function mercatorYfromLat(lat: number) {
+  return lat;
+}
+
+export function mercatorZfromAltitude(altitude: number, lat: number) {
+  return altitude;
+}
+
+export function lngFromMercatorX(x: number) {
+  return x;
+}
+
+export function latFromMercatorY(y: number) {
+  return y;
+}
+
+export function altitudeFromMercatorZ(z: number, y: number) {
+  return z;
+}
+
+/**
+ * Determine the Mercator scale factor for a given latitude, see
+ * https://en.wikipedia.org/wiki/Mercator_projection#Scale_factor
+ *
+ * At the equator the scale factor will be 1, which increases at higher latitudes.
+ *
+ * @param {number} lat Latitude
+ * @returns {number} scale factor
+ * @private
+ */
+export function mercatorScale(lat: number) {
+  return 1;
+}
+
+export default class SimpleCoordinate {
+  public static fromLngLat(lngLatLike: LngLatLike, altitude: number = 0) {
+    const lngLat = LngLat.convert(lngLatLike);
+
+    return new SimpleCoordinate(
+      mercatorXfromLng(lngLat.lng),
+      mercatorYfromLat(lngLat.lat),
+      mercatorZfromAltitude(altitude, lngLat.lat),
+    );
+  }
+  public x: number;
+  public y: number;
+  public z: number;
+
+  constructor(x: number, y: number, z: number = 0) {
+    this.x = +x;
+    this.y = +y;
+    this.z = +z;
+  }
+  public toLngLat() {
+    return new LngLat(this.x, this.y);
+  }
+
+  public toAltitude() {
+    return this.z;
+  }
+
+  public meterInMercatorCoordinateUnits() {
+    // 1 meter / circumference at equator in meters * Mercator projection scale factor at this latitude
+    return 1;
+  }
+}
--- a/packages/maps/package.json
+++ b/packages/maps/package.json
@ -1,6 +1,6 @@
 {
  "name": "@antv/l7-maps",
-  "version": "2.2.11",
+  "version": "2.2.14",
  "description": "",
  "main": "lib/index.js",
  "module": "es/index.js",
@ -25,11 +25,10 @@
  "author": "xiaoiver",
  "license": "ISC",
  "dependencies": {
-    "@antv/l7-core": "2.2.11",
-    "@antv/l7-utils": "2.2.11",
+    "@antv/l7-core": "2.2.14",
+    "@antv/l7-utils": "2.2.14",
    "@babel/runtime": "^7.7.7",
    "@types/amap-js-api": "^1.4.6",
-    "antd": "4.2.5",
    "gl-matrix": "^3.1.0",
    "inversify": "^5.0.1",
    "mapbox-gl": "^1.2.1",
--- a/packages/maps/src/mapbox/map.ts
+++ b/packages/maps/src/mapbox/map.ts
@ -27,6 +27,7 @@ import mapboxgl, { IControl, Map } from 'mapbox-gl';
 import 'mapbox-gl/dist/mapbox-gl.css';
 import { IMapboxInstance } from '../../typings/index';
 import Viewport from './Viewport';
+window.mapboxgl = mapboxgl;
 const EventMap: {
  [key: string]: any;
 } = {
@ -240,10 +241,11 @@ export default class MapboxService
    lnglat: [number, number],
    altitude: number,
  ): IMercator {
-    const { x = 0, y = 0, z = 0 } = mapboxgl.MercatorCoordinate.fromLngLat(
-      lnglat,
-      altitude,
-    );
+    const {
+      x = 0,
+      y = 0,
+      z = 0,
+    } = window.mapboxgl.MercatorCoordinate.fromLngLat(lnglat, altitude);
    return { x, y, z };
  }
  public getModelMatrix(
@ -253,7 +255,7 @@ export default class MapboxService
    scale: [number, number, number] = [1, 1, 1],
    origin: IMercator = { x: 0, y: 0, z: 0 },
  ): number[] {
-    const modelAsMercatorCoordinate = mapboxgl.MercatorCoordinate.fromLngLat(
+    const modelAsMercatorCoordinate = window.mapboxgl.MercatorCoordinate.fromLngLat(
      lnglat,
      altitude,
    );
@ -303,7 +305,7 @@ export default class MapboxService
     */

    // 判断全局 mapboxgl 对象的加载
-    if (!mapInstance && !mapboxgl) {
+    if (!mapInstance && !window.mapboxgl) {
      // 用户有时传递进来的实例是继承于 mapbox 实例化的，不一定是 mapboxgl 对象。
      this.logger.error(this.configService.getSceneWarninfo('SDK'));
    }
@ -311,16 +313,16 @@ export default class MapboxService
    if (
      token === MAPBOX_API_KEY &&
      style !== 'blank' &&
-      !mapboxgl.accessToken &&
+      !window.mapboxgl.accessToken &&
      !mapInstance // 如果用户传递了 mapInstance，应该不去干预实例的 accessToken。
    ) {
      this.logger.warn(this.configService.getSceneWarninfo('MapToken'));
    }

    // 判断是否设置了 accessToken
-    if (!mapInstance && !mapboxgl.accessToken) {
+    if (!mapInstance && !window.mapboxgl.accessToken) {
      // 用户有时传递进来的实例是继承于 mapbox 实例化的，不一定是 mapboxgl 对象。
-      mapboxgl.accessToken = token;
+      window.mapboxgl.accessToken = token;
    }

    if (mapInstance) {
@ -330,7 +332,7 @@ export default class MapboxService
    } else {
      this.$mapContainer = this.creatAmapContainer(id);
      // @ts-ignore
-      this.map = new mapboxgl.Map({
+      this.map = new window.mapboxgl.Map({
        container: this.$mapContainer,
        style: this.getMapStyle(style),
        attributionControl,
--- a/packages/react/package.json
+++ b/packages/react/package.json
@ -1,6 +1,6 @@
 {
  "name": "@antv/l7-react",
-  "version": "2.2.11",
+  "version": "2.2.14",
  "description": "",
  "main": "lib/index.js",
  "module": "es/index.js",
@ -24,8 +24,8 @@
  "author": "lzxue",
  "license": "ISC",
  "dependencies": {
-    "@antv/l7": "2.2.11",
-    "@antv/l7-maps": "2.2.11",
+    "@antv/l7": "2.2.14",
+    "@antv/l7-maps": "2.2.14",
    "@babel/runtime": "^7.7.7",
    "load-styles": "^2.0.0"
  },
--- a/packages/renderer/package.json
+++ b/packages/renderer/package.json
@ -1,6 +1,6 @@
 {
  "name": "@antv/l7-renderer",
-  "version": "2.2.11",
+  "version": "2.2.14",
  "description": "",
  "main": "lib/index.js",
  "module": "es/index.js",
@ -25,7 +25,7 @@
    "gl": "^4.4.0"
  },
  "dependencies": {
-    "@antv/l7-core": "2.2.11",
+    "@antv/l7-core": "2.2.14",
    "@babel/runtime": "^7.7.7",
    "inversify": "^5.0.1",
    "lodash": "^4.17.15",
--- a/packages/scene/package.json
+++ b/packages/scene/package.json
@ -1,6 +1,6 @@
 {
  "name": "@antv/l7-scene",
-  "version": "2.2.11",
+  "version": "2.2.14",
  "description": "",
  "main": "lib/index.js",
  "module": "es/index.js",
@ -22,12 +22,12 @@
  "author": "xiaoiver",
  "license": "ISC",
  "dependencies": {
-    "@antv/l7-component": "2.2.11",
-    "@antv/l7-core": "2.2.11",
-    "@antv/l7-maps": "2.2.11",
-    "@antv/l7-layers": "2.2.11",
-    "@antv/l7-renderer": "2.2.11",
-    "@antv/l7-utils": "2.2.11",
+    "@antv/l7-component": "2.2.14",
+    "@antv/l7-core": "2.2.14",
+    "@antv/l7-layers": "2.2.14",
+    "@antv/l7-maps": "2.2.14",
+    "@antv/l7-renderer": "2.2.14",
+    "@antv/l7-utils": "2.2.14",
    "@babel/runtime": "^7.7.7",
    "inversify": "^5.0.1",
    "mapbox-gl": "^1.2.1",
--- a/packages/source/package.json
+++ b/packages/source/package.json
@ -1,6 +1,6 @@
 {
  "name": "@antv/l7-source",
-  "version": "2.2.11",
+  "version": "2.2.14",
  "description": "",
  "main": "lib/index.js",
  "module": "es/index.js",
@ -25,8 +25,8 @@
  "license": "ISC",
  "dependencies": {
    "@antv/async-hook": "^2.1.0",
-    "@antv/l7-core": "2.2.11",
-    "@antv/l7-utils": "2.2.11",
+    "@antv/l7-core": "2.2.14",
+    "@antv/l7-utils": "2.2.14",
    "@babel/runtime": "^7.7.7",
    "@mapbox/geojson-rewind": "^0.4.0",
    "@turf/helpers": "^6.1.4",
--- a/packages/source/src/source.ts
+++ b/packages/source/src/source.ts
@ -58,22 +58,7 @@ export default class Source extends EventEmitter {
    super();
    // this.rawData = cloneDeep(data);
    this.originData = data;
-    if (cfg) {
-      if (cfg.parser) {
-        this.parser = cfg.parser;
-      }
-      if (cfg.transforms) {
-        this.transforms = cfg.transforms;
-      }
-      this.cluster = cfg.cluster || false;
-      if (cfg.clusterOptions) {
-        this.cluster = true;
-        this.clusterOptions = {
-          ...this.clusterOptions,
-          ...cfg.clusterOptions,
-        };
-      }
-    }
+    this.initCfg(cfg);

    this.hooks.init.tap('parser', () => {
      this.excuteParser();
@ -87,9 +72,10 @@ export default class Source extends EventEmitter {
    this.init();
  }

-  public setData(data: any) {
+  public setData(data: any, options?: ISourceCFG) {
    this.rawData = data;
    this.originData = data;
+    this.initCfg(options);
    this.init();
    this.emit('update');
  }
@ -161,6 +147,24 @@ export default class Source extends EventEmitter {
    return feature?._id;
  }

+  private initCfg(cfg?: ISourceCFG) {
+    if (cfg) {
+      if (cfg.parser) {
+        this.parser = cfg.parser;
+      }
+      if (cfg.transforms) {
+        this.transforms = cfg.transforms;
+      }
+      this.cluster = cfg.cluster || false;
+      if (cfg.clusterOptions) {
+        this.cluster = true;
+        this.clusterOptions = {
+          ...this.clusterOptions,
+          ...cfg.clusterOptions,
+        };
+      }
+    }
+  }
  private excuteParser(): void {
    const parser = this.parser;
    const type: string = parser.type || 'geojson';
--- a/packages/three/package.json
+++ b/packages/three/package.json
@ -1,6 +1,6 @@
 {
  "name": "@antv/l7-three",
-  "version": "2.2.11",
+  "version": "2.2.14",
  "description": "three for L7 ",
  "keywords": [
    "3D",
@ -43,7 +43,7 @@
  },
  "homepage": "https://github.com/antvis/L7#readme",
  "dependencies": {
-    "@antv/l7": "2.2.11",
+    "@antv/l7": "2.2.14",
    "@babel/runtime": "^7.7.7",
    "rollup": "^2.3.3",
    "rollup-plugin-less": "^1.1.2"
--- a/packages/utils/package.json
+++ b/packages/utils/package.json
@ -1,6 +1,6 @@
 {
  "name": "@antv/l7-utils",
-  "version": "2.2.11",
+  "version": "2.2.14",
  "description": "",
  "main": "lib/index.js",
  "module": "es/index.js",
--- a/stories/District/Layer/Country.tsx
+++ b/stories/District/Layer/Country.tsx
@ -197,6 +197,7 @@ export default class Country extends React.Component {
    ];
    scene.on('loaded', () => {
      const Layer = new CountryLayer(scene, {
+        visible: true,
        data: ProvinceData,
        joinBy: ['NAME_CHN', 'name'],
        // label: {
--- a/stories/District/Layer/Country2.tsx
+++ b/stories/District/Layer/Country2.tsx
@ -23,254 +23,187 @@ export default class Country extends React.Component {
        maxZoom: 4,
      }),
    });
-    const data = [
+    const ProvinceData = [
      {
-        name: '湖北',
-        confirm: 16678,
-        suspect: 0,
-        heal: 533,
-        dead: 479,
+        name: '云南省',
+        code: 530000,
+        value: 17881.12,
      },
      {
-        name: '广东',
-        confirm: 895,
-        suspect: 0,
-        heal: 37,
-        dead: 0,
+        name: '黑龙江省',
+        code: 230000,
+        value: 16361.62,
      },
      {
-        name: '浙江',
-        confirm: 895,
-        suspect: 0,
-        heal: 65,
-        dead: 0,
+        name: '贵州省',
+        code: 520000,
+        value: 14806.45,
      },
      {
-        name: '河南',
-        confirm: 764,
-        suspect: 0,
-        heal: 41,
-        dead: 2,
+        name: '北京市',
+        code: 110000,
+        value: 30319.98,
      },
      {
-        name: '湖南',
-        confirm: 661,
-        suspect: 0,
-        heal: 35,
-        dead: 0,
+        name: '河北省',
+        code: 130000,
+        value: 36010.27,
      },
      {
-        name: '江西',
-        confirm: 548,
-        suspect: 0,
-        heal: 27,
-        dead: 0,
+        name: '山西省',
+        code: 140000,
+        value: 16818.11,
      },
      {
-        name: '安徽',
-        confirm: 530,
-        suspect: 0,
-        heal: 20,
-        dead: 0,
+        name: '吉林省',
+        code: 220000,
+        value: 15074,
      },
      {
-        name: '重庆',
-        confirm: 376,
-        suspect: 0,
-        heal: 15,
-        dead: 2,
+        name: '宁夏回族自治区',
+        code: 640000,
+        value: 3705.18,
      },
      {
-        name: '江苏',
-        confirm: 341,
-        suspect: 0,
-        heal: 13,
-        dead: 0,
+        name: '辽宁省',
+        code: 210000,
+        value: 25315.35,
      },
      {
-        name: '山东',
-        confirm: 307,
-        suspect: 0,
-        heal: 13,
-        dead: 0,
+        name: '海南省',
+        code: 460000,
+        value: 4832.05,
      },
      {
-        name: '四川',
-        confirm: 301,
-        suspect: 0,
-        heal: 23,
-        dead: 1,
+        name: '内蒙古自治区',
+        code: 150000,
+        value: 17289.22,
      },
      {
-        name: '北京',
-        confirm: 253,
-        suspect: 0,
-        heal: 24,
-        dead: 1,
+        name: '天津市',
+        code: 120000,
+        value: 18809.64,
      },
      {
-        name: '上海',
-        confirm: 243,
-        suspect: 0,
-        heal: 15,
-        dead: 1,
+        name: '新疆维吾尔自治区',
+        code: 650000,
+        value: 12199.08,
      },
      {
-        name: '福建',
-        confirm: 205,
-        suspect: 0,
-        heal: 7,
-        dead: 0,
+        name: '上海市',
+        code: 310000,
+        value: 32679.87,
      },
      {
-        name: '黑龙江',
-        confirm: 190,
-        suspect: 0,
-        heal: 7,
-        dead: 2,
+        name: '陕西省',
+        code: 610000,
+        value: 24438.32,
      },
      {
-        name: '陕西',
-        confirm: 165,
-        suspect: 0,
-        heal: 6,
-        dead: 0,
+        name: '甘肃省',
+        code: 620000,
+        value: 8246.07,
      },
      {
-        name: '广西',
-        confirm: 150,
-        suspect: 0,
-        heal: 10,
-        dead: 0,
+        name: '安徽省',
+        code: 340000,
+        value: 30006.82,
      },
      {
-        name: '河北',
-        confirm: 135,
-        suspect: 0,
-        heal: 4,
-        dead: 1,
+        name: '香港特别行政区',
+        code: 810000,
+        value: 0,
      },
      {
-        name: '云南',
-        confirm: 124,
-        suspect: 0,
-        heal: 5,
-        dead: 0,
+        name: '广东省',
+        code: 440000,
+        value: 97277.77,
      },
      {
-        name: '海南',
-        confirm: 91,
-        suspect: 0,
-        heal: 4,
-        dead: 1,
+        name: '河南省',
+        code: 410000,
+        value: 48055.86,
      },
      {
-        name: '辽宁',
-        confirm: 81,
-        suspect: 0,
-        heal: 3,
-        dead: 0,
+        name: '湖南省',
+        code: 430000,
+        value: 36425.78,
      },
      {
-        name: '山西',
-        confirm: 81,
-        suspect: 0,
-        heal: 4,
-        dead: 0,
+        name: '江西省',
+        code: 360000,
+        value: 21984.78,
      },
      {
-        name: '天津',
-        confirm: 69,
-        suspect: 0,
-        heal: 2,
-        dead: 1,
+        name: '四川省',
+        code: 510000,
+        value: 40678.13,
      },
      {
-        name: '贵州',
-        confirm: 64,
-        suspect: 0,
-        heal: 8,
-        dead: 0,
+        name: '广西壮族自治区',
+        code: 450000,
+        value: 20353.51,
      },
      {
-        name: '甘肃',
-        confirm: 57,
-        suspect: 0,
-        heal: 4,
-        dead: 0,
+        name: '江苏省',
+        code: 320000,
+        value: 92595.4,
      },
      {
-        name: '吉林',
-        confirm: 54,
-        suspect: 0,
-        heal: 1,
-        dead: 0,
+        name: '澳门特别行政区',
+        code: 820000,
+        value: null,
      },
      {
-        name: '内蒙古',
-        confirm: 42,
-        suspect: 0,
-        heal: 3,
-        dead: 0,
+        name: '浙江省',
+        code: 330000,
+        value: 56197.15,
      },
      {
-        name: '宁夏',
-        confirm: 34,
-        suspect: 0,
-        heal: 1,
-        dead: 0,
+        name: '山东省',
+        code: 370000,
+        value: 76469.67,
      },
      {
-        name: '新疆',
-        confirm: 32,
-        suspect: 0,
-        heal: 0,
-        dead: 0,
+        name: '青海省',
+        code: 630000,
+        value: 2865.23,
      },
      {
-        name: '香港',
-        confirm: 18,
-        suspect: 0,
-        heal: 0,
-        dead: 1,
+        name: '重庆市',
+        code: 500000,
+        value: 20363.19,
      },
      {
-        name: '青海',
-        confirm: 17,
-        suspect: 0,
-        heal: 3,
-        dead: 0,
+        name: '福建省',
+        code: 350000,
+        value: 35804.04,
      },
      {
-        name: '台湾',
-        confirm: 11,
-        suspect: 0,
-        heal: 0,
-        dead: 0,
+        name: '湖北省',
+        code: 420000,
+        value: 39366.55,
      },
      {
-        name: '澳门',
-        confirm: 10,
-        suspect: 0,
-        heal: 0,
-        dead: 0,
+        name: '西藏自治区',
+        code: 540000,
+        value: 1477.63,
      },
      {
-        name: '西藏',
-        confirm: 1,
-        suspect: 0,
-        heal: 0,
-        dead: 0,
+        name: '台湾省',
+        code: 710000,
+        value: null,
      },
    ];
    scene.on('loaded', () => {
      const Layer = new CountryLayer(scene, {
-        data,
+        data: ProvinceData,
        depth: 1,
+        joinBy: ['NAME_CHN', 'name'],
        fill: {
          scale: 'quantile',
          color: {
-            field: 'confirm',
+            field: 'value',
            values: [
              '#feedde',
              '#fdd0a2',
@ -299,7 +232,7 @@ export default class Country extends React.Component {
    });
    scene2.on('loaded', () => {
      const Layer2 = new CountryLayer(scene2, {
-        data,
+        data: ProvinceData,
        label: {
          enable: false,
        },
@ -307,10 +240,16 @@ export default class Country extends React.Component {
          enable: false,
        },
        autoFit: false,
+        // label: {
+        //   field: 'NAME_CHN',
+        //   textAllowOverlap: true,
+        // },
+        depth: 1,
+        joinBy: ['NAME_CHN', 'name'],
        fill: {
          scale: 'quantile',
          color: {
-            field: 'confirm',
+            field: 'value',
            values: [
              '#feedde',
              '#fdd0a2',
--- a/stories/District/Layer/country_city.tsx
+++ b/stories/District/Layer/country_city.tsx
@ -26,21 +26,16 @@ export default class Country extends React.Component {
    scene.on('loaded', () => {
      const Layer = new CountryLayer(scene, {
        data: [],
+        geoDataLevel: 2,
        depth: 2,
-        stroke: '#fff',
+        provinceStroke: '#783D2D',
+        cityStroke: '#EBCCB4',
        coastlineWidth: 0.5,
        nationalWidth: 0.5,
        fill: {
          color: {
            field: 'NAME_CHN',
-            values: [
-              '#feedde',
-              '#fdd0a2',
-              '#fdae6b',
-              '#fd8d3c',
-              '#e6550d',
-              '#a63603',
-            ],
+            values: ['#D92568', '#E3507E', '#FC7AAB', '#F1D3E5', '#F2EEFF'],
          },
        },
        popup: {
--- a/stories/District/Layer/drillDown.tsx
+++ b/stories/District/Layer/drillDown.tsx
@ -35,12 +35,15 @@ export default class Country extends React.Component {
          color: {
            field: 'NAME_CHN',
            values: [
-              '#feedde',
-              '#fdd0a2',
-              '#fdae6b',
-              '#fd8d3c',
-              '#e6550d',
-              '#a63603',
+              '#f7fbff',
+              '#deebf7',
+              '#c6dbef',
+              '#9ecae1',
+              '#6baed6',
+              '#4292c6',
+              '#2171b5',
+              '#08519c',
+              '#08306b',
            ],
          },
        },
--- a/stories/District/Layer/world.tsx
+++ b/stories/District/Layer/world.tsx
@ -26,10 +26,10 @@ export default class Country extends React.Component {
    scene.on('loaded', () => {
      const Layer = new WorldLayer(scene, {
        data: [],
-        bubble: {
-          enable: true,
+        joinBy: ['SOC', 'SOC'],
+        fill: {
          color: {
-            field: 'NAME_CHN',
+            field: 'value',
            values: [
              '#feedde',
              '#fdd0a2',
@ -47,12 +47,32 @@ export default class Country extends React.Component {
          field: 'NAME_CHN',
        },
        popup: {
-          enable: false,
+          enable: true,
          Html: (props: any) => {
-            return `<span>${props.NAME_CHN}</span>`;
+            return `<span>${props.NAME_CHN + ':' + props.value}</span>`;
          },
        },
      });
+      Layer.on('loaded', () => {
+        console.log('完成');
+        Layer.updateData(
+          [
+            {
+              SOC: 'CHN',
+              value: 3000,
+            },
+            {
+              SOC: 'CAN',
+              value: 5000,
+            },
+            {
+              SOC: 'RUS',
+              value: 4000,
+            },
+          ],
+          ['SOC', 'SOC'],
+        );
+      });
    });
    this.scene = scene;
  }
--- a/stories/Draw/Components/DrawLine.tsx
+++ b/stories/Draw/Components/DrawLine.tsx
@ -16,36 +16,37 @@ export default class Circle extends React.Component {
      map: new Mapbox({
        pitch: 0,
        style: 'light',
-        center: [113.775374, 28.31067],
-        zoom: 12,
+        center: [79.8046875, 52.482780222078226],
+        zoom: 4,
      }),
    });
    this.scene = scene;
-    const linneData = {
-      type: 'FeatureCollection',
-      features: [
-        {
-          type: 'Feature',
-          properties: {},
-          geometry: {
-            type: 'LineString',
-            coordinates: [
-              [79.8046875, 52.482780222078226],
-              [110.74218749999999, 36.87962060502676],
-              [111.4453125, 19.973348786110602],
-              [112.8515625, 9.795677582829743],
-              [95.2734375, -6.664607562172573],
-              [82.265625, -14.264383087562637],
-              [74.53125, -25.799891182088306],
-              [68.203125, -30.145127183376115],
-              [41.484375, -16.63619187839765],
-            ],
-          },
-        },
-      ],
-    };
    const line = scene.on('loaded', () => {
-      const drawLine = new DrawLine(scene);
+      const drawLine = new DrawLine(scene, {
+        data: {
+          type: 'FeatureCollection',
+          features: [
+            {
+              type: 'Feature',
+              properties: {},
+              geometry: {
+                type: 'LineString',
+                coordinates: [
+                  [79.8046875, 52.482780222078226],
+                  [110.74218749999999, 36.87962060502676],
+                  [111.4453125, 19.973348786110602],
+                  [112.8515625, 9.795677582829743],
+                  [95.2734375, -6.664607562172573],
+                  [82.265625, -14.264383087562637],
+                  [74.53125, -25.799891182088306],
+                  [68.203125, -30.145127183376115],
+                  [41.484375, -16.63619187839765],
+                ],
+              },
+            },
+          ],
+        },
+      });
      drawLine.enable();
    });
  }
--- a/stories/Draw/Components/DrawPoint.tsx
+++ b/stories/Draw/Components/DrawPoint.tsx
@ -23,7 +23,37 @@ export default class Circle extends React.Component {
    this.scene = scene;

    scene.on('loaded', () => {
-      const drawPoint = new DrawPoint(scene);
+      const drawPoint = new DrawPoint(scene, {
+        data: {
+          type: 'FeatureCollection',
+          features: [
+            {
+              type: 'Feature',
+              properties: {},
+              geometry: {
+                type: 'Point',
+                coordinates: [88.9453125, 53.330872983017066],
+              },
+            },
+            {
+              type: 'Feature',
+              properties: {},
+              geometry: {
+                type: 'Point',
+                coordinates: [109.3359375, 28.613459424004414],
+              },
+            },
+            {
+              type: 'Feature',
+              properties: {},
+              geometry: {
+                type: 'Point',
+                coordinates: [97.734375, 35.460669951495305],
+              },
+            },
+          ],
+        },
+      });
      drawPoint.enable();
    });
  }
--- a/stories/Layers/components/Arc2DLine.tsx
+++ b/stories/Layers/components/Arc2DLine.tsx
@ -25,6 +25,7 @@ export default class Arc2DLineDemo extends React.Component {
    });
    const lineLayer = new LineLayer({
      blend: 'normal',
+      pickingBuffer: 10,
    })
      .source(
        [
@ -48,7 +49,7 @@ export default class Arc2DLineDemo extends React.Component {
      .size(2)
      .shape('arc')
      .animate({
-        enable: true,
+        enable: false,
        interval: 0.1,
        trailLength: 0.5,
        duration: 0.5,
--- a/stories/Layers/components/Polygon3D.tsx
+++ b/stories/Layers/components/Polygon3D.tsx
@ -40,7 +40,7 @@ export default class Polygon3D extends React.Component {
    const layer = new PolygonLayer({})
      .source(await response.json())
      .shape('extrude')
-      .size('h20', [100, 120, 160, 200, 260, 500])
+      .size('h20', [10, 12, 16, 20, 26, 50])
      .active({ color: 'blue' })
      .color('h20', [
        '#816CAD',
--- a/stories/Layers/components/dash.tsx
+++ b/stories/Layers/components/dash.tsx
@ -1,5 +1,5 @@
 import { LineLayer, Scene } from '@antv/l7';
-import { Mapbox, GaodeMap } from '@antv/l7-maps';
+import { GaodeMap, Mapbox } from '@antv/l7-maps';
 import * as React from 'react';

 export default class DashLineDemo extends React.Component {
@ -46,7 +46,8 @@ export default class DashLineDemo extends React.Component {
        ].reverse(),
      )
      .style({
-        // lineType: 'dash',
+        lineType: 'dash',
+        dashArray: [4, 2, 2, 2],
        opacity: 1.0,
      });

--- a/stories/Layers/components/polygon.tsx
+++ b/stories/Layers/components/polygon.tsx
@ -114,7 +114,7 @@ export default class TextLayerDemo extends React.Component {

    const scene = new Scene({
      id: 'map',
-      map: new Mapbox({
+      map: new GaodeMap({
        center: [120.19382669582967, 30.258134],
        pitch: 0,
        style: 'blank',
@ -127,10 +127,11 @@ export default class TextLayerDemo extends React.Component {
          type: 'FeatureCollection',
          features: [],
        })
-        .shape('fill')
+        .shape('extrude')
        .scale('childrenNum', {
          type: 'quantile',
        })
+        .size('childrenNum', [10, 100000000])
        // .color('red')
        .color('childrenNum', [
          '#D92568',
--- a/stories/Source/components/multiPolygon.tsx
+++ b/stories/Source/components/multiPolygon.tsx
@ -1,5 +1,5 @@
 import { LineLayer, PolygonLayer, Scene } from '@antv/l7';
-import { GaodeMap } from '@antv/l7-maps';
+import { GaodeMap, Mapbox } from '@antv/l7-maps';
 import * as React from 'react';

 function convertRGB2Hex(rgb: number[]) {
@ -27,17 +27,57 @@ export default class MultiPolygon extends React.Component {
      map: new GaodeMap({
        pitch: 0,
        style: 'dark',
-        center: [121.775374, 31.31067],
-        zoom: 5,
+        center: [118.70796203613281, 31.84956532831343],
+        zoom: 12,
      }),
    });
    const data = await response.json();
    // console.log(data.features[5]);
    // data.features = data.features.slice(6);
-    const layer = new LineLayer()
-      .source(data)
-      .shape('line')
-      .size(1)
+    const layer = new PolygonLayer()
+      .source({
+        type: 'FeatureCollection',
+        features: [
+          {
+            type: 'Feature',
+            properties: {},
+            geometry: {
+              type: 'Polygon',
+              coordinates: [
+                [
+                  [118.70796203613281, 31.84956532831343],
+                  [118.67019653320312, 31.783049527817784],
+                  [118.70384216308594, 31.757947795369688],
+                  [118.7944793701172, 31.79647323968844],
+                  [118.78829956054686, 31.85073184447357],
+                  [118.70796203613281, 31.84956532831343],
+                ],
+              ],
+            },
+          },
+          {
+            type: 'Feature',
+            properties: {},
+            geometry: {
+              type: 'Polygon',
+              coordinates: [
+                [
+                  [116.96044921875, 29.38217507514529],
+                  [114.41162109375, 30.315987718557867],
+                  [114.78515624999999, 28.43971381702788],
+                  [114.93896484374999, 27.0982539061379],
+                  [116.98242187499999, 27.01998400798257],
+                  [119.20166015625, 28.091366281406945],
+                  [119.17968749999999, 29.38217507514529],
+                  [116.96044921875, 29.38217507514529],
+                ],
+              ],
+            },
+          },
+        ],
+      })
+      .shape('extrude')
+      .size(10)
      .color('red')
      .style({
        opacity: 1.0,
--- a/stories/customMap/components/coord.tsx
+++ b/stories/customMap/components/coord.tsx
@ -0,0 +1,77 @@
+// @ts-ignore
+import { Scene } from '@antv/l7';
+import { PolygonLayer } from '@antv/l7-layers';
+import { Map } from '@antv/l7-maps';
+import * as React from 'react';
+
+export default class ScaleComponent extends React.Component {
+  private scene: Scene;
+
+  public componentWillUnmount() {
+    this.scene.destroy();
+  }
+
+  public async componentDidMount() {
+    const scene = new Scene({
+      id: 'map',
+      map: new Map({
+        coord: 'simple',
+        hash: true,
+        center: [200, 200],
+        pitch: 0,
+        zoom: 0,
+      }),
+    });
+
+    const layer = new PolygonLayer({
+      name: '01',
+    });
+
+    layer
+      .source({
+        type: 'FeatureCollection',
+        features: [
+          {
+            type: 'Feature',
+            properties: {},
+            geometry: {
+              type: 'Polygon',
+              coordinates: [
+                [
+                  [20, 20],
+                  [400, 20],
+                  [400, 400],
+                  [20, 400],
+                  [20, 20],
+                ],
+              ],
+            },
+          },
+        ],
+      })
+      .color('#2E8AE6')
+      .shape('fill')
+      .style({
+        opacity: 1.0,
+      });
+    scene.addLayer(layer);
+    scene.on('loaded', () => {
+      console.log(scene.getCenter());
+    });
+  }
+
+  public render() {
+    return (
+      <div
+        id="map"
+        style={{
+          position: 'absolute',
+          top: 0,
+          left: 0,
+          right: 0,
+          bottom: 0,
+        }}
+      />
+    );
+  }
+}