feat(source): wip cluster

examples/tutorial/data/demo/data_update.js

@@ -0,0 +1,46 @@
+import { Scene, PointLayer } from '@antv/l7';
+import { GaodeMap } from '@antv/l7-maps';
+const scene = new Scene({
+  id: 'map',
+  map: new GaodeMap({
+    style: 'light',
+    pitch: 0,
+    center: [ 120.19382669582967, 30.258134 ],
+    zoom: 5
+  })
+});
+
+const radius = 0.1;
+
+function pointOnCircle(angle) {
+  return {
+    type: 'FeatureCollection',
+    features: [{
+      type: 'Feature',
+      properties: {},
+      geometry: {
+        type: 'Point',
+        coordinates: [ 120.19382669582967 + Math.cos(angle) * radius, 30.258134 + Math.sin(angle) * radius ]
+      }
+    }]
+  };
+}
+const layer = new PointLayer()
+  .source(pointOnCircle(0))
+  .shape('circle')
+  .size(15) // default 1
+  .color('#2F54EB')
+  .style({
+    stroke: 'rgb(255,255,255)',
+    strokeWidth: 2,
+    opacity: 1
+  });
+scene.addLayer(layer);
+function animateMarker(timestamp) {
+  layer.setData(pointOnCircle(timestamp / 1000));
+  requestAnimationFrame(animateMarker);
+}
+layer.on('inited', () => {
+  animateMarker(0);
+});
+

examples/tutorial/data/demo/meta.json

@@ -6,8 +6,11 @@
   "demos": [
     {
       "filename": "line.js",
-      "title": "json数据"",
-      "screenshot": ""
+      "title": "json数据"
+    },
+    {
+      "filename": "data_update.js",
+      "title": "数据更新"
     }
   ]
 }

package.json

@@ -123,8 +123,8 @@
     "site:clean": "gatsby clean",
     "site:deploy": "yarn run site:build && gh-pages -d public",
     "site:publish": "gh-pages -d public",
-    "lint:fix": "prettier --write docs/api/**/*.md packages/**/*.{spec,story}.ts{,x} stories/**/**/*.tsx",
-    "lint:examples": "eslint examples/**/**/*.js --fix",
+    "lint-fix": "prettier --write docs/api/**/*.md",
+    "lin-examples": "eslint examples/**/**/*.js --fix",
     "prebuild": "run-p tsc lint",
     "build": "yarn clean && lerna run build",
     "postbuild": "yarn build:declarations",

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

@@ -95,6 +95,7 @@ export interface ILayer {
   render(): ILayer;
   destroy(): void;
   source(data: any, option?: ISourceCFG): ILayer;
+  setData(data: any, option?: ISourceCFG): ILayer;
   /**
    * 向当前图层注册插件
    * @param plugin 插件实例

packages/core/src/services/source/ISourceService.ts

@@ -16,9 +16,19 @@ export interface ITransform {
 }
 
 export interface ISourceCFG {
+  cluster?: boolean;
+  clusterOptions?: Partial<IClusterOptions>;
   parser?: IParserCfg;
   transforms?: ITransform[];
 }
+export interface IClusterOptions {
+  enable: false;
+  radius: number;
+  maxZoom: number;
+  minZoom: number;
+  field: string;
+  method: 'max' | 'sum' | 'min' | 'mean' | 'count' | CallBack;
+}
 export interface IDictionary<TValue> {
   [key: string]: TValue;
 }

packages/layers/src/core/BaseLayer.ts

@@ -249,6 +249,7 @@ export default class BaseLayer<ChildLayerStyleOptions = {}> extends EventEmitter
 
     // 获取插件集
     this.plugins = this.container.getAll<ILayerPlugin>(TYPES.ILayerPlugin);
+    console.log(this.plugins)
     // 完成插件注册，传入场景和图层容器内的服务
     for (const plugin of this.plugins) {
       plugin.apply(this, {
@@ -338,6 +339,16 @@ export default class BaseLayer<ChildLayerStyleOptions = {}> extends EventEmitter
     };
     return this;
   }
+
+  public setData(data: any, options?: ISourceCFG) {
+    this.sourceOption.data = data;
+    this.sourceOption.options = options;
+    console.time('init')
+    this.hooks.init.call();
+    console.timeEnd('init')
+    this.buildModels();
+    return this;
+  }
   public style(options: object & Partial<ILayerConfig>): ILayer {
     const { passes, ...rest } = options;
 
@@ -456,6 +467,12 @@ export default class BaseLayer<ChildLayerStyleOptions = {}> extends EventEmitter
     // 解绑图层容器中的服务
     // this.container.unbind(TYPES.IStyleAttributeService);
   }
+  public clear() {
+
+    this.styleAttributeService.clearAllAttributes();
+    // 销毁所有 model
+    this.models.forEach((model) => model.destroy());
+  }
 
   public isDirty() {
     return !!(

packages/layers/src/plugins/DataMappingPlugin.ts

@@ -27,6 +27,7 @@ export default class DataMappingPlugin implements ILayerPlugin {
     }: { styleAttributeService: IStyleAttributeService },
   ) {
     layer.hooks.init.tap('DataMappingPlugin', () => {
+      console.time('DataMappingPlugin')
       const attributes = styleAttributeService.getLayerStyleAttributes() || [];
       const { dataArray } = layer.getSource().data;
 
@@ -37,6 +38,7 @@ export default class DataMappingPlugin implements ILayerPlugin {
 
       // mapping with source data
       layer.setEncodedData(this.mapping(attributes, dataArray));
+      console.timeEnd('DataMappingPlugin')
     });
 
     // remapping before render

packages/layers/src/plugins/DataSourcePlugin.ts

@@ -6,8 +6,10 @@ import { injectable } from 'inversify';
 export default class DataSourcePlugin implements ILayerPlugin {
   public apply(layer: ILayer) {
     layer.hooks.init.tap('DataSourcePlugin', () => {
+      console.time('DataSourcePlugin')
       const { data, options } = layer.sourceOption;
       layer.setSource(new Source(data, options));
+      console.timeEnd('DataSourcePlugin')
     });
   }
 }

packages/layers/src/plugins/FeatureScalePlugin.ts

@@ -57,10 +57,12 @@ export default class FeatureScalePlugin implements ILayerPlugin {
     }: { styleAttributeService: IStyleAttributeService },
   ) {
     layer.hooks.init.tap('FeatureScalePlugin', () => {
+      console.time('FeatureScalePlugin')
       this.scaleOptions = layer.getScaleOptions();
       const attributes = styleAttributeService.getLayerStyleAttributes();
       const { dataArray } = layer.getSource().data;
       this.caculateScalesForAttributes(attributes || [], dataArray);
+      console.timeEnd('FeatureScalePlugin')
     });
 
     layer.hooks.beforeRender.tap('FeatureScalePlugin', () => {

packages/layers/src/plugins/PixelPickingPlugin.ts

@@ -38,6 +38,7 @@ export default class PixelPickingPlugin implements ILayerPlugin {
   ) {
     // TODO: 由于 Shader 目前无法根据是否开启拾取进行内容修改，因此即使不开启也需要生成 a_PickingColor
     layer.hooks.init.tap('PixelPickingPlugin', () => {
+      console.time('PixelPickingPlugin')
       const { enablePicking } = layer.getLayerConfig();
       styleAttributeService.registerStyleAttribute({
         name: 'pickingColor',
@@ -55,6 +56,7 @@ export default class PixelPickingPlugin implements ILayerPlugin {
             enablePicking ? encodePickingColor(featureIdx) : [0, 0, 0],
         },
       });
+      console.timeEnd('PixelPickingPlugin')
     });
     // 必须要与 PixelPickingPass 结合使用，因此必须开启 multiPassRenderer
     // if (layer.multiPassRenderer) {

packages/layers/src/plugins/RegisterStyleAttributePlugin.ts

@@ -25,7 +25,9 @@ export default class RegisterStyleAttributePlugin implements ILayerPlugin {
     }: { styleAttributeService: IStyleAttributeService },
   ) {
     layer.hooks.init.tap('RegisterStyleAttributePlugin', () => {
+      console.time('RegisterStyleAttributePlugin')
       this.registerBuiltinAttributes(styleAttributeService);
+      console.timeEnd('RegisterStyleAttributePlugin')
     });
   }
 

packages/layers/src/plugins/ShaderUniformPlugin.ts

@@ -31,6 +31,7 @@ export default class ShaderUniformPlugin implements ILayerPlugin {
   public apply(layer: ILayer) {
     layer.hooks.beforeRender.tap('ShaderUniformPlugin', () => {
       // 重新计算坐标系参数
+      console.time('ShaderUniformPlugin')
       this.coordinateSystemService.refresh();
 
       const { width, height } = this.rendererService.getViewportSize();
@@ -58,7 +59,7 @@ export default class ShaderUniformPlugin implements ILayerPlugin {
           u_ModelMatrix: [1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1],
         }),
       );
-
+      console.timeEnd('ShaderUniformPlugin')
       // TODO：脏检查，决定是否需要渲染
     });
   }

packages/layers/src/plugins/UpdateStyleAttributePlugin.ts

@@ -21,7 +21,8 @@ export default class UpdateStyleAttributePlugin implements ILayerPlugin {
       styleAttributeService,
     }: { styleAttributeService: IStyleAttributeService },
   ) {
-    layer.hooks.beforeRender.tap('UpdateStyleAttributePlugin', () => {
+    layer.hooks.init.tap('UpdateStyleAttributePlugin', () => {
+      console.time('UpdateStyleAttributePlugin')
       const attributes = styleAttributeService.getLayerStyleAttributes() || [];
       attributes
         .filter((attribute) => attribute.needRegenerateVertices)
@@ -38,6 +39,7 @@ export default class UpdateStyleAttributePlugin implements ILayerPlugin {
             `regenerate vertex attributes: ${attribute.name} finished`,
           );
         });
+        console.timeEnd('UpdateStyleAttributePlugin')
     });
   }
 }