chore(boundary): rename file

.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/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` 是否显示标注

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 标注配置项 支持常量，不支持数据映射

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 标注字体颜色 常量

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` 是否显示标注

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,6 +108,7 @@ export default class BaseLayer extends EventEmitter {
       depth: 1,
       adcode: [],
       joinBy: ['name', 'name'],
+      simplifyTolerance: false,
       label: {
         enable: true,
         color: '#000',

packages/boundary/src/layer/interface.ts

@@ -102,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

@@ -116,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);

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/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];
   }
@@ -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)
-            ? [size[0], size[1] + this.layer.zIndex]
-            : [size as number, this.layer.zIndex];
+          return Array.isArray(size) ? [size[0], size[1]] : [size as number, 0];
         },
       },
     });
@@ -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));
-  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);

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

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,12 +199,13 @@ 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,
+        simplifyTolerance: 0.02,
         label: {
           field: 'name',
-          size: 20,
+          size: 10,
           padding: [5, 5],
           textAllowOverlap: true,
         },
@@ -232,7 +233,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')
@@ -242,29 +243,23 @@ export default class Country extends React.Component {
             opacity: 1,
           });
         const hightLayer = new LineLayer({
-          zIndex: 7, // 设置显示层级
+          zIndex: 4, // 设置显示层级
           name: 'line3',
         })
-          .source({
-            type: 'FeatureCollection',
-            features: [],
-          })
+          .source(filldata)
           .shape('line')
-          .size(0.6)
+          .size(1.2)
           .color('#000')
           .style({
             opacity: 1,
           });
         const hightLayer2 = new LineLayer({
-          zIndex: 6, // 设置显示层级
+          zIndex: 3, // 设置显示层级
           name: 'line3',
         })
-          .source({
-            type: 'FeatureCollection',
-            features: [],
-          })
+          .source(filldata)
           .shape('line')
-          .size(2)
+          .size(2.4)
           .color('#fff')
           .style({
             opacity: 1,

stories/Layers/components/heatmap2.tsx

@@ -60,11 +60,18 @@ export default class HeatMapLayerDemo extends React.Component {
           setTimeout(() => {
             layer.style({
               rampColors: {
-                colors: ['#fee5d9', '#fcbba1', '#fc9272', '#fb6a4a', '#de2d26', '#a50f15'],
+                colors: [
+                  '#fee5d9',
+                  '#fcbba1',
+                  '#fc9272',
+                  '#fb6a4a',
+                  '#de2d26',
+                  '#a50f15',
+                ],
                 positions: [0, 0.2, 0.4, 0.6, 0.8, 1.0],
               },
             });
-            console.log('更新完成')
+            console.log('更新完成');
           }, 2000);
         });
     });

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=