Shihuidev (#865)

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

* style: lint style

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()

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;

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;
   }

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() {