Shihuidev (#872)

fix: 修复图层叠加模式下的拾取失效问题
 style: lint style

packages/core/src/services/interaction/PickingService.ts

@@ -221,7 +221,7 @@ export default class PickingService implements IPickingService {
             depth: 1,
           });
           layer.hooks.beforePickingEncode.call();
-          layer.renderModels();
+          layer.renderModels(true);
           layer.hooks.afterPickingEncode.call();
           const isPicked = this.pickFromPickingFBO(layer, target);
           return isPicked && !layer.getLayerConfig().enablePropagation;

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

@@ -147,7 +147,7 @@ export interface ILayer {
   setCurrentSelectedId(id: number | null): void;
   getCurrentSelectedId(): number | null;
   prepareBuildModel(): void;
-  renderModels(): void;
+  renderModels(isPicking?: boolean): void;
   buildModels(): void;
   rebuildModels(): void;
   buildLayerModel(

packages/core/src/services/renderer/IModel.ts

@@ -244,6 +244,6 @@ export interface IModelDrawOptions {
  */
 export interface IModel {
   addUniforms(uniforms: { [key: string]: IUniform }): void;
-  draw(options: IModelDrawOptions): void;
+  draw(options: IModelDrawOptions, pick?: boolean): void;
   destroy(): void;
 }

packages/layers/src/core/BaseLayer.ts

@@ -963,7 +963,7 @@ export default class BaseLayer<ChildLayerStyleOptions = {}> extends EventEmitter
     throw new Error('Method not implemented.');
   }
 
-  public renderModels() {
+  public renderModels(isPicking?: boolean) {
     // TODO: this.getEncodedData().length > 0 这个判断是为了解决在 2.5.x 引入数据纹理后产生的 空数据渲染导致 texture 超出上限问题
     if (this.getEncodedData().length > 0) {
       if (this.layerModelNeedUpdate && this.layerModel) {
@@ -972,9 +972,12 @@ export default class BaseLayer<ChildLayerStyleOptions = {}> extends EventEmitter
         this.layerModelNeedUpdate = false;
       }
       this.models.forEach((model) => {
-        model.draw({
+        model.draw(
-          uniforms: this.layerModel.getUninforms(),
+          {
-        });
+            uniforms: this.layerModel.getUninforms(),
+          },
+          isPicking,
+        );
       });
     }
     return this;

packages/renderer/src/regl/ReglModel.ts

@@ -7,7 +7,7 @@ import {
   IUniform,
 } from '@antv/l7-core';
 import regl from 'l7regl';
-import { isPlainObject, isTypedArray } from 'lodash';
+import { cloneDeep, isPlainObject, isTypedArray } from 'lodash';
 import {
   blendEquationMap,
   blendFuncMap,
@@ -29,6 +29,7 @@ export default class ReglModel implements IModel {
   private reGl: regl.Regl;
   private destroyed: boolean = false;
   private drawCommand: regl.DrawCommand;
+  private drawPickCommand: regl.DrawCommand;
   private drawParams: regl.DrawConfig;
   private options: IModelInitializationOptions;
   private uniforms: {
@@ -93,6 +94,18 @@ export default class ReglModel implements IModel {
     this.initCullDrawParams({ cull }, drawParams);
 
     this.drawCommand = reGl(drawParams);
+
+    const pickDrawParams = cloneDeep(drawParams);
+    // @ts-ignore
+    pickDrawParams.blend.enable = true;
+    // @ts-ignore
+    pickDrawParams.blend.func = {
+      dstAlpha: 'one',
+      dstRGB: 'one minus src alpha',
+      srcAlpha: 'one',
+      srcRGB: 'src alpha',
+    };
+    this.drawPickCommand = reGl(pickDrawParams);
     this.drawParams = drawParams;
   }
 
@@ -103,7 +116,8 @@ export default class ReglModel implements IModel {
     };
   }
 
-  public draw(options: IModelDrawOptions) {
+  public draw(options: IModelDrawOptions, pick?: boolean) {
+    // console.log('options', this.drawParams)
     if (
       this.drawParams.attributes &&
       Object.keys(this.drawParams.attributes).length === 0
@@ -143,7 +157,14 @@ export default class ReglModel implements IModel {
           | ReglTexture2D).get();
       }
     });
-    this.drawCommand(reglDrawProps);
+    // TODO: 在进行拾取操作的绘制中，不应该使用叠加模式 - picking 根据拾取的颜色作为判断的输入，而叠加模式会产生新的，在 id 序列中不存在的颜色
+    if (!pick) {
+      this.drawCommand(reglDrawProps);
+    } else {
+      this.drawPickCommand(reglDrawProps);
+    }
+    // this.drawCommand(reglDrawProps);
+    // this.drawPickCommand(reglDrawProps);
   }
 
   public destroy() {

stories/Map/components/mapCenter.tsx

@@ -28,7 +28,7 @@ export default class GaodeMapComponent extends React.Component {
     // min = 'min',
     // max = 'max',
     // none = 'none',
-    const layer = new PointLayer({ zIndex: 2, blend: 'additive' })
+    const layer = new PointLayer({ zIndex: 2, blend: 'additive' }) //
       .source(
         [
           {