Merge branch 'master' into district_attach

2020-07-04 14:06:58 +08:00 · 2020-07-04 14:06:58 +08:00 · 39dd92c3c2
parent b060f6fca7 eb9cf0b035
commit 39dd92c3c2
66 changed files with 636 additions and 161 deletions
--- a/.storybook/webpack.config.js
+++ b/.storybook/webpack.config.js
@ -37,7 +37,7 @@ module.exports = ({ config }) => {
  }
  );
  config.resolve.alias = {
-    '@antv/l7-district': path.resolve(__dirname, '../packages/boundry/src'),
+    '@antv/l7-district': path.resolve(__dirname, '../packages/boundary/src'),
  }

  config.resolve.extensions.push('.ts', '.tsx', 'css', '.js', '.glsl');
--- a/docs/api/component/markerLayer.en.md
+++ b/docs/api/component/markerLayer.en.md
@ -40,7 +40,8 @@ scene.addMarkerLayer(markerLayer);
  - field `string` 聚合统计字段
  - method `sum| max| min| mean`
  - element `function` 通过回调函数设置聚合 Marker 的样式，返回 dom 元素
-    参数：feature
+
+    回调函数包含以下参数
    point_count 默认 聚合元素个数
    clusterData `Array` 聚合节点的原始数据
    point_sum 聚合求和 根据 field 和 method 计算
--- a/docs/api/component/markerLayer.zh.md
+++ b/docs/api/component/markerLayer.zh.md
@ -41,9 +41,7 @@ scene.addMarkerLayer(markerLayer);
  - field `string` 聚合统计字段
  - method `sum| max| min| mean`
  - element `function` 通过回调函数设置聚合 Marker 的样式，返回 dom 元素
-
-    参数：feature
-
+    回调函数包含以下参数
    - point_count 默认 聚合元素个数
    - clusterData `Array` 聚合节点的原始数据
    - point_sum 聚合求和 根据 field 和 method 计算
--- a/docs/api/district/baselayer.en.md
+++ b/docs/api/district/baselayer.en.md
@ -24,6 +24,8 @@ order: 2
  - joinBy 数据关联，属性数据如何内部空间数据关联绑定 目前支持 NAME_CHN,adcode 字段连接
    对照表 `Array [string, string]` 第一个值为空间数据字段，第二个为传入数据字段名
  - depth 数据显示层级 0：国家级，1:省级，2: 市级，3：线级
+  - showBorder `boolean` 是否显示国界线，默认显示，不建议不显示
+  - simplifyTolerance 数据抽稀容差,默认不抽稀 `boolean | number` 单位为度，一度约 111km，数字越大精度越低。参考设置数据 0.01
  - label 标注配置项 支持常量，不支持数据映射

    - enable `boolean` 是否显示标注
@ -91,6 +93,8 @@ District 提供 polygon 数据需要跟用户的属性数据，通过关系字

 #### fillLayer

+图层事件可以通过该属性进行设置
+
 ### 方法

 #### updateData(data, joinBy)
@ -102,6 +106,10 @@ District 提供 polygon 数据需要跟用户的属性数据，通过关系字
 - data 需要更新的数据
 - joinBy 关联字段 可选，如果不设置保持和初始化一致。

+### getFillData
+
+获取填充数据，可用于绘制独立的边界线
+
 #### show

 显示图层
--- a/docs/api/district/baselayer.zh.md
+++ b/docs/api/district/baselayer.zh.md
@ -22,6 +22,7 @@ order: 2
  - data `Array` 属性数据用于可视化渲染
  - visible 地图是否可见
  - joinBy 数据关联，属性数据如何内部空间数据关联绑定 目前支持 NAME_CHN,adcode 字段连接
+  - simplifyTolerance 数据抽稀容差,默认不抽稀 `boolean | number` 单位为度，一度约 111km，数字越大精度越低。参考设置数据 0.01
    对照表 `Array [string, string]` 第一个值为空间数据字段，第二个为传入数据字段名
  - depth 数据显示层级 0：国家级，1:省级，2: 市级，3：线级
  - label 标注配置项 支持常量，不支持数据映射
@ -34,6 +35,9 @@ order: 2
    - strokeWidth 文字描边宽度
    - textAllowOverlap 是否允许文字压盖
    - opacity 标注透明度
+    - spacing: `number` 文本包围盒 padding [水平，垂直]，影响碰撞检测结果，避免相邻文本靠的太近
+    - padding: `[number, number]` 文本相对锚点的偏移量 [x, y]
+      其他包括 text [style 的配置](../layer/point_layer/text#style)

  - fill 填充配置项 支持数据映射
    - color 图层填充颜色，支持常量和数据映射
@ -51,8 +55,7 @@ order: 2
    - size 气泡大小 支持常量、数据映射
    - shape 气泡形状 支持常量、数据映射
    - style 气泡图样式 同 PointLayer
-    - filter 图层过滤方法，支持常量和数据映射 同 layer.filter 方法
-      数据映射 - field 填充映射字段 - values 回调函数 `false` 返回值将会被过滤掉
+  - showBorder `boolean` 是否显示国界线，默认显示，不建议不显示
  - stroke 填充描边颜色 `ProvinceLayer, CityLayer, CountyLayer`
  - strokeWidth 填充描边宽度 `ProvinceLayer, CityLayer, CountyLayer`
  - autoFit 是否自动缩放到图层范围 `boolean`
@ -95,6 +98,8 @@ District 提供 polygon 数据需要跟用户的属性数据，通过关系字

 #### fillLayer

+图层事件可以通过该属性进行设置
+
 ### 方法

 #### updateData(data, joinBy)
@ -106,6 +111,10 @@ District 提供 polygon 数据需要跟用户的属性数据，通过关系字
 - data 需要更新的数据
 - joinBy 关联字段 可选，如果不设置保持和初始化一致。

+### getFillData
+
+获取填充数据，可用于绘制独立的边界线
+
 #### show

 显示图层
--- a/docs/api/district/drilldown.en.md
+++ b/docs/api/district/drilldown.en.md
@ -70,6 +70,9 @@ DrillDownLayer 提供默认提供通过 Layer 的交互事件，实现上钻下
 - strokeWidth `number` 描边宽度 `2`
 - textAllowOverlap: `boolean` 文字是否允许压盖 `true`
 - opacity `number` 透明度 `1`
+- spacing: `number` 文本包围盒 padding [水平，垂直]，影响碰撞检测结果，避免相邻文本靠的太近
+- padding: `[number, number]` 文本相对锚点的偏移量 [x, y]
+  其他包括 text [style 的配置](../layer/point_layer/text#style)

 #### bubbleOption

--- a/docs/api/layer/point_layer/text.zh.md
+++ b/docs/api/layer/point_layer/text.zh.md
@ -27,7 +27,21 @@ layer.shape('name','text')
 ### style

 - opacity  `number`  
- textAnchor  `string` 文本相对锚点的位置 center|left|right|top|bottom|top-left
+- textAnchor  `string` 文本相对锚点的位置 
+`'right' 
+  | 'top-right'
+  | 'left'
+  | 'bottom-right'
+  | 'left'
+  | 'top-left'
+  | 'bottom-left'
+  | 'bottom'
+  | 'bottom-right'
+  | 'bottom-left'
+  | 'top'
+  | 'top-right'
+  | 'top-left'
+  | 'center';`
 - spacing:  `number` 文本包围盒 padding [水平，垂直]，影响碰撞检测结果，避免相邻文本靠的太近
 - padding:  `[number, number]`  文本相对锚点的偏移量 [x, y]
 - stroke: `string`; 描边颜色
--- a/examples/district/basic/API.en.md
+++ b/examples/district/basic/API.en.md
@ -43,6 +43,8 @@ District 支持下面几种图
  - joinBy 数据关联，属性数据如何内部空间数据关联绑定 目前支持 NAME_CHN,adcode 字段连接
    对照表 `Array [string, string]` 第一个值为空间数据字段，第二个为传入数据字段名
  - depth 数据显示层级 0：国家级，1:省级，2: 市级，3：线级
+  - showBorder `boolean` 是否显示国界线，默认显示，不建议不显示
+  - simplifyTolerance 数据抽稀容差,默认不抽稀 `boolean | number` 单位为度，一度约111km，数字越大精度越低。参考设置数据 0.01
  - label 标注配置项 支持常量，不支持数据映射
      - enable `boolean` 是否显示标注
      - color 标注字体颜色 常量
@ -52,6 +54,9 @@ District 支持下面几种图
      - strokeWidth 文字描边宽度
      - textAllowOverlap 是否允许文字压盖
      - opacity 标注透明度
+      - spacing:  `number` 文本包围盒 padding [水平，垂直]，影响碰撞检测结果，避免相邻文本靠的太近
+      - padding:  `[number, number]`  文本相对锚点的偏移量 [x, y]
+    其他包括 text [style 的配置](../layer/point_layer/text#style)
  - fill 填充配置项 支持数据映射
      - color 图层填充颜色，支持常量和数据映射
          常量：统一设置成一样的颜色
@ -66,6 +71,7 @@ District 支持下面几种图
    - size 气泡大小 支持常量、数据映射
    - shape 气泡形状 支持常量、数据映射
    - style 气泡图样式 同 PointLayer
+
  - stroke 填充描边颜色 
  - strokeWidth 填充描边宽度
  - autoFit 是否自动缩放到图层范围 `boolean`
@ -101,6 +107,8 @@ District 提供polygon数据需要跟用户的属性数据，通过关系字段
  行政区划组件每个图层有多个子图层组成，如标注层，国界线、省界线等等，
  
  #### fillLayer
+  
+  图层事件可以通过该属性进行设置

 ### 方法

@ -111,6 +119,10 @@ District 提供polygon数据需要跟用户的属性数据，通过关系字段
 - data 需要更新的数据
 - joinBy 关联字段 可选，如果不设置保持和初始化一致。

+### getFillData
+
+获取填充数据，可用于绘制独立的边界线
+
 #### show

 显示图层
--- a/examples/district/basic/API.zh.md
+++ b/examples/district/basic/API.zh.md
@ -40,6 +40,8 @@ District 支持下面几种图
  - visible 地图是否可见
  - joinBy 数据关联，属性数据如何内部空间数据关联绑定 目前支持 NAME_CHN,adcode 字段连接
    对照表 `Array [string, string]` 第一个值为空间数据字段，第二个为传入数据字段名
+  - showBorder `boolean` 是否显示国界线，默认显示，不建议不显示
+  - simplifyTolerance 数据抽稀容差,默认不抽稀 `boolean | number` 单位为度，一度约111km，数字越大精度越低。参考设置数据 0.01
  - depth 数据显示层级 0：国家级，1:省级，2: 市级，3：线级
  - label 标注配置项 支持常量，不支持数据映射
      - enable `boolean` 是否显示标注
@ -50,6 +52,9 @@ District 支持下面几种图
      - strokeWidth 文字描边宽度
      - textAllowOverlap 是否允许文字压盖
      - opacity 标注透明度
+      - spacing:  `number` 文本包围盒 padding [水平，垂直]，影响碰撞检测结果，避免相邻文本靠的太近
+      - padding:  `[number, number]`  文本相对锚点的偏移量 [x, y]
+      其他包括 text [style 的配置](../layer/point_layer/text#style)
  - fill 填充配置项 支持数据映射
      - color 图层填充颜色，支持常量和数据映射
          常量：统一设置成一样的颜色
@ -110,6 +115,7 @@ District 提供polygon数据需要跟用户的属性数据，通过关系字段
  行政区划组件每个图层有多个子图层组成，如标注层，国界线、省界线等等，
  
  #### fillLayer
+  图层事件可以通过该属性进行设置

 ### 方法

@ -120,6 +126,10 @@ District 提供polygon数据需要跟用户的属性数据，通过关系字段
 - data 需要更新的数据
 - joinBy 关联字段 可选，如果不设置保持和初始化一致。

+### getFillData
+
+获取填充数据，可用于绘制独立的边界线
+
 #### show

 显示图层
--- a/examples/tutorial/layer/demo/layer_highlight.js
+++ b/examples/tutorial/layer/demo/layer_highlight.js
@ -0,0 +1,63 @@
+import { PolygonLayer, LineLayer, Scene } from '@antv/l7';
+import { GaodeMap } from '@antv/l7-maps';
+const scene = new Scene({
+  id: 'map',
+  map: new GaodeMap({
+    style: 'light',
+    pitch: 0,
+    center: [ 118.7368, 32.0560 ],
+    zoom: 9
+  })
+});
+scene.on('loaded', () => {
+  fetch(
+    'https://gw.alipayobjects.com/os/basement_prod/91247d10-585b-4406-b1e2-93b001e3a0e4.json'
+  )
+    .then(res => res.json())
+    .then(data => {
+      const filllayer = new PolygonLayer({
+        name: 'fill'
+      })
+        .source(data)
+        .shape('fill')
+        .color('unit_price', [ '#f0f9e8', '#ccebc5', '#a8ddb5', '#7bccc4', '#43a2ca', '#0868ac' ])
+        .style({
+          opacity: 1
+        });
+      const linelayer = new LineLayer({
+        zIndex: 1,
+        name: 'line'
+      })
+        .source(data)
+        .shape('line')
+        .size(0.5)
+        .color('#fff')
+        .style({
+          opacity: 0.5
+        });
+      const hightLayer = new LineLayer({
+        zIndex: 4, // 设置显示层级
+        name: 'hightlight'
+      })
+        .source({
+          type: 'FeatureCollection',
+          features: [ ]
+        })
+        .shape('line')
+        .size(2)
+        .color('red')
+        .style({
+          opacity: 1
+        });
+      scene.addLayer(filllayer);
+      scene.addLayer(linelayer);
+      scene.addLayer(hightLayer);
+      filllayer.on('click', feature => {
+        console.log(feature);
+        hightLayer.setData({
+          type: 'FeatureCollection',
+          features: [ feature.feature ]
+        });
+      });
+    });
+});
--- a/examples/tutorial/layer/demo/mapbox.js
+++ b/examples/tutorial/layer/demo/mapbox.js
@ -0,0 +1,17 @@
+import { Scale, Zoom, Scene } from '@antv/l7';
+import { Mapbox } from '@antv/l7-maps';
+const scene = new Scene({
+  id: 'map',
+  map: new Mapbox({
+    style: 'light',
+    pitch: 0,
+    center: [ 107.054293, 35.246265 ],
+    zoom: 4.056
+  })
+});
+scene.on('loaded', () => {
+  const zoomControl = new Zoom();
+  const scaleControl = new Scale();
+  scene.addControl(zoomControl);
+  scene.addControl(scaleControl);
+});
--- a/examples/tutorial/layer/demo/meta.json
+++ b/examples/tutorial/layer/demo/meta.json
@ -0,0 +1,18 @@
+{
+  "title": {
+    "zh": "地图",
+    "en": "Category"
+  },
+  "demos": [
+    {
+      "filename": "amap.js",
+      "title": "高德底图组件",
+      "screenshot": "https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*yXzQRYcGTyoAAAAAAAAAAABkARQnAQ"
+    },
+    {
+      "filename": "mapbox.js",
+      "title": "MapBox底图组件",
+      "screenshot": "https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*_SIYR50bbcoAAAAAAAAAAABkARQnAQ"
+    }
+  ]
+}
--- a/examples/tutorial/layer/index.en.md
+++ b/examples/tutorial/layer/index.en.md
@ -0,0 +1,5 @@
+---
+title: Layer
+order: 2
+---
+How to use the map control
--- a/examples/tutorial/layer/index.zh.md
+++ b/examples/tutorial/layer/index.zh.md
@ -0,0 +1,5 @@
+---
+title: 图层
+order: 2
+---
+图层初始化与交互
--- a/gatsby-node.js
+++ b/gatsby-node.js
@ -21,6 +21,6 @@ exports.onCreateWebpackConfig = ({ getConfig }) => {
    '@antv/l7-utils': path.resolve(__dirname, 'packages/utils/src'),
    '@antv/l7-react': path.resolve(__dirname, 'packages/react/src'),
    '@antv/l7-draw': path.resolve(__dirname, 'packages/draw/src'),
-    '@antv/l7-district': path.resolve(__dirname, 'packages/boundry/src')
+    '@antv/l7-district': path.resolve(__dirname, 'packages/boundary/src')
  };
 };
--- a/lerna.json
+++ b/lerna.json
@ -14,7 +14,7 @@
      "message": "chore: publish"
    }
  },
-  "version": "2.2.16",
+  "version": "2.2.20",
  "npmClient": "yarn",
  "useWorkspaces": true,
  "publishConfig": {
--- a/packages/boundary/README.md
+++ b/packages/boundary/README.md
--- a/packages/boundary/tests/layer.spec.ts
+++ b/packages/boundary/tests/layer.spec.ts
--- a/packages/boundary/package.json
+++ b/packages/boundary/package.json
@ -1,6 +1,6 @@
 {
  "name": "@antv/l7-district",
-  "version": "2.2.16",
+  "version": "2.2.20",
  "description": "L7 district moudules",
  "keywords": [],
  "author": "thinkinggis <lzx199065@gmail.com>",
@ -34,7 +34,7 @@
    "test": "jest"
  },
  "dependencies": {
-    "@antv/l7": "2.2.16",
+    "@antv/l7": "2.2.20",
    "@babel/runtime": "^7.7.7",
    "@turf/circle": "^6.0.1",
    "@turf/distance": "^6.0.1",
@ -44,7 +44,8 @@
    "eventemitter3": "^4.0.0",
    "geobuf": "^3.0.1",
    "lodash": "^4.6.2",
-    "pbf": "^3.2.1"
+    "pbf": "^3.2.1",
+    "simplify-geojson": "^1.0.3"
  },
  "bugs": {
    "url": "https://github.com/antvis/L7/issues"
@ -55,5 +56,6 @@
    "postcss-url": "^8.0.0",
    "rollup": "^2.3.3",
    "rollup-plugin-less": "^1.1.2"
-  }
+  },
+  "gitHead": "20154fe30d512024b03ac5e40f77731bc0580bb0"
 }
--- a/packages/boundary/rollup.config.js
+++ b/packages/boundary/rollup.config.js
--- a/packages/boundary/src/config.ts
+++ b/packages/boundary/src/config.ts
--- a/packages/boundary/src/index.ts
+++ b/packages/boundary/src/index.ts
--- a/packages/boundary/src/layer/baseLayer.ts
+++ b/packages/boundary/src/layer/baseLayer.ts
@ -17,6 +17,8 @@ import isObject from 'lodash/isObject';
 import mergeWith from 'lodash/mergeWith';
 // @ts-ignore
 import Pbf from 'pbf';
+// @ts-ignore
+import simplify from 'simplify-geojson';
 import { setDataLevel } from '../config';
 import { AttributeType, IDistrictLayerOption } from './interface';

@ -59,6 +61,10 @@ export default class BaseLayer extends EventEmitter {
    this.options = mergeWith(this.options, newOption, mergeCustomizer);
  }

+  public getFillData() {
+    return this.fillData;
+  }
+
  public updateData(
    newData: Array<{ [key: string]: any }>,
    joinByField?: [string, string],
@ -85,7 +91,10 @@ export default class BaseLayer extends EventEmitter {
  protected async fetchData(data: { url: any; type: string }) {
    if (data.type === 'pbf') {
      const buffer = await (await fetch(data.url)).arrayBuffer();
-      const geojson = geobuf.decode(new Pbf(buffer));
+      let geojson = geobuf.decode(new Pbf(buffer));
+      if (this.options.simplifyTolerance !== false) {
+        geojson = simplify(geojson, this.options.simplifyTolerance);
+      }
      return geojson;
    } else {
      return isObject(data.url) ? data.url : (await fetch(data.url)).json();
@ -99,15 +108,18 @@ export default class BaseLayer extends EventEmitter {
      depth: 1,
      adcode: [],
      joinBy: ['name', 'name'],
+      simplifyTolerance: false,
      label: {
        enable: true,
        color: '#000',
        field: 'name',
-        size: 8,
+        size: 10,
        stroke: '#fff',
        strokeWidth: 2,
        textAllowOverlap: true,
        opacity: 1,
+        textOffset: [0, 0],
+        padding: [5, 5],
      },
      bubble: {
        enable: false,
@ -129,13 +141,16 @@ export default class BaseLayer extends EventEmitter {
        activeColor: false,
      },
      autoFit: true,
+      showBorder: true,
      stroke: '#bdbdbd',
+      strokeVisible: true,
      strokeWidth: 0.6,
      cityStroke: '#636363',
      cityStrokeWidth: 0.6,
      countyStrokeWidth: 0.6,
      provinceStrokeWidth: 0.6,
      provinceStroke: '#f0f0f0',
+      provinceStrokeVisible: true,
      countyStroke: '#525252',
      coastlineStroke: '#4190da',
      coastlineWidth: 0.6,
@ -278,7 +293,7 @@ export default class BaseLayer extends EventEmitter {
  protected addLabel(labelData: any, type: string = 'json') {
    const { label, zIndex, visible } = this.options;
    const labelLayer = new PointLayer({
-      zIndex: zIndex + 0.4,
+      zIndex: zIndex + 5,
      visible,
    })
      .source(labelData, {
@ -287,16 +302,10 @@ export default class BaseLayer extends EventEmitter {
          coordinates: 'center',
        },
      })
-      .color(label.color as StyleAttrField)
      .shape(label.field as StyleAttrField, 'text')
-      .size(10)
-      .style({
-        opacity: label.opacity,
-        stroke: label.stroke,
-        strokeWidth: label.strokeWidth,
-        textAllowOverlap: label.textAllowOverlap,
-      });
-
+      .style(label);
+    this.setLayerAttribute(labelLayer, 'color', label.color as AttributeType);
+    this.setLayerAttribute(labelLayer, 'size', label.size as AttributeType);
    this.setLayerAttribute(labelLayer, 'filter', label.filter);
    return labelLayer;
  }
--- a/packages/boundary/src/layer/city.ts
+++ b/packages/boundary/src/layer/city.ts
--- a/packages/boundary/src/layer/country.ts
+++ b/packages/boundary/src/layer/country.ts
@ -1,4 +1,4 @@
-import { LineLayer, PointLayer, Scene, StyleAttrField } from '@antv/l7';
+import { AttributeType, LineLayer, PointLayer, Scene } from '@antv/l7';
 import { getDataConfig } from '../index';
 import BaseLayer from './baseLayer';
 import { IDistrictLayerOption } from './interface';
@ -6,20 +6,20 @@ import { IDistrictLayerOption } from './interface';
 export default class CountryLayer extends BaseLayer {
  constructor(scene: Scene, option: Partial<IDistrictLayerOption> = {}) {
    super(scene, option);
-    const { depth } = this.options;
+    const { depth, showBorder } = this.options;
    this.addProvinceFill();
    this.addProvinceLabel();
    const countryConfig = getDataConfig(this.options.geoDataLevel).country.CHN[
      depth
    ];
-
-    this.addProvinceLine(countryConfig.provinceLine);
-
-    if (depth === 2 * 1) {
-      this.addCityBorder(countryConfig.fill);
-    }
-    if (depth === 3 * 1) {
-      this.addCountyBorder(countryConfig.fill);
+    if (showBorder) {
+      this.addProvinceLine(countryConfig.provinceLine);
+      if (depth === 2 * 1) {
+        this.addCityBorder(countryConfig.fill);
+      }
+      if (depth === 3 * 1) {
+        this.addCountyBorder(countryConfig.fill);
+      }
    }
  }
  protected async addProvinceFill() {
@ -127,6 +127,7 @@ export default class CountryLayer extends BaseLayer {
      chinaNationalWidth,
      coastlineStroke,
      coastlineWidth,
+      showBorder,
      stroke,
      strokeWidth,
      visible,
@ -135,7 +136,7 @@ export default class CountryLayer extends BaseLayer {
    // 添加国界线
    const lineLayer = new LineLayer({
      zIndex: zIndex + 0.1,
-      visible,
+      visible: visible && showBorder,
    })
      .source(boundaries)
      .size('type', (v: string) => {
@ -152,11 +153,11 @@ export default class CountryLayer extends BaseLayer {
      .shape('line')
      .color('type', (v: string) => {
        if (v === '3') {
-          return provinceStroke;
+          return provinceStroke; // 省界
        } else if (v === '2') {
-          return coastlineStroke;
+          return coastlineStroke; // 海岸线
        } else if (v === '0') {
-          return chinaNationalStroke;
+          return chinaNationalStroke; // 中国国界线
        } else {
          return '#fff';
        }
@ -164,7 +165,7 @@ export default class CountryLayer extends BaseLayer {
    // 添加未定国界
    const lineLayer2 = new LineLayer({
      zIndex: zIndex + 0.1,
-      visible,
+      visible: visible && showBorder,
    })
      .source(boundaries2)
      .size(chinaNationalWidth)
@ -178,7 +179,7 @@ export default class CountryLayer extends BaseLayer {
    // 添加澳门香港界限
    const lineLayer3 = new LineLayer({
      zIndex: zIndex + 0.1,
-      visible,
+      visible: visible && showBorder,
    })
      .source(boundaries3)
      .size(provinceStrokeWidth)
@ -262,9 +263,9 @@ export default class CountryLayer extends BaseLayer {
          coordinates: 'center',
        },
      })
-      .color(label.color as StyleAttrField)
+      .color(label.color as AttributeType)
      .shape('name', 'text')
-      .size(10)
+      .size(label.size as AttributeType)
      .style({
        opacity: label.opacity,
        stroke: label.stroke,
--- a/packages/boundary/src/layer/county.ts
+++ b/packages/boundary/src/layer/county.ts
--- a/packages/boundary/src/layer/drillDown.ts
+++ b/packages/boundary/src/layer/drillDown.ts
--- a/packages/boundary/src/layer/interface.ts
+++ b/packages/boundary/src/layer/interface.ts
@ -4,14 +4,35 @@ import {
  StyleAttributeField,
  StyleAttributeOption,
 } from '@antv/l7';
+export type anchorType =
+  | 'right'
+  | 'top-right'
+  | 'left'
+  | 'bottom-right'
+  | 'left'
+  | 'top-left'
+  | 'bottom-left'
+  | 'bottom'
+  | 'bottom-right'
+  | 'bottom-left'
+  | 'top'
+  | 'top-right'
+  | 'top-left'
+  | 'center';
 export interface ILabelOption {
  enable: boolean;
-  color: string;
+  color: AttributeType;
  field: string;
-  size: number;
+  size: AttributeType;
  stroke: string;
  strokeWidth: number;
  textAllowOverlap: boolean;
+  padding: [number, number];
+  strokeOpacity: number;
+  fontWeight: number;
+  spacing: number;
+  textAnchor: anchorType;
+  textOffset: [number, number];
  opacity: number;
  filter: AttributeType;
 }
@ -81,14 +102,18 @@ export interface IDistrictLayerOption {
  data?: Array<{ [key: string]: any }>;
  joinBy: [string, string];
  adcode: adcodeType;
+  simplifyTolerance: number | boolean;
  depth: 0 | 1 | 2 | 3;
  label: Partial<ILabelOption>;
  bubble: Partial<IBubbleOption>;
  fill: Partial<IFillOptions>;
+  showBorder: boolean;
  autoFit: boolean;
  stroke: string;
+  strokeVisible: boolean;
  strokeWidth: number;
  provinceStroke: string;
+  provinceStrokeVisible: boolean;
  cityStroke: string;
  provinceStrokeWidth: number;
  cityStrokeWidth: number;
--- a/packages/boundary/src/layer/province.ts
+++ b/packages/boundary/src/layer/province.ts
@ -34,6 +34,7 @@ export default class ProvinceLayer extends BaseLayer {
      this.hide();
      return;
    }
+    const { label, showBorder } = this.options;
    this.setOption({ adcode });
    const fillData = this.filterData(this.fillRawData, adcode);
    const lineData = this.filterData(this.lineRawData, adcode);
@ -49,8 +50,13 @@ export default class ProvinceLayer extends BaseLayer {
    }
    this.fillData = fillData;
    this.updateData(newData, joinByField);
-    this.lineLayer.setData(lineData);
-    this.labelLayer.setData(labelData);
+    if (showBorder) {
+      this.lineLayer.setData(lineData);
+    }
+    if (label.enable) {
+      this.labelLayer.setData(labelData);
+    }
+
    this.show();
  }

@ -96,7 +102,8 @@ export default class ProvinceLayer extends BaseLayer {
    return features;
  }
  private async addProvinceFillLayer() {
-    const { depth, adcode, label } = this.options as IProvinceLayerOption;
+    const { depth, adcode, label, showBorder } = this
+      .options as IProvinceLayerOption;
    const countryConfig = getDataConfig(this.options.geoDataLevel).country.CHN[
      depth
    ];
@ -109,6 +116,7 @@ export default class ProvinceLayer extends BaseLayer {
      };
    });
    const data = this.filterData(fillData, adcode);
+    this.fillData = data;
    const labelData = this.filterLabelData(this.labelRawData, adcode);
    this.fillRawData = fillData;
    this.addFillLayer(data);
@ -116,7 +124,9 @@ export default class ProvinceLayer extends BaseLayer {
      this.addLabelLayer(labelData);
    }
    this.lineRawData = fillData;
-    this.addFillLine(data);
+    if (showBorder) {
+      this.addFillLine(data);
+    }
  }

  private async addProvinceLineLayer() {
--- a/packages/boundary/src/layer/world.ts
+++ b/packages/boundary/src/layer/world.ts
@ -14,7 +14,9 @@ export default class WorldLayer extends BaseLayer {
    super(scene, option);
    this.loadData().then(([fillData, lineData, fillLabel]) => {
      this.addFillLayer(fillData);
-      this.addFillLine(lineData);
+      if (this.options.showBorder) {
+        this.addFillLine(lineData);
+      }
      if (this.options.label?.enable) {
        this.addLabelLayer(fillLabel, 'json');
      }
--- a/packages/boundary/tsconfig.build.json
+++ b/packages/boundary/tsconfig.build.json
--- a/packages/component/package.json
+++ b/packages/component/package.json
@ -1,6 +1,6 @@
 {
  "name": "@antv/l7-component",
-  "version": "2.2.16",
+  "version": "2.2.20",
  "description": "",
  "main": "lib/index.js",
  "module": "es/index.js",
@ -24,14 +24,14 @@
  "author": "lzxue",
  "license": "ISC",
  "dependencies": {
-    "@antv/l7-core": "2.2.16",
-    "@antv/l7-utils": "2.2.16",
+    "@antv/l7-core": "2.2.20",
+    "@antv/l7-utils": "2.2.20",
    "@babel/runtime": "^7.7.7",
    "eventemitter3": "^4.0.0",
    "inversify": "^5.0.1",
    "load-styles": "^2.0.0"
  },
-  "gitHead": "532ade40831b35b04a677b351d092e54c00613d8",
+  "gitHead": "20154fe30d512024b03ac5e40f77731bc0580bb0",
  "publishConfig": {
    "access": "public"
  }
--- a/packages/core/package.json
+++ b/packages/core/package.json
@ -1,6 +1,6 @@
 {
  "name": "@antv/l7-core",
-  "version": "2.2.16",
+  "version": "2.2.20",
  "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.16",
+    "@antv/l7-utils": "2.2.20",
    "@babel/runtime": "^7.7.7",
    "@mapbox/tiny-sdf": "^1.1.1",
    "ajv": "^6.10.2",
@ -46,7 +46,7 @@
    "@types/lodash": "^4.14.138",
    "@types/viewport-mercator-project": "^6.1.0"
  },
-  "gitHead": "532ade40831b35b04a677b351d092e54c00613d8",
+  "gitHead": "20154fe30d512024b03ac5e40f77731bc0580bb0",
  "publishConfig": {
    "access": "public"
  }
--- a/packages/core/src/services/layer/ILayerService.ts
+++ b/packages/core/src/services/layer/ILayerService.ts
@ -83,6 +83,7 @@ export interface ILayer {
  zIndex: number;
  plugins: ILayerPlugin[];
  layerModelNeedUpdate: boolean;
+  styleNeedUpdate: boolean;
  layerModel: ILayerModel;
  dataState: IDataState; // 数据流状态
  pickedFeatureID: number | null;
--- a/packages/draw/package.json
+++ b/packages/draw/package.json
@ -1,6 +1,6 @@
 {
  "name": "@antv/l7-draw",
-  "version": "2.2.16",
+  "version": "2.2.20",
  "description": "L7 Draw moudules",
  "keywords": [],
  "author": "thinkinggis <lzx199065@gmail.com>",
@ -35,7 +35,7 @@
    "test": "jest"
  },
  "dependencies": {
-    "@antv/l7": "2.2.16",
+    "@antv/l7": "2.2.20",
    "@babel/runtime": "^7.7.7",
    "@turf/circle": "^6.0.1",
    "@turf/distance": "^6.0.1",
@ -55,5 +55,5 @@
    "rollup": "^2.3.3",
    "rollup-plugin-less": "^1.1.2"
  },
-  "gitHead": "532ade40831b35b04a677b351d092e54c00613d8"
+  "gitHead": "20154fe30d512024b03ac5e40f77731bc0580bb0"
 }
--- a/packages/l7/package.json
+++ b/packages/l7/package.json
@ -1,6 +1,6 @@
 {
  "name": "@antv/l7",
-  "version": "2.2.16",
+  "version": "2.2.20",
  "description": "A Large-scale WebGL-powered Geospatial Data Visualization",
  "main": "lib/index.js",
  "module": "es/index.js",
@ -24,15 +24,15 @@
  "author": "antv",
  "license": "MIT",
  "dependencies": {
-    "@antv/l7-component": "2.2.16",
-    "@antv/l7-core": "2.2.16",
-    "@antv/l7-layers": "2.2.16",
-    "@antv/l7-maps": "2.2.16",
-    "@antv/l7-scene": "2.2.16",
-    "@antv/l7-utils": "2.2.16",
+    "@antv/l7-component": "2.2.20",
+    "@antv/l7-core": "2.2.20",
+    "@antv/l7-layers": "2.2.20",
+    "@antv/l7-maps": "2.2.20",
+    "@antv/l7-scene": "2.2.20",
+    "@antv/l7-utils": "2.2.20",
    "@babel/runtime": "^7.7.7"
  },
-  "gitHead": "532ade40831b35b04a677b351d092e54c00613d8",
+  "gitHead": "20154fe30d512024b03ac5e40f77731bc0580bb0",
  "publishConfig": {
    "access": "public"
  }
--- a/packages/l7/src/version.ts
+++ b/packages/l7/src/version.ts
@ -1,2 +1,2 @@
-const version = '2.2.16';
+const version = '2.2.19';
 export { version };
--- a/packages/layers/package.json
+++ b/packages/layers/package.json
@ -1,6 +1,6 @@
 {
  "name": "@antv/l7-layers",
-  "version": "2.2.16",
+  "version": "2.2.20",
  "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.16",
-    "@antv/l7-source": "2.2.16",
-    "@antv/l7-utils": "2.2.16",
+    "@antv/l7-core": "2.2.20",
+    "@antv/l7-source": "2.2.20",
+    "@antv/l7-utils": "2.2.20",
    "@babel/runtime": "^7.7.7",
    "@mapbox/martini": "^0.2.0",
    "@turf/meta": "^6.0.2",
@ -50,7 +50,7 @@
    "@types/gl-matrix": "^2.4.5",
    "@types/lodash": "^4.14.138"
  },
-  "gitHead": "532ade40831b35b04a677b351d092e54c00613d8",
+  "gitHead": "20154fe30d512024b03ac5e40f77731bc0580bb0",
  "publishConfig": {
    "access": "public"
  }
--- a/packages/layers/src/core/BaseLayer.ts
+++ b/packages/layers/src/core/BaseLayer.ts
@ -70,6 +70,7 @@ export default class BaseLayer<ChildLayerStyleOptions = {}> extends EventEmitter
  public layerModelNeedUpdate: boolean = false;
  public pickedFeatureID: number | null = null;
  public selectedFeatureID: number | null = null;
+  public styleNeedUpdate: boolean = false;

  public dataState: IDataState = {
    dataSourceNeedUpdate: false,
@ -469,6 +470,7 @@ export default class BaseLayer<ChildLayerStyleOptions = {}> extends EventEmitter

    if (this.container) {
      this.updateLayerConfig(this.rawConfig);
+      this.styleNeedUpdate = true;
    }
    return this;
  }
@ -495,7 +497,6 @@ export default class BaseLayer<ChildLayerStyleOptions = {}> extends EventEmitter
    // } else {
    //   this.renderModels();
    // }
-
    this.renderModels();
    // this.multiPassRenderer.render();
    // this.renderModels();
--- a/packages/layers/src/core/triangulation.ts
+++ b/packages/layers/src/core/triangulation.ts
@ -87,7 +87,6 @@ export function polygonTriangulation(feature: IEncodeFeature) {
  const { coordinates } = feature;
  const flattengeo = earcut.flatten(coordinates as number[][][]);
  const { vertices, dimensions, holes } = flattengeo;
-
  return {
    indices: earcut(vertices, holes, dimensions),
    vertices,
--- a/packages/layers/src/heatmap/models/heatmap.ts
+++ b/packages/layers/src/heatmap/models/heatmap.ts
@ -45,6 +45,9 @@ export default class HeatMapModel extends BaseModel {
      });
      this.drawIntensityMode();
    });
+    if (this.layer.styleNeedUpdate) {
+      this.updateColorTexture();
+    }
    this.shapeType === 'heatmap' ? this.drawColorMode() : this.draw3DHeatMap();
  }

@ -92,17 +95,7 @@ export default class HeatMapModel extends BaseModel {
      depth: false,
    });

-    // 初始化颜色纹理
-    this.colorTexture = createTexture2D({
-      data: new Uint8Array(imageData.data),
-      width: imageData.width,
-      height: imageData.height,
-      wrapS: gl.CLAMP_TO_EDGE,
-      wrapT: gl.CLAMP_TO_EDGE,
-      min: gl.NEAREST,
-      mag: gl.NEAREST,
-      flipY: false,
-    });
+    this.updateColorTexture();

    return [this.intensityModel, this.colorModel];
  }
@ -340,4 +333,29 @@ export default class HeatMapModel extends BaseModel {
      }),
    });
  }
+  private updateStyle() {
+    this.updateColorTexture();
+  }
+
+  private updateColorTexture() {
+    const { createTexture2D } = this.rendererService;
+    if (this.texture) {
+      this.texture.destroy();
+    }
+
+    const {
+      rampColors,
+    } = this.layer.getLayerConfig() as IHeatMapLayerStyleOptions;
+    const imageData = generateColorRamp(rampColors as IColorRamp);
+    this.colorTexture = createTexture2D({
+      data: new Uint8Array(imageData.data),
+      width: imageData.width,
+      height: imageData.height,
+      wrapS: gl.CLAMP_TO_EDGE,
+      wrapT: gl.CLAMP_TO_EDGE,
+      min: gl.NEAREST,
+      mag: gl.NEAREST,
+      flipY: false,
+    });
+  }
 }
--- a/packages/layers/src/line/models/line.ts
+++ b/packages/layers/src/line/models/line.ts
@ -53,6 +53,7 @@ export default class LineModel extends BaseModel {
        fragmentShader: line_frag,
        triangulation: LineTriangulation,
        blend: this.getBlend(),
+        depth: { enable: false },
      }),
    ];
  }
@ -70,7 +71,7 @@ export default class LineModel extends BaseModel {
        name: 'a_Distance',
        buffer: {
          // give the WebGL driver a hint that this buffer may change
-          usage: gl.DYNAMIC_DRAW,
+          usage: gl.STATIC_DRAW,
          data: [],
          type: gl.FLOAT,
        },
@ -92,7 +93,7 @@ export default class LineModel extends BaseModel {
        name: 'a_Total_Distance',
        buffer: {
          // give the WebGL driver a hint that this buffer may change
-          usage: gl.DYNAMIC_DRAW,
+          usage: gl.STATIC_DRAW,
          data: [],
          type: gl.FLOAT,
        },
@ -164,7 +165,7 @@ export default class LineModel extends BaseModel {
        name: 'a_Miter',
        buffer: {
          // give the WebGL driver a hint that this buffer may change
-          usage: gl.DYNAMIC_DRAW,
+          usage: gl.STATIC_DRAW,
          data: [],
          type: gl.FLOAT,
        },
--- a/packages/layers/src/line/shaders/line_frag.glsl
+++ b/packages/layers/src/line/shaders/line_frag.glsl
@ -24,8 +24,8 @@ uniform vec4 u_aimate: [ 0, 2., 1.0, 0.2 ];
 void main() {
  gl_FragColor = v_color;
  // anti-alias
-  // float blur = 1.- smoothstep(u_blur, 1., length(v_normal.xy));
-  gl_FragColor.a *= u_opacity;
+  float blur = 1.- smoothstep(u_blur, 1., length(v_normal.xy));
+  gl_FragColor.a *= u_opacity * blur ;

  if(u_aimate.x == Animate) {
      float alpha =1.0 - fract( mod(1.0- v_distance_ratio, u_aimate.z)* (1.0/ u_aimate.z) + u_time / u_aimate.y);
--- a/packages/layers/src/plugins/LayerModelPlugin.ts
+++ b/packages/layers/src/plugins/LayerModelPlugin.ts
@ -11,6 +11,7 @@ export default class LayerModelPlugin implements ILayerPlugin {
      layer.prepareBuildModel();
      // 初始化 Model
      layer.buildModels();
+      layer.styleNeedUpdate = false;
    });

    layer.hooks.beforeRenderData.tap('DataSourcePlugin', () => {
--- a/packages/layers/src/point/models/text.ts
+++ b/packages/layers/src/point/models/text.ts
@ -14,6 +14,7 @@ import BaseModel from '../../core/BaseModel';
 import CollisionIndex from '../../utils/collision-index';
 import { calculteCentroid } from '../../utils/geo';
 import {
+  anchorType,
  getGlyphQuads,
  IGlyphQuad,
  shapeText,
@ -22,7 +23,7 @@ import textFrag from '../shaders/text_frag.glsl';
 import textVert from '../shaders/text_vert.glsl';
 interface IPointTextLayerStyleOptions {
  opacity: number;
-  textAnchor: string;
+  textAnchor: anchorType;
  spacing: number;
  padding: [number, number];
  stroke: string;
--- a/packages/layers/src/utils/symbol-layout.ts
+++ b/packages/layers/src/utils/symbol-layout.ts
@ -1,7 +1,24 @@
+import { type } from 'os';
+
 interface IPoint {
  x: number;
  y: number;
 }
+export type anchorType =
+  | 'right'
+  | 'top-right'
+  | 'left'
+  | 'bottom-right'
+  | 'left'
+  | 'top-left'
+  | 'bottom-left'
+  | 'bottom'
+  | 'bottom-right'
+  | 'bottom-left'
+  | 'top'
+  | 'top-right'
+  | 'top-left'
+  | 'center';
 export interface IGlyphQuad {
  tr: IPoint;
  tl: IPoint;
@ -22,10 +39,9 @@ export interface IGlyphQuad {
 * @param {string} anchor 锚点位置
 * @return {alignment} alignment
 */
-function getAnchorAlignment(anchor: string) {
+function getAnchorAlignment(anchor: anchorType) {
  let horizontalAlign = 0.5;
  let verticalAlign = 0.5;
-
  switch (anchor) {
    case 'right':
    case 'top-right':
@ -109,7 +125,7 @@ function shapeLines(
  glyphMap: any,
  lines: any[],
  lineHeight: number,
-  textAnchor: string,
+  textAnchor: anchorType,
  textJustify: string,
  spacing: number,
 ) {
@ -197,7 +213,7 @@ export function shapeText(
  text: string,
  glyphs: any,
  lineHeight: number,
-  textAnchor: string,
+  textAnchor: anchorType,
  textJustify: string,
  spacing: number,
  translate: [number, number] = [0, 0],
--- a/packages/maps/package.json
+++ b/packages/maps/package.json
@ -1,6 +1,6 @@
 {
  "name": "@antv/l7-maps",
-  "version": "2.2.16",
+  "version": "2.2.20",
  "description": "",
  "main": "lib/index.js",
  "module": "es/index.js",
@ -25,8 +25,8 @@
  "author": "xiaoiver",
  "license": "ISC",
  "dependencies": {
-    "@antv/l7-core": "2.2.16",
-    "@antv/l7-utils": "2.2.16",
+    "@antv/l7-core": "2.2.20",
+    "@antv/l7-utils": "2.2.20",
    "@babel/runtime": "^7.7.7",
    "@types/amap-js-api": "^1.4.6",
    "gl-matrix": "^3.1.0",
@ -39,7 +39,7 @@
    "@types/mapbox-gl": "^0.54.3",
    "@types/viewport-mercator-project": "^6.1.0"
  },
-  "gitHead": "532ade40831b35b04a677b351d092e54c00613d8",
+  "gitHead": "20154fe30d512024b03ac5e40f77731bc0580bb0",
  "publishConfig": {
    "access": "public"
  }
--- a/packages/react/package.json
+++ b/packages/react/package.json
@ -1,6 +1,6 @@
 {
  "name": "@antv/l7-react",
-  "version": "2.2.16",
+  "version": "2.2.20",
  "description": "",
  "main": "lib/index.js",
  "module": "es/index.js",
@ -24,8 +24,8 @@
  "author": "lzxue",
  "license": "ISC",
  "dependencies": {
-    "@antv/l7": "2.2.16",
-    "@antv/l7-maps": "2.2.16",
+    "@antv/l7": "2.2.20",
+    "@antv/l7-maps": "2.2.20",
    "@babel/runtime": "^7.7.7",
    "load-styles": "^2.0.0"
  },
@ -33,7 +33,7 @@
    "react": "^16.8.6",
    "react-dom": "^16.10.2"
  },
-  "gitHead": "532ade40831b35b04a677b351d092e54c00613d8",
+  "gitHead": "20154fe30d512024b03ac5e40f77731bc0580bb0",
  "publishConfig": {
    "access": "public"
  }
--- a/packages/renderer/package.json
+++ b/packages/renderer/package.json
@ -1,6 +1,6 @@
 {
  "name": "@antv/l7-renderer",
-  "version": "2.2.16",
+  "version": "2.2.20",
  "description": "",
  "main": "lib/index.js",
  "module": "es/index.js",
@ -25,14 +25,14 @@
    "gl": "^4.4.0"
  },
  "dependencies": {
-    "@antv/l7-core": "2.2.16",
+    "@antv/l7-core": "2.2.20",
    "@babel/runtime": "^7.7.7",
    "inversify": "^5.0.1",
    "lodash": "^4.17.15",
    "reflect-metadata": "^0.1.13",
    "regl": "^1.6.1"
  },
-  "gitHead": "532ade40831b35b04a677b351d092e54c00613d8",
+  "gitHead": "20154fe30d512024b03ac5e40f77731bc0580bb0",
  "publishConfig": {
    "access": "public"
  }
--- a/packages/scene/package.json
+++ b/packages/scene/package.json
@ -1,6 +1,6 @@
 {
  "name": "@antv/l7-scene",
-  "version": "2.2.16",
+  "version": "2.2.20",
  "description": "",
  "main": "lib/index.js",
  "module": "es/index.js",
@ -22,17 +22,17 @@
  "author": "xiaoiver",
  "license": "ISC",
  "dependencies": {
-    "@antv/l7-component": "2.2.16",
-    "@antv/l7-core": "2.2.16",
-    "@antv/l7-maps": "2.2.16",
-    "@antv/l7-renderer": "2.2.16",
-    "@antv/l7-utils": "2.2.16",
+    "@antv/l7-component": "2.2.20",
+    "@antv/l7-core": "2.2.20",
+    "@antv/l7-maps": "2.2.20",
+    "@antv/l7-renderer": "2.2.20",
+    "@antv/l7-utils": "2.2.20",
    "@babel/runtime": "^7.7.7",
    "inversify": "^5.0.1",
    "mapbox-gl": "^1.2.1",
    "reflect-metadata": "^0.1.13"
  },
-  "gitHead": "532ade40831b35b04a677b351d092e54c00613d8",
+  "gitHead": "20154fe30d512024b03ac5e40f77731bc0580bb0",
  "publishConfig": {
    "access": "public"
  }
--- a/packages/source/tests/parser/geojson.spec.ts
+++ b/packages/source/tests/parser/geojson.spec.ts
@ -9,7 +9,7 @@ describe('parser.geojson', () => {
  });
  it('parser multiPolygon', () => {
    const result = geojson(multiPolygon);
-    expect(result.dataArray.length).toEqual(11);
+    expect(result.dataArray.length).toEqual(1);
    expect(result.dataArray[0]._id).toEqual(0);
  });
  it('parset multiLine', () => {
--- a/packages/source/package.json
+++ b/packages/source/package.json
@ -1,6 +1,6 @@
 {
  "name": "@antv/l7-source",
-  "version": "2.2.16",
+  "version": "2.2.20",
  "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.16",
-    "@antv/l7-utils": "2.2.16",
+    "@antv/l7-core": "2.2.20",
+    "@antv/l7-utils": "2.2.20",
    "@babel/runtime": "^7.7.7",
    "@mapbox/geojson-rewind": "^0.4.0",
    "@turf/helpers": "^6.1.4",
@ -44,7 +44,7 @@
    "@types/d3-hexbin": "^0.2.3",
    "@types/lodash": "^4.14.138"
  },
-  "gitHead": "532ade40831b35b04a677b351d092e54c00613d8",
+  "gitHead": "20154fe30d512024b03ac5e40f77731bc0580bb0",
  "publishConfig": {
    "access": "public"
  }
--- a/packages/source/src/parser/geojson.ts
+++ b/packages/source/src/parser/geojson.ts
@ -48,7 +48,7 @@ export default function geoJSON(
    (currentFeature: Feature<Geometries, Properties>, featureIndex: number) => {
      const coord = getCoords(currentFeature);
      const id = featureIndex;
-      if (currentFeature.geometry.type === 'Polygon') {
+      if (currentFeature.geometry.type === 'MultiPolygon') {
        coord.forEach((coor) => {
          const dataItem = {
            ...currentFeature.properties,
--- a/packages/source/src/source.ts
+++ b/packages/source/src/source.ts
@ -128,13 +128,14 @@ export default class Source extends EventEmitter {
        id < this.originData.features.length
          ? this.originData.features[id]
          : 'null';
+      const newFeature = cloneDeep(feature);
      if (this.transforms.length !== 0) {
        const item = this.data.dataArray.find((dataItem: IParseDataItem) => {
          return dataItem._id === id;
        });
-        feature.properties = item;
+        newFeature.properties = item;
      }
-      return feature;
+      return newFeature;
    } else {
      return id < this.data.dataArray.length ? this.data.dataArray[id] : 'null';
    }
--- a/packages/three/package.json
+++ b/packages/three/package.json
@ -1,6 +1,6 @@
 {
  "name": "@antv/l7-three",
-  "version": "2.2.16",
+  "version": "2.2.20",
  "description": "three for L7 ",
  "keywords": [
    "3D",
@ -43,7 +43,7 @@
  },
  "homepage": "https://github.com/antvis/L7#readme",
  "dependencies": {
-    "@antv/l7": "2.2.16",
+    "@antv/l7": "2.2.20",
    "@babel/runtime": "^7.7.7",
    "rollup": "^2.3.3",
    "rollup-plugin-less": "^1.1.2"
@ -51,7 +51,7 @@
  "devDependencies": {
    "three": "^0.115.0"
  },
-  "gitHead": "532ade40831b35b04a677b351d092e54c00613d8",
+  "gitHead": "20154fe30d512024b03ac5e40f77731bc0580bb0",
  "publishConfig": {
    "access": "public"
  }
--- a/packages/utils/package.json
+++ b/packages/utils/package.json
@ -1,6 +1,6 @@
 {
  "name": "@antv/l7-utils",
-  "version": "2.2.16",
+  "version": "2.2.20",
  "description": "",
  "main": "lib/index.js",
  "module": "es/index.js",
@ -29,7 +29,7 @@
  "devDependencies": {
    "@types/d3-color": "^1.2.2"
  },
-  "gitHead": "532ade40831b35b04a677b351d092e54c00613d8",
+  "gitHead": "20154fe30d512024b03ac5e40f77731bc0580bb0",
  "publishConfig": {
    "access": "public"
  }
--- a/stories/District/Layer/Country.tsx
+++ b/stories/District/Layer/Country.tsx
@ -1,4 +1,4 @@
-import { Scene } from '@antv/l7';
+import { LineLayer, PolygonLayer, Scene } from '@antv/l7';
 import { CountryLayer } from '@antv/l7-district';
 import { GaodeMap, Mapbox } from '@antv/l7-maps';
 import * as React from 'react';
@ -20,7 +20,7 @@ export default class Country extends React.Component {
        style: 'blank',
        zoom: 3,
        minZoom: 0,
-        maxZoom: 10,
+        maxZoom: 15,
      }),
    });
    const ProvinceData = [
@ -199,16 +199,19 @@ export default class Country extends React.Component {
      const Layer = new CountryLayer(scene, {
        visible: true,
        data: ProvinceData,
-        geoDataLevel: 1,
+        geoDataLevel: 2,
        joinBy: ['NAME_CHN', 'name'],
-        // label: {
-        //   field: 'NAME_CHN',
-        //   textAllowOverlap: true,
-        // },
-        depth: 1,
+        showBorder: false,
+        label: {
+          field: 'name',
+          size: 10,
+          padding: [5, 5],
+          textAllowOverlap: true,
+        },
+        depth: 2,
        fill: {
          color: {
-            field: 'value',
+            field: 'NAME_CHN',
            values: [
              '#feedde',
              '#fdd0a2',
@ -226,6 +229,54 @@ export default class Country extends React.Component {
          },
        },
      });
+      Layer.on('loaded', () => {
+        const filldata = Layer.getFillData();
+        const border = new LineLayer({
+          zIndex: 5, // 设置显示层级
+        })
+          .source(filldata)
+          .shape('line')
+          .size(0.6)
+          .color('#a00')
+          .style({
+            opacity: 1,
+          });
+        const hightLayer = new LineLayer({
+          zIndex: 4, // 设置显示层级
+          name: 'line3',
+        })
+          .source(filldata)
+          .shape('line')
+          .size(1.2)
+          .color('#000')
+          .style({
+            opacity: 1,
+          });
+        const hightLayer2 = new LineLayer({
+          zIndex: 3, // 设置显示层级
+          name: 'line3',
+        })
+          .source(filldata)
+          .shape('line')
+          .size(2.4)
+          .color('#fff')
+          .style({
+            opacity: 1,
+          });
+        scene.addLayer(border);
+        scene.addLayer(hightLayer);
+        scene.addLayer(hightLayer2);
+        Layer.fillLayer.on('click', (feature) => {
+          hightLayer.setData({
+            type: 'FeatureCollection',
+            features: [feature.feature],
+          });
+          hightLayer2.setData({
+            type: 'FeatureCollection',
+            features: [feature.feature],
+          });
+        });
+      });
    });
    this.scene = scene;
  }
--- a/stories/District/Layer/country_city.tsx
+++ b/stories/District/Layer/country_city.tsx
@ -28,6 +28,7 @@ export default class Country extends React.Component {
        data: [],
        geoDataLevel: 2,
        depth: 2,
+        showBorder: false,
        provinceStroke: '#783D2D',
        cityStroke: '#EBCCB4',
        coastlineWidth: 0.5,
--- a/stories/District/Layer/province.tsx
+++ b/stories/District/Layer/province.tsx
@ -220,22 +220,14 @@ export default class Country extends React.Component {
        geoDataLevel: 1,
        joinBy: ['adcode', 'code'],
        adcode: ['330000'],
+        stroke: '#7096B3',
        depth: 2,
+        showBorder: false,
        label: {
          enable: false,
        },
        fill: {
-          color: {
-            field: 'NAME_CHN',
-            values: [
-              '#feedde',
-              '#fdd0a2',
-              '#fdae6b',
-              '#fd8d3c',
-              '#e6550d',
-              '#a63603',
-            ],
-          },
+          color: '#A3D7FF',
        },
        popup: {
          enable: false,
--- a/stories/District/Layer/world.tsx
+++ b/stories/District/Layer/world.tsx
@ -46,6 +46,7 @@ export default class Country extends React.Component {
          enable: true,
          textAllowOverlap: false,
          field: 'NAME_ENG',
+          padding: [5, 5],
        },
        popup: {
          enable: true,
--- a/stories/Layers/Layers.stories.tsx
+++ b/stories/Layers/Layers.stories.tsx
@ -13,6 +13,7 @@ import HeatMapDemo from './components/HeatMap';
 import HeatMap3D_2 from './components/heatmap2';
 import HeatMapDemo3D from './components/heatmap3d';
 import HexagonLayerDemo from './components/hexagon';
+import HighLight from './components/highlight';
 import LineLayer from './components/Line';
 import LineAnimate from './components/lineAnimate';
 import PointDemo from './components/Point';
@ -50,4 +51,5 @@ storiesOf('图层', module)
  .add('栅格', () => <RasterLayerDemo />)
  .add('图片', () => <ImageLayerDemo />)
  .add('网格测试', () => <GridTest />)
+  .add('图层高亮', () => <HighLight />)
  .add('世界地图', () => <WorldDemo />);
--- a/stories/Layers/components/heatmap2.tsx
+++ b/stories/Layers/components/heatmap2.tsx
@ -27,7 +27,9 @@ export default class HeatMapLayerDemo extends React.Component {
      )
        .then((res) => res.json())
        .then((data) => {
-          const layer = new HeatmapLayer({})
+          const layer = new HeatmapLayer({
+            autoFit: true,
+          })
            .source(data, {
              parser: {
                type: 'json',
@ -36,7 +38,7 @@ export default class HeatMapLayerDemo extends React.Component {
              },
            })
            .size('count', [0, 1])
-            .shape('heatmap3D')
+            .shape('heatmap')
            // weight映射通道
            .style({
              intensity: 10,
@ -55,6 +57,23 @@ export default class HeatMapLayerDemo extends React.Component {
              },
            });
          scene.addLayer(layer);
+          setTimeout(() => {
+            layer.style({
+              rampColors: {
+                colors: [
+                  '#fee5d9',
+                  '#fcbba1',
+                  '#fc9272',
+                  '#fb6a4a',
+                  '#de2d26',
+                  '#a50f15',
+                ],
+                positions: [0, 0.2, 0.4, 0.6, 0.8, 1.0],
+              },
+            });
+            scene.render();
+            console.log('更新完成');
+          }, 2000);
        });
    });

--- a/stories/Layers/components/highlight.tsx
+++ b/stories/Layers/components/highlight.tsx
@ -0,0 +1,126 @@
+import { LineLayer, PolygonLayer, Scene } from '@antv/l7';
+import { Mapbox } from '@antv/l7-maps';
+import * as React from 'react';
+
+export default class LineDemo 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({
+        style: 'light',
+        pitch: 0,
+        center: [118.7368, 32.056],
+        zoom: 9,
+      }),
+    });
+    scene.on('loaded', () => {
+      fetch(
+        'https://gw.alipayobjects.com/os/basement_prod/91247d10-585b-4406-b1e2-93b001e3a0e4.json',
+      )
+        .then((res) => res.json())
+        .then((data) => {
+          const filllayer = new PolygonLayer({
+            name: 'fill',
+            zIndex: 3,
+          })
+            .source(data)
+            .shape('fill')
+            .color('unit_price', [
+              '#f0f9e8',
+              '#ccebc5',
+              '#a8ddb5',
+              '#7bccc4',
+              '#43a2ca',
+              '#0868ac',
+            ])
+            .style({
+              opacity: 1,
+            });
+
+          const filllayer2 = new PolygonLayer({
+            name: 'fill',
+            zIndex: 1,
+          })
+            .source(data)
+            .shape('fill')
+            .color('red')
+            .style({
+              opacity: 1,
+            });
+          const linelayer = new LineLayer({
+            zIndex: 5,
+            name: 'line2',
+          })
+            .source(data)
+            .shape('line')
+            .size(2)
+            .color('#fff')
+            .style({
+              opacity: 1,
+            });
+          const hightLayer = new LineLayer({
+            zIndex: 4, // 设置显示层级
+            name: 'line1',
+          })
+            .source(data)
+            .shape('line')
+            .size(3)
+            .color('#f00')
+            .style({
+              opacity: 1,
+            });
+          const hightLayer2 = new LineLayer({
+            zIndex: 6, // 设置显示层级
+            name: 'line3',
+          })
+            .source(data)
+            .shape('line')
+            .size(0.6)
+            .color('#000')
+            .style({
+              opacity: 1,
+            });
+          scene.addLayer(filllayer);
+          scene.addLayer(filllayer2);
+          scene.addLayer(linelayer);
+          scene.addLayer(hightLayer);
+          scene.addLayer(hightLayer2);
+          this.scene = scene;
+
+          // filllayer.on('click', (feature) => {
+          //   hightLayer.setData({
+          //     type: 'FeatureCollection',
+          //     features: [feature.feature],
+          //   });
+          //   hightLayer2.setData({
+          //     type: 'FeatureCollection',
+          //     features: [feature.feature],
+          //   });
+          // });
+          // scene.render();
+        });
+    });
+  }
+
+  public render() {
+    return (
+      <div
+        id="map"
+        style={{
+          position: 'absolute',
+          top: 0,
+          left: 0,
+          right: 0,
+          bottom: 0,
+        }}
+      />
+    );
+  }
+}
--- a/stories/Layers/components/polygon.tsx
+++ b/stories/Layers/components/polygon.tsx
@ -133,14 +133,18 @@ export default class TextLayerDemo extends React.Component {
        })
        .size('childrenNum', [10, 100000000])
        // .color('red')
-        .color('childrenNum', [
-          '#D92568',
-          '#E3507E',
-          '#FC7AAB',
-          '#F1D3E5',
-          '#A7B5E3',
-          '#F2EEFF',
-        ])
+        // .color('childrenNum', [
+        //   '#D92568',
+        //   '#E3507E',
+        //   '#FC7AAB',
+        //   '#F1D3E5',
+        //   '#A7B5E3',
+        //   '#F2EEFF',
+        // ])
+        .color('childrenNum*name', (childrenNum, name) => {
+          console.log(childrenNum, name);
+          return 'red';
+        })
        .style({
          opacity: 1.0,
        });
--- a/tsconfig.json
+++ b/tsconfig.json
@ -17,7 +17,7 @@
    "rootDir": "./",
    "baseUrl": "./",
    "paths": {
-      "@antv/l7-district": ["packages/boundry/src"],
+      "@antv/l7-district": ["packages/boundary/src"],
      "@antv/l7-*": ["packages/*/src"],
      "@antv/l7": ["packages/l7/src"],
      "*": ["node_modules", "packages", "typings/*"]
--- a/yarn.lock
+++ b/yarn.lock
@ -8667,6 +8667,15 @@ concat-stream@^2.0.0, concat-stream@~2.0.0:
    readable-stream "^3.0.2"
    typedarray "^0.0.6"

+concat-stream@~1.4.1:
+  version "1.4.11"
+  resolved "https://registry.npmjs.org/concat-stream/-/concat-stream-1.4.11.tgz#1dc9f666f2621da9c618b1e7f8f3b2ff70b5f76f"
+  integrity sha512-X3JMh8+4je3U1cQpG87+f9lXHDrqcb2MVLg9L7o8b1UZ0DzhRrUpdn65ttzu10PpJPPI3MQNkis+oha6TSA9Mw==
+  dependencies:
+    inherits "~2.0.1"
+    readable-stream "~1.1.9"
+    typedarray "~0.0.5"
+
 concat-with-sourcemaps@^1.1.0:
  version "1.1.0"
  resolved "https://registry.npmjs.org/concat-with-sourcemaps/-/concat-with-sourcemaps-1.1.0.tgz#d4ea93f05ae25790951b99e7b3b09e3908a4082e"
@ -17811,6 +17820,11 @@ minimist@0.0.5:
  resolved "https://registry.npmjs.org/minimist/-/minimist-0.0.5.tgz#d7aa327bcecf518f9106ac6b8f003fa3bcea8566"
  integrity sha1-16oye87PUY+RBqxrjwA/o7zqhWY=

+minimist@0.0.7:
+  version "0.0.7"
+  resolved "https://registry.npmjs.org/minimist/-/minimist-0.0.7.tgz#dc4c620253c542eda0d2eb91c3c6a971a11e63e7"
+  integrity sha1-3ExiAlPFQu2g0uuRw8apcaEeY+c=
+
 minimist@1.2.5, minimist@^1.1.0, minimist@^1.1.1, minimist@^1.1.3, minimist@^1.2.0, minimist@^1.2.5, minimist@~1.2.0:
  version "1.2.5"
  resolved "https://registry.npmjs.org/minimist/-/minimist-1.2.5.tgz#67d66014b66a6a8aaa0c083c5fd58df4e4e97602"
@ -23769,6 +23783,20 @@ simplebar@^4.2.3:
    lodash.throttle "^4.1.1"
    resize-observer-polyfill "^1.5.1"

+simplify-geojson@^1.0.3:
+  version "1.0.3"
+  resolved "https://registry.npmjs.org/simplify-geojson/-/simplify-geojson-1.0.3.tgz#4f9ed4f0f62be86d38526bcdcae072b0e9df5ef4"
+  integrity sha1-T57U8PYr6G04UmvNyuBysOnfXvQ=
+  dependencies:
+    concat-stream "~1.4.1"
+    minimist "0.0.7"
+    simplify-geometry "0.0.2"
+
+simplify-geometry@0.0.2:
+  version "0.0.2"
+  resolved "https://registry.npmjs.org/simplify-geometry/-/simplify-geometry-0.0.2.tgz#63797e676eae96835ace02bcd27d3e1af544f49c"
+  integrity sha1-Y3l+Z26uloNazgK80n0+GvVE9Jw=
+
 single-line-log@^1.1.2:
  version "1.1.2"
  resolved "https://registry.npmjs.org/single-line-log/-/single-line-log-1.1.2.tgz#c2f83f273a3e1a16edb0995661da0ed5ef033364"
@ -25830,7 +25858,7 @@ typedarray-to-buffer@^3.1.5:
  dependencies:
    is-typedarray "^1.0.0"

-typedarray@^0.0.6:
+typedarray@^0.0.6, typedarray@~0.0.5:
  version "0.0.6"
  resolved "https://registry.npmjs.org/typedarray/-/typedarray-0.0.6.tgz#867ac74e3864187b1d3d47d996a78ec5c8830777"
  integrity sha1-hnrHTjhkGHsdPUfZlqeOxciDB3c=