fix: 事件交互机制 setselect setActive方法

README.zh-CN.md

@@ -2,7 +2,6 @@
 
 [![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)

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,
-        height: 1,
+        width,
+        height,
         wrapS: gl.CLAMP_TO_EDGE,
         wrapT: gl.CLAMP_TO_EDGE,
       }),

packages/layers/src/core/BaseLayer.ts

@@ -226,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, {});
 
     // 全局容器服务
@@ -506,7 +507,14 @@ 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);
+        },
+      );
     }
   }
 
@@ -544,11 +552,14 @@ export default class BaseLayer<ChildLayerStyleOptions = {}> extends EventEmitter
           ? options.color
           : this.getLayerConfig().selectColor,
       });
-      this.hooks.beforeHighlight.call(
+      this.hooks.beforeSelect.callAsync(
         encodePickingColor(id as number) as number[],
+        () => {
+          setTimeout(() => {
+            this.reRender();
+          }, 1);
+        },
       );
-      // this.interactionService.triggerSelect(id);
-      // this.reRender();
     }
   }
   public setBlend(type: keyof typeof BlendType): void {

packages/layers/src/plugins/PixelPickingPlugin.ts

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

stories/Components/components/Scale.tsx

@@ -43,7 +43,7 @@ export default class ScaleComponent extends React.Component {
         '#CF1D49',
       ])
       .shape('fill')
-      .select(true)
+      // .select(true)
       .style({
         opacity: 1.0,
       });
@@ -58,7 +58,7 @@ export default class ScaleComponent extends React.Component {
         type: 'quantile',
       })
       .size('point_count', [5, 10, 15, 20, 25])
-      .animate(true)
+      .animate(false)
       .select(true)
       .color('yellow')
       .style({
@@ -66,11 +66,9 @@ export default class ScaleComponent extends React.Component {
         strokeWidth: 1,
       });
     scene.addLayer(pointLayer);
-    pointLayer.on('click', (e) => {
-      // console.log(e);
-      // pointLayer.setSelect(e.featureId);
+    layer.on('click', (e) => {
+      layer.setSelect(e.featureId);
     });
-
     const scaleControl = new Scale();
     scene.addControl(scaleControl);
   }