Merge pull request #425 from antvis/docs_udpdte

Docs udpdte

.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');

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 计算

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 计算

docs/api/district/baselayer.en.md

@@ -25,6 +25,7 @@ order: 2
     对照表 `Array [string, string]` 第一个值为空间数据字段，第二个为传入数据字段名
   - depth 数据显示层级 0：国家级，1:省级，2: 市级，3：线级
   - showBorder `boolean` 是否显示国界线，默认显示，不建议不显示
+  - simplifyTolerance 数据抽稀容差,默认不抽稀 `boolean | number` 单位为度，一度约 111km，数字越大精度越低。参考设置数据 0.01
   - label 标注配置项 支持常量，不支持数据映射
 
     - enable `boolean` 是否显示标注
@@ -92,6 +93,8 @@ District 提供 polygon 数据需要跟用户的属性数据，通过关系字
 
 #### fillLayer
 
+图层事件可以通过该属性进行设置
+
 ### 方法
 
 #### updateData(data, joinBy)

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 图层填充颜色，支持常量和数据映射
@@ -94,6 +98,8 @@ District 提供 polygon 数据需要跟用户的属性数据，通过关系字
 
 #### fillLayer
 
+图层事件可以通过该属性进行设置
+
 ### 方法
 
 #### updateData(data, joinBy)

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
 

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`; 描边颜色

examples/district/basic/API.en.md

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

examples/district/basic/API.zh.md

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

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')
   };
 };

packages/boundary/package.json

@@ -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"

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';
 
@@ -89,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();
@@ -103,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,
@@ -285,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, {
@@ -294,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(label);
-      .style({
+    this.setLayerAttribute(labelLayer, 'color', label.color as AttributeType);
-        opacity: label.opacity,
+    this.setLayerAttribute(labelLayer, 'size', label.size as AttributeType);
-        stroke: label.stroke,
-        strokeWidth: label.strokeWidth,
-        textAllowOverlap: label.textAllowOverlap,
-      });
-
     this.setLayerAttribute(labelLayer, 'filter', label.filter);
     return labelLayer;
   }

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';
@@ -14,8 +14,6 @@ export default class CountryLayer extends BaseLayer {
     ];
     if (showBorder) {
       this.addProvinceLine(countryConfig.provinceLine);
-    }
-
       if (depth === 2 * 1) {
         this.addCityBorder(countryConfig.fill);
       }
@@ -23,6 +21,7 @@ export default class CountryLayer extends BaseLayer {
         this.addCountyBorder(countryConfig.fill);
       }
     }
+  }
   protected async addProvinceFill() {
     const { depth } = this.options;
     const countryConfig = getDataConfig(this.options.geoDataLevel).country.CHN[
@@ -264,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,

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,6 +102,7 @@ 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>;

packages/boundary/src/layer/province.ts

@@ -102,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
     ];
@@ -115,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);
@@ -122,8 +124,10 @@ export default class ProvinceLayer extends BaseLayer {
       this.addLabelLayer(labelData);
     }
     this.lineRawData = fillData;
+    if (showBorder) {
       this.addFillLine(data);
     }
+  }
 
   private async addProvinceLineLayer() {
     const { depth, adcode } = this.options as IProvinceLayerOption;

packages/core/src/services/layer/ILayerService.ts

@@ -82,6 +82,7 @@ export interface ILayer {
   zIndex: number;
   plugins: ILayerPlugin[];
   layerModelNeedUpdate: boolean;
+  styleNeedUpdate: boolean;
   layerModel: ILayerModel;
   dataState: IDataState; // 数据流状态
   pickedFeatureID: number | null;

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;
   }

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,

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.updateColorTexture();
-    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,
-    });
 
     return [this.intensityModel, this.colorModel];
   }
@@ -335,4 +328,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,
+    });
+  }
 }

packages/layers/src/line/models/line.ts

@@ -49,6 +49,7 @@ export default class LineModel extends BaseModel {
         fragmentShader: line_frag,
         triangulation: LineTriangulation,
         blend: this.getBlend(),
+        depth: { enable: false },
       }),
     ];
   }
@@ -66,7 +67,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,
         },
@@ -88,7 +89,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,
         },
@@ -123,9 +124,7 @@ export default class LineModel extends BaseModel {
           attributeIdx: number,
         ) => {
           const { size = 1 } = feature;
-          return Array.isArray(size)
+          return Array.isArray(size) ? [size[0], size[1]] : [size as number, 0];
-            ? [size[0], size[1] + this.layer.zIndex]
-            : [size as number, this.layer.zIndex];
         },
       },
     });
@@ -162,7 +161,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,
         },

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));
+  float blur = 1.- smoothstep(u_blur, 1., length(v_normal.xy));
-  gl_FragColor.a *= u_opacity;
+  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);

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', () => {

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;

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],

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', () => {

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,

stories/District/Layer/Country.tsx

@@ -1,4 +1,4 @@
-import { LineLayer, 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,14 +199,16 @@ export default class Country extends React.Component {
       const Layer = new CountryLayer(scene, {
         visible: true,
         data: ProvinceData,
-        geoDataLevel: 1,
+        geoDataLevel: 2,
         joinBy: ['NAME_CHN', 'name'],
         showBorder: false,
-        // label: {
+        label: {
-        //   field: 'NAME_CHN',
+          field: 'name',
-        //   textAllowOverlap: true,
+          size: 10,
-        // },
+          padding: [5, 5],
-        depth: 1,
+          textAllowOverlap: true,
+        },
+        depth: 2,
         fill: {
           color: {
             field: 'NAME_CHN',
@@ -230,7 +232,7 @@ export default class Country extends React.Component {
       Layer.on('loaded', () => {
         const filldata = Layer.getFillData();
         const border = new LineLayer({
-          zIndex: 3, // 设置显示层级
+          zIndex: 5, // 设置显示层级
         })
           .source(filldata)
           .shape('line')
@@ -240,29 +242,23 @@ export default class Country extends React.Component {
             opacity: 1,
           });
         const hightLayer = new LineLayer({
-          zIndex: 7, // 设置显示层级
+          zIndex: 4, // 设置显示层级
           name: 'line3',
         })
-          .source({
+          .source(filldata)
-            type: 'FeatureCollection',
-            features: [],
-          })
           .shape('line')
-          .size(0.6)
+          .size(1.2)
           .color('#000')
           .style({
             opacity: 1,
           });
         const hightLayer2 = new LineLayer({
-          zIndex: 6, // 设置显示层级
+          zIndex: 3, // 设置显示层级
           name: 'line3',
         })
-          .source({
+          .source(filldata)
-            type: 'FeatureCollection',
-            features: [],
-          })
           .shape('line')
-          .size(2)
+          .size(2.4)
           .color('#fff')
           .style({
             opacity: 1,

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,

stories/District/Layer/province.tsx

@@ -222,6 +222,7 @@ export default class Country extends React.Component {
         adcode: ['330000'],
         stroke: '#7096B3',
         depth: 2,
+        showBorder: false,
         label: {
           enable: false,
         },

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,

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);
         });
     });
 

stories/Layers/components/polygon.tsx

@@ -133,14 +133,18 @@ export default class TextLayerDemo extends React.Component {
         })
         .size('childrenNum', [10, 100000000])
         // .color('red')
-        .color('childrenNum', [
+        // .color('childrenNum', [
-          '#D92568',
+        //   '#D92568',
-          '#E3507E',
+        //   '#E3507E',
-          '#FC7AAB',
+        //   '#FC7AAB',
-          '#F1D3E5',
+        //   '#F1D3E5',
-          '#A7B5E3',
+        //   '#A7B5E3',
-          '#F2EEFF',
+        //   '#F2EEFF',
-        ])
+        // ])
+        .color('childrenNum*name', (childrenNum, name) => {
+          console.log(childrenNum, name);
+          return 'red';
+        })
         .style({
           opacity: 1.0,
         });

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/*"]

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=