fix: 修复拾取状态残留导致的拾取高亮错误 (#1105)

* fix: clear last pick state before pick

* style: lint style

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

@@ -48,6 +48,9 @@ export default class PickingService implements IPickingService {
 
   private lastPickTime: number = new Date().getTime();
 
+  // Tip: 记录当前拾取中的 layers
+  private pickedLayers: ILayer[] = [];
+
   public init(id: string) {
     const {
       createTexture2D,
@@ -274,6 +277,12 @@ export default class PickingService implements IPickingService {
 
           layer.renderModels(true);
           layer.hooks.afterPickingEncode.call();
+
+          // Tip: clear last picked layer state
+          this.pickedLayers.map((pickedlayer) => {
+            this.selectFeature(pickedlayer, new Uint8Array([0, 0, 0, 0]));
+          });
+
           const isPicked = this.pickFromPickingFBO(layer, target);
           this.layerService.pickedLayerId = isPicked ? +layer.id : -1;
 
@@ -355,6 +364,7 @@ export default class PickingService implements IPickingService {
         // trigger onHover/Click callback on layer
         isPicked = true;
         layer.setCurrentPickId(pickedFeatureIdx);
+        this.pickedLayers = [layer];
         this.triggerHoverOnLayer(layer, layerTarget); // 触发拾取事件
       }
     } else {
@@ -377,6 +387,7 @@ export default class PickingService implements IPickingService {
       });
       this.triggerHoverOnLayer(layer, layerTarget);
       layer.setCurrentPickId(null);
+      this.pickedLayers = [];
     }
 
     if (enableHighlight) {

stories/Map/components/amap2demo_polygon.tsx

@@ -13,7 +13,7 @@ export default class Amap2demo_polygon extends React.Component {
   public async componentDidMount() {
     const scene = new Scene({
       id: 'map',
-      map: new GaodeMapV2({
+      map: new GaodeMap({
         pitch: 40,
         center: [120, 30],
         zoom: 13,
@@ -44,33 +44,59 @@ export default class Amap2demo_polygon extends React.Component {
       ],
     };
 
+    const data2 = {
+      type: 'FeatureCollection',
+      features: [
+        {
+          type: 'Feature',
+          properties: {
+            testOpacity: 0.8,
+          },
+          geometry: {
+            type: 'Polygon',
+            coordinates: [
+              [
+                [113.8623046875 + 1, 30.031055426540206],
+                [116.3232421875 + 1, 30.031055426540206],
+                [116.3232421875 + 1, 31.090574094954192],
+                [113.8623046875 + 1, 31.090574094954192],
+                [113.8623046875 + 1, 30.031055426540206],
+              ],
+            ],
+          },
+        },
+      ],
+    };
+
     const layer = new PolygonLayer({
       autoFit: true,
     })
       .source(data)
       .shape('fill')
       .color('red')
+      .active(true)
       .style({
-        opacityLinear: {
-          enable: true,
-          dir: 'in',
-        },
+        // opacityLinear: {
+        //   enable: true,
+        //   dir: 'in',
+        // },
       });
     scene.addLayer(layer);
 
     const layer2 = new PolygonLayer({
       autoFit: true,
     })
-      .source(data)
+      .source(data2)
       .shape('fill')
-      .color('red')
+      .color('#ff0')
+      .active(true)
       .style({
-        opacity: 0.4,
+        // opacity: 0.4,
         // opacityLinear: {
         //   enable: true,
         //   dir: 'out',
         // },
-        raisingHeight: 50000,
+        // raisingHeight: 50000,
       });
     scene.addLayer(layer2);
   }