From 7a64c313757f457d2ddf5643946c332a2d8e98de Mon Sep 17 00:00:00 2001
From: YiQianYao <42212176+2912401452@users.noreply.github.com>
Date: Mon, 6 Dec 2021 14:58:37 +0800
Subject: [PATCH] Shihuidev (#865)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* fix: 修复bug 图层触发的事件跟图层设置的zIndex无关，只跟插入图层先后顺序有关

* style: lint style
---
 .../services/interaction/PickingService.ts    |  2 +-
 .../core/src/services/layer/ILayerService.ts  |  1 +
 .../core/src/services/layer/LayerService.ts   |  4 ++
 stories/Map/components/mapCenter.tsx          | 51 ++++++++++++-------
 4 files changed, 38 insertions(+), 20 deletions(-)

diff --git a/packages/core/src/services/interaction/PickingService.ts b/packages/core/src/services/interaction/PickingService.ts
index 6533990d35..c8f01e727f 100644
--- a/packages/core/src/services/interaction/PickingService.ts
+++ b/packages/core/src/services/interaction/PickingService.ts
@@ -209,7 +209,7 @@ export default class PickingService implements IPickingService {
     this.resizePickingFBO();
 
     useFramebuffer(this.pickingFBO, () => {
-      const layers = this.layerService.getLayers();
+      const layers = this.layerService.getRenderList();
       layers
         .filter((layer) => layer.needPick(target.type))
         .reverse()
diff --git a/packages/core/src/services/layer/ILayerService.ts b/packages/core/src/services/layer/ILayerService.ts
index 6de1a8acde..43c1bdd40c 100644
--- a/packages/core/src/services/layer/ILayerService.ts
+++ b/packages/core/src/services/layer/ILayerService.ts
@@ -386,6 +386,7 @@ export interface ILayerService {
   startAnimate(): void;
   stopAnimate(): void;
   getLayers(): ILayer[];
+  getRenderList(): ILayer[];
   getLayer(id: string): ILayer | undefined;
   getLayerByName(name: string): ILayer | undefined;
   remove(layer: ILayer, parentLayer?: ILayer): void;
diff --git a/packages/core/src/services/layer/LayerService.ts b/packages/core/src/services/layer/LayerService.ts
index 25e108acaf..7fdf418bc4 100644
--- a/packages/core/src/services/layer/LayerService.ts
+++ b/packages/core/src/services/layer/LayerService.ts
@@ -55,6 +55,10 @@ export default class LayerService implements ILayerService {
     this.updateLayerRenderList();
   }
 
+  public getRenderList(): ILayer[] {
+    return this.layerList;
+  }
+
   public getLayers(): ILayer[] {
     return this.layers;
   }
diff --git a/stories/Map/components/mapCenter.tsx b/stories/Map/components/mapCenter.tsx
index 6f11ae9d37..01fb3d8b8a 100644
--- a/stories/Map/components/mapCenter.tsx
+++ b/stories/Map/components/mapCenter.tsx
@@ -1,5 +1,5 @@
 // @ts-ignore
-import { PointLayer, Scene } from '@antv/l7';
+import { PointLayer, Scene, LineLayer } from '@antv/l7';
 import { GaodeMap } from '@antv/l7-maps';
 import * as React from 'react';
 
@@ -28,7 +28,7 @@ export default class GaodeMapComponent extends React.Component {
     // min = 'min',
     // max = 'max',
     // none = 'none',
-    const layer = new PointLayer({ blend: 'additive' })
+    const layer = new PointLayer({ zIndex: 2 })
       .source(
         [
           {
@@ -39,14 +39,6 @@ export default class GaodeMapComponent extends React.Component {
             lng: 121.107,
             lat: 30.267069,
           },
-          {
-            lng: 120.107846,
-            lat: 30.267069,
-          },
-          {
-            lng: 38.54,
-            lat: 77.02,
-          },
         ],
         {
           parser: {
@@ -65,17 +57,38 @@ export default class GaodeMapComponent extends React.Component {
         storkeWidth: 2,
         // offsets: [100, 100],
       });
-    layer.on('click', () => console.log('click'));
-    scene.addLayer(layer);
-    scene.render();
+
     this.scene = scene;
 
-    // setTimeout(() => {
-    //   // console.log(this.scene.panBy(10, 10));
-    //   console.log('===')
-    //   // layer.emit('remove', null)
-    //   scene.removeLayer(layer)
-    // }, 1000);
+    const linelayer = new LineLayer({})
+      .source({
+        type: 'FeatureCollection',
+        features: [
+          {
+            type: 'Feature',
+            properties: {},
+            geometry: {
+              type: 'MultiLineString',
+              coordinates: [
+                [
+                  [121.107846, 30.267069],
+                  [121.107, 30.267069],
+                ],
+              ],
+            },
+          },
+        ],
+      })
+      .shape('line')
+      .color('#0ff')
+      .size(10);
+
+    scene.on('loaded', () => {
+      scene.addLayer(linelayer);
+      scene.addLayer(layer);
+    });
+    layer.on('click', () => console.log('point click'));
+    linelayer.on('click', () => console.log('line click'));
   }
 
   public render() {