Merge pull request #161 from antvis/setdata

fix: 修复图层高亮不正常显示的问题 fix #150

README.md

@@ -6,6 +6,8 @@ Large-scale WebGL-powered Geospatial data visualization analysis framework.
 
 [中文 README](./README.zh-CN.md)
 
+[GitHub](https://github.com/antvis/L7)
+
 Powered by WebGL, the rendering technology of L7 supports fast and efficient rendering of big data, 2D/3D rendering, possible through calculation and analysis of spatial data by GPU Parallel Compu-ting.
 
 L7 focuses on geographic data expressiveness，interaction and design of geographic visualization layers. The basemaps on the platform are powered by third-party services

README.zh-CN.md

@@ -2,6 +2,10 @@
 
 [![travis ci](https://travis-ci.com/antvis/L7.svg?branch=master)](https://travis-ci.com/antvis/L7) [![](https://flat.badgen.net/npm/v/@antv/l7?icon=npm)](https://www.npmjs.com/package/@antv/l7) ![最近提交](https://badgen.net/github/last-commit/antvis/L7)
 
+[README](./README.md)
+
+[GitHub](https://github.com/antvis/L7)
+
 L7 是由蚂蚁金服 AntV 数据可视化团队推出的基于 WebGL 的开源大规模地理空间数据可视分析开发框架。L7 中的 L 代表 Location，7 代表世界七大洲，寓意能为全球位置数据提供可视分析的能力。L7 专注数据可视化化表达，通过颜色、大小、纹理，方向，体积等视觉变量设置实现从数据到信息清晰，有效的表达。
 
 L7 能够满足常见的地图图表，BI 系统的可视化分析、以及 GIS，交通，电力，国土，农业，城市等领域的空间信息管理，分析等应用系统开发需求。

demos/raster/basic/demo/image.js

@@ -5,8 +5,8 @@ const scene = new Scene({
   pitch: 0,
   type: 'amap',
   style: 'light',
-  center: [121.2680, 30.3628],
+  center: [ 121.2680, 30.3628 ],
-  zoom: 13,
+  zoom: 13
 });
 
 const layer = new ImageLayer({});
@@ -15,11 +15,11 @@ layer.source(
   {
     parser: {
       type: 'image',
-      extent: [121.168, 30.2828, 121.384, 30.4219],
+      extent: [ 121.168, 30.2828, 121.384, 30.4219 ]
-    },
+    }
-  },
+  }
 );
-scene.on('loaded',()=>{
+scene.on('loaded', () => {
   scene.addLayer(layer);
-})
+});
 

demos/tutorial/data/demo/line.js

@@ -33,6 +33,5 @@ fetch('https://gw.alipayobjects.com/os/rmsportal/ZVfOvhVCzwBkISNsuKCc.json')
           ].reverse(),
         )
     scene.addLayer(layer);
-    console.log(layer);
 
   });

docs/api/layer/heatmap_layer/grid.en.md

@@ -40,8 +40,8 @@ layer.source(data, {
         field:'v',
         method:'sum'
         }
-      ],
+      ]
-  }
+  });
 
 ```
 ## shape
@@ -105,7 +105,7 @@ layer.size('value', (value)=>{})  // 回调函数设置高度
       coverage: 0.9,
       angle: 0,
       opacity: 1.0
-  })
+  });
   
 ```
 

docs/api/layer/heatmap_layer/grid.zh.md

@@ -38,8 +38,8 @@ layer.source(data, {
         field:'v',
         method:'sum'
         }
-      ],
+      ]
-  }
+  })
 
 ```
 ## shape

docs/api/layer/heatmap_layer/hexagon.en.md

@@ -35,8 +35,8 @@ layer.source(data, {
         field:'v',
         method:'sum'
         }
-      ],
+      ]
-  }
+  })
 
 ```
 ## shape
@@ -99,7 +99,7 @@ layer.size('value', (value)=>{})  // 回调函数设置高度
       coverage: 0.9,
       angle: 0,
       opacity: 1.0
-  })
+  });
   
 ```
 

docs/api/layer/heatmap_layer/hexagon.zh.md

@@ -40,8 +40,8 @@ layer.source(data, {
         field:'v',
         method:'sum'
         }
-      ],
+      ]
-  }
+  })
 
 ```
 ## shape
@@ -103,8 +103,7 @@ layer.size('value', (value)=>{})  // 回调函数设置高度
       coverage: 0.9,
       angle: 0,
       opacity: 1.0
-  })
+  });
-  
 ```
 
 ### 完整代码

docs/api/source/csv.en.md

@@ -35,19 +35,15 @@ layer.source(data, {
 ### 线段弧线数据通过 CSV 加载
 
 ```javascript
-layer.source(
+layer.source(data, {
-  data,
+  parser: {
-   {
+    type: 'csv',
-    parser:{
+    x: 'lng1',
-        type:'csv',
+    y: 'lat1',
-        x:'lng1',
+    x1: 'lng1',
-        y:'lat1' ,
+    y1: 'lat2',
-        x1:'lng1',
+  },
-        y1:'lat2' ,
+});
-    }
-  }
-})
-
 ```
 
 [CSV 线段数据 demo 示例](../../../examples/gallery/basic#arcCircle)

docs/api/source/csv.zh.md

@@ -35,19 +35,15 @@ layer.source(data, {
 ### 线段弧线数据通过 CSV 加载
 
 ```javascript
-layer.source(
+layer.source(data, {
-  data,
+  parser: {
-   {
+    type: 'csv',
-    parser:{
+    x: 'lng1',
-        type:'csv',
+    y: 'lat1',
-        x:'lng1',
+    x1: 'lng1',
-        y:'lat1' ,
+    y1: 'lat2',
-        x1:'lng1',
+  },
-        y1:'lat2' ,
+});
-    }
-  }
-})
-
 ```
 
 [CSV 线段数据 demo 示例](../../../examples/gallery/basic#arcCircle)

docs/api/source/json.en.md

@@ -125,34 +125,32 @@ layer.source(data, {
 简易解析只支持两个点组成的线段，主要再绘制弧线的时候比较常用，只需指定线段的起始点坐标
 
 ```javascript
-const data = [{
+const data = [
-   lng1:112.345,
+  {
-   lat1:30.455,
+    lng1: 112.345,
-   lng2:112.345,
+    lat1: 30.455,
-   lat2:30.455,
+    lng2: 112.345,
-   value: 10
+    lat2: 30.455,
+    value: 10,
   },
   {
-   lng1:114.345,
+    lng1: 114.345,
-   lat1:31.455,
+    lat1: 31.455,
-   lng2:112.345,
+    lng2: 112.345,
-   lat2:30.455,
+    lat2: 30.455,
-   value: 10
+    value: 10,
-  }
+  },
 ];
 
-layer.source(
+layer.source(data, {
-  data,
+  parser: {
-   {
+    type: 'json',
-    parser:{
+    x: 'lng1',
-        type:'json',
+    y: 'lat1',
-        x:'lng1',
+    x1: 'lng1',
-        y:'lat1' ,
+    y1: 'lat2',
-        x1:'lng1',
+  },
-        y1:'lat2' ,
+});
-    }
-  }
-})
 ```
 
 #### 通用解析
@@ -164,32 +162,21 @@ coordinates 包含两个坐标，
 第二个坐标 对应 x1, y1
 
 ```javascript
- const data = [
+const data = [
-   {
+  {
-  "id": "1",
+    id: '1',
-  "coord": [
+    coord: [
-      [
+      [101.953125, 50.51342652633956],
-        101.953125,
+      [119.17968749999999, 33.137551192346145],
-        50.51342652633956
+    ],
-      ],
+  },
-      [
+];
-        119.17968749999999,
+layer.source(data, {
-        33.137551192346145
+  parser: {
-      ]
+    type: 'json',
-    ]
+    coordinates: 'coord',
-   }
+  },
-
+});
-layer.source(
-  data,
-   {
-    parser:{
-        type:'json',
-        coordinates: "coord",
-
-    }
-  }
-})
-
 ```
 
 如果需要使用绘制轨迹数据，需要通过 coodinates 指定线的点序列。
@@ -214,16 +201,12 @@ const data = {
 使用时通过 coordinates 指定
 
 ```javascript
-layer.source(
+layer.source(data, {
-  data,
+  parser: {
-   {
+    type: 'json',
-    parser:{
+    coordinates: 'path',
-        type:'json',
+  },
-        coordinates:'path'
+});
-    }
-  }
-})
-
 ```
 
 ### 面数据

docs/api/source/json.zh.md

@@ -127,34 +127,32 @@ layer.source(data, {
 简易解析只支持两个点组成的线段，主要再绘制弧线的时候比较常用，只需指定线段的起始点坐标
 
 ```javascript
-const data = [{
+const data = [
-   lng1:112.345,
+  {
-   lat1:30.455,
+    lng1: 112.345,
-   lng2:112.345,
+    lat1: 30.455,
-   lat2:30.455,
+    lng2: 112.345,
-   value: 10
+    lat2: 30.455,
+    value: 10,
   },
   {
-   lng1:114.345,
+    lng1: 114.345,
-   lat1:31.455,
+    lat1: 31.455,
-   lng2:112.345,
+    lng2: 112.345,
-   lat2:30.455,
+    lat2: 30.455,
-   value: 10
+    value: 10,
-  }
+  },
 ];
 
-layer.source(
+layer.source(data, {
-  data,
+  parser: {
-   {
+    type: 'json',
-    parser:{
+    x: 'lng1',
-        type:'json',
+    y: 'lat1',
-        x:'lng1',
+    x1: 'lng1',
-        y:'lat1' ,
+    y1: 'lat2',
-        x1:'lng1',
+  },
-        y1:'lat2' ,
+});
-    }
-  }
-})
 ```
 
 #### 通用解析
@@ -166,31 +164,21 @@ coordinates 包含两个坐标，
 第二个坐标 对应 x1, y1
 
 ```javascript
- const data = [
+const data = [
-   {
+  {
-  "id": "1",
+    id: '1',
-  "coord": [
+    coord: [
-      [
+      [101.953125, 50.51342652633956],
-        101.953125,
+      [119.17968749999999, 33.137551192346145],
-        50.51342652633956
+    ],
-      ],
+  },
-      [
+];
-        119.17968749999999,
+layer.source(data, {
-        33.137551192346145
+  parser: {
-      ]
+    type: 'json',
-    ]
+    coordinates: 'coord',
-   }
+  },
-
+});
-layer.source(
-  data,
-   {
-    parser:{
-        type:'json',
-        coordinates: "coord",
-    }
-  }
-})
-
 ```
 
 如果需要使用绘制轨迹数据，需要通过 coodinates 指定线的点序列。
@@ -215,16 +203,12 @@ const data = {
 使用时通过 coordinates 指定
 
 ```javascript
-layer.source(
+layer.source(data, {
-  data,
+  parser: {
-   {
+    type: 'json',
-    parser:{
+    coordinates: 'path',
-        type:'json',
+  },
-        coordinates:'path'
+});
-    }
-  }
-})
-
 ```
 
 ### 面数据

docs/api/source/source.zh.md

@@ -85,16 +85,16 @@ tranforms 处理的是的标准化之后的数据
 
 处理完之后返回的也是标准数据
 
-```javascript
+```json
- [{
+[
-   coordinates: [[]] // 地理坐标字段
+  {
-   _id:'',// 标准化之后新增字段
+    "coordinates": [[]], // 地理坐标字段
-   name:''
+    "_id": "122", // 标准化之后新增字段
-   value:''
+    "name": "test",
-  // ....
+    "value": 1
- }]
+    // ....
-
+  }
-
+]
 ```
 
 目前支持两种热力图使用的数据处理方法 grid，hexagon transform 配置项

packages/core/src/services/config/ConfigService.ts

@@ -56,10 +56,10 @@ const defaultLayerConfig: Partial<ILayerConfig> = {
   enableMultiPassRenderer: true,
   enablePicking: true,
   active: false,
-  activeColor: 'red',
+  activeColor: '#2f54eb',
   enableHighlight: false,
   enableSelect: false,
-  highlightColor: 'red',
+  highlightColor: '#2f54eb',
   selectColor: 'blue',
   enableTAA: false,
   jitterScale: 1,

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

@@ -127,7 +127,7 @@ export interface ILayer {
     id: number | { x: number; y: number },
     option?: IActiveOption,
   ): void;
-  select(option: IActiveOption | false): ILayer;
+  select(option: IActiveOption | boolean): ILayer;
   setSelect(
     id: number | { x: number; y: number },
     option?: IActiveOption,

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

@@ -16,6 +16,8 @@ export default class LayerService implements ILayerService {
 
   private animateInstanceCount: number = 0;
 
+  private alreadyInRendering: boolean = false;
+
   @inject(TYPES.IRendererService)
   private readonly renderService: IRendererService;
 
@@ -58,7 +60,11 @@ export default class LayerService implements ILayerService {
 
   public renderLayers() {
     // TODO：脏检查，只渲染发生改变的 Layer
+    if (this.alreadyInRendering) {
+      return;
+    }
     //
+    this.alreadyInRendering = true;
     this.clear();
     this.layers
       .filter((layer) => layer.isVisible())
@@ -69,6 +75,7 @@ export default class LayerService implements ILayerService {
         layer.render();
         layer.hooks.afterRender.call();
       });
+    this.alreadyInRendering = false;
   }
 
   public updateRenderOrder() {

packages/core/src/services/renderer/passes/PixelPickingPass.ts

@@ -50,13 +50,18 @@ export default class PixelPickingPass<
   public init(layer: ILayer, config?: Partial<InitializationOptions>) {
     super.init(layer, config);
     this.layer = layer;
-    const { createTexture2D, createFramebuffer } = this.rendererService;
+    const {
+      createTexture2D,
+      createFramebuffer,
+      getViewportSize,
+    } = this.rendererService;
+    const { width, height } = getViewportSize();
 
     // 创建 picking framebuffer，后续实时 resize
     this.pickingFBO = createFramebuffer({
       color: createTexture2D({
-        width: 1,
+        width,
-        height: 1,
+        height,
         wrapS: gl.CLAMP_TO_EDGE,
         wrapT: gl.CLAMP_TO_EDGE,
       }),
@@ -237,59 +242,14 @@ export default class PixelPickingPass<
    */
   private highlightPickedFeature(pickedColors: Uint8Array | undefined) {
     const [r, g, b] = pickedColors;
-    const { clear, useFramebuffer } = this.rendererService;
+    this.layer.hooks.beforeHighlight.call([r, g, b]);
-    // 先输出到 PostProcessor
+    this.layerService.renderLayers();
-    const readFBO = this.layer.multiPassRenderer
-      .getPostProcessor()
-      .getReadFBO();
-    this.layer.hooks.beforeRender.call();
-    useFramebuffer(readFBO, () => {
-      clear({
-        color: [0, 0, 0, 0],
-        depth: 1,
-        stencil: 0,
-        framebuffer: readFBO,
-      });
-
-      // TODO: highlight pass 需要 multipass
-      const originRenderFlag = this.layer.multiPassRenderer.getRenderFlag();
-      this.layer.multiPassRenderer.setRenderFlag(false);
-      this.layer.hooks.beforeHighlight.call([r, g, b]);
-      this.layer.render();
-      this.layer.hooks.afterHighlight.call();
-      this.layer.hooks.afterRender.call();
-      this.layer.multiPassRenderer.setRenderFlag(originRenderFlag);
-    });
-    this.layer.multiPassRenderer.getPostProcessor().render(this.layer);
   }
 
   private selectFeature(pickedColors: Uint8Array | undefined) {
     const [r, g, b] = pickedColors;
-    const { clear, useFramebuffer } = this.rendererService;
+    this.layer.hooks.beforeSelect.call([r, g, b]);
-
+    this.layerService.renderLayers();
-    // 先输出到 PostProcessor
-    const readFBO = this.layer.multiPassRenderer
-      .getPostProcessor()
-      .getReadFBO();
-    this.layer.hooks.beforeRender.call();
-    useFramebuffer(readFBO, () => {
-      clear({
-        color: [0, 0, 0, 0],
-        depth: 1,
-        stencil: 0,
-        framebuffer: readFBO,
-      });
-
-      // TODO: highlight pass 需要 multipass
-      const originRenderFlag = this.layer.multiPassRenderer.getRenderFlag();
-      this.layer.multiPassRenderer.setRenderFlag(false);
-      this.layer.hooks.beforeSelect.call([r, g, b]);
-      this.layer.render();
-      this.layer.hooks.afterSelect.call();
-      this.layer.hooks.afterRender.call();
-      this.layer.multiPassRenderer.setRenderFlag(originRenderFlag);
-    });
-    this.layer.multiPassRenderer.getPostProcessor().render(this.layer);
   }
 
   private selectFeatureHander({ featureId }: Partial<IInteractionTarget>) {

packages/core/src/shaders/picking.frag.glsl

@@ -43,4 +43,4 @@ vec4 filterPickingColor(vec4 color) {
  */
 vec4 filterColor(vec4 color) {
   return filterPickingColor(filterHighlightColor(color));
-}
+}

packages/layers/src/core/BaseLayer.ts

@@ -38,6 +38,7 @@ import {
   TYPES,
 } from '@antv/l7-core';
 import Source from '@antv/l7-source';
+import { encodePickingColor } from '@antv/l7-utils';
 import { EventEmitter } from 'eventemitter3';
 import { Container } from 'inversify';
 import { isFunction, isObject } from 'lodash';
@@ -225,6 +226,7 @@ export default class BaseLayer<ChildLayerStyleOptions = {}> extends EventEmitter
   public init() {
     // 设置配置项
     const sceneId = this.container.get<string>(TYPES.SceneID);
+    // 初始化图层配置项
     this.configService.setLayerConfig(sceneId, this.id, {});
 
     // 全局容器服务
@@ -505,11 +507,18 @@ export default class BaseLayer<ChildLayerStyleOptions = {}> extends EventEmitter
           ? options.color
           : this.getLayerConfig().highlightColor,
       });
-      this.interactionService.triggerActive(id);
+      this.hooks.beforeSelect.callAsync(
+        encodePickingColor(id as number) as number[],
+        () => {
+          setTimeout(() => {
+            this.reRender();
+          }, 1);
+        },
+      );
     }
   }
 
-  public select(option: IActiveOption | false): ILayer {
+  public select(option: IActiveOption | boolean): ILayer {
     const activeOption: Partial<ILayerConfig> = {};
     activeOption.enableSelect = isObject(option) ? true : option;
     if (isObject(option)) {
@@ -518,7 +527,7 @@ export default class BaseLayer<ChildLayerStyleOptions = {}> extends EventEmitter
         activeOption.selectColor = option.color;
       }
     } else {
-      activeOption.enableHighlight = !!option;
+      activeOption.enableSelect = !!option;
     }
     this.updateLayerConfig(activeOption);
     return this;
@@ -543,7 +552,14 @@ export default class BaseLayer<ChildLayerStyleOptions = {}> extends EventEmitter
           ? options.color
           : this.getLayerConfig().selectColor,
       });
-      this.interactionService.triggerSelect(id);
+      this.hooks.beforeSelect.callAsync(
+        encodePickingColor(id as number) as number[],
+        () => {
+          setTimeout(() => {
+            this.reRender();
+          }, 1);
+        },
+      );
     }
   }
   public setBlend(type: keyof typeof BlendType): void {

packages/layers/src/plugins/LayerStylePlugin.ts

@@ -15,19 +15,5 @@ export default class LayerStylePlugin implements ILayerPlugin {
         layer.fitBounds();
       }
     });
-
-    layer.hooks.beforeRender.tap('LayerStylePlugin', () => {
-      const {
-        highlightColor = 'red',
-        pickedFeatureID = -1,
-      } = layer.getLayerConfig();
-      layer.models.forEach((model) =>
-        model.addUniforms({
-          u_PickingStage: 2.0,
-          u_PickingColor: encodePickingColor(pickedFeatureID),
-          u_HighlightColor: rgb2arr(highlightColor as string),
-        }),
-      );
-    });
   }
 }

packages/layers/src/plugins/PixelPickingPlugin.ts

@@ -7,7 +7,11 @@ import {
   IRendererService,
   IStyleAttributeService,
 } from '@antv/l7-core';
-import { encodePickingColor, rgb2arr } from '@antv/l7-utils';
+import {
+  decodePickingColor,
+  encodePickingColor,
+  rgb2arr,
+} from '@antv/l7-utils';
 import { injectable } from 'inversify';
 
 const PickingStage = {
@@ -67,12 +71,11 @@ export default class PixelPickingPlugin implements ILayerPlugin {
 
     layer.hooks.afterPickingEncode.tap('PixelPickingPlugin', () => {
       const { enablePicking } = layer.getLayerConfig();
+      // 区分选中高亮 和滑过高亮
       if (enablePicking && layer.isVisible()) {
         layer.models.forEach((model) =>
           model.addUniforms({
-            u_PickingStage: PickingStage.NONE,
+            u_PickingStage: PickingStage.HIGHLIGHT,
-            u_PickingColor: [0, 0, 0],
-            u_HighlightColor: [0, 0, 0, 0],
           }),
         );
       }
@@ -86,6 +89,9 @@ export default class PixelPickingPlugin implements ILayerPlugin {
           typeof highlightColor === 'string'
             ? rgb2arr(highlightColor)
             : highlightColor || [1, 0, 0, 1];
+        layer.updateLayerConfig({
+          pickedFeatureID: decodePickingColor(new Uint8Array(pickedColor)),
+        });
         layer.models.forEach((model) =>
           model.addUniforms({
             u_PickingStage: PickingStage.HIGHLIGHT,
@@ -104,6 +110,9 @@ export default class PixelPickingPlugin implements ILayerPlugin {
           typeof selectColor === 'string'
             ? rgb2arr(selectColor)
             : selectColor || [1, 0, 0, 1];
+        layer.updateLayerConfig({
+          pickedFeatureID: decodePickingColor(new Uint8Array(pickedColor)),
+        });
         layer.models.forEach((model) =>
           model.addUniforms({
             u_PickingStage: PickingStage.HIGHLIGHT,

packages/renderer/src/regl/ReglModel.ts

@@ -103,7 +103,6 @@ export default class ReglModel implements IModel {
       ...this.uniforms,
       ...this.extractUniforms(options.uniforms || {}),
     };
-
     const reglDrawProps: {
       [key: string]:
         | regl.Framebuffer

stories/Components/components/Scale.tsx

@@ -1,5 +1,5 @@
 // @ts-ignore
-import { PolygonLayer, Scale, Scene, PointLayer } from '@antv/l7';
+import { PointLayer, PolygonLayer, Scale, Scene } from '@antv/l7';
 import { Mapbox } from '@antv/l7-maps';
 import * as React from 'react';
 
@@ -43,6 +43,7 @@ export default class ScaleComponent extends React.Component {
         '#CF1D49',
       ])
       .shape('fill')
+      // .select(true)
       .style({
         opacity: 1.0,
       });
@@ -58,14 +59,16 @@ export default class ScaleComponent extends React.Component {
       })
       .size('point_count', [5, 10, 15, 20, 25])
       .animate(false)
-      .active(true)
+      .select(true)
       .color('yellow')
       .style({
         opacity: 0.5,
         strokeWidth: 1,
       });
     scene.addLayer(pointLayer);
-
+    layer.on('click', (e) => {
+      layer.setSelect(e.featureId);
+    });
     const scaleControl = new Scale();
     scene.addControl(scaleControl);
   }

stories/Layers/components/Arcline.tsx

@@ -38,9 +38,12 @@ export default class ArcLineDemo extends React.Component {
       })
       .size(1)
       .shape('arc3d')
-      .active(true)
+      .select({
+        color: 'red',
+      })
       .color('rgb(13,64,140)')
       .animate({
+        enable: true,
         interval: 0.1,
         duration: 2,
         trailLength: 1.0,