feat: 给场景新增 getPickedLayerId 方法 (#1066)

* feat: scene 新增获取拾取选中的 layer id

* style: lint style

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

@@ -275,6 +275,8 @@ export default class PickingService implements IPickingService {
           layer.renderModels(true);
           layer.hooks.afterPickingEncode.call();
           const isPicked = this.pickFromPickingFBO(layer, target);
+          this.layerService.pickedLayerId = isPicked ? +layer.id : -1;
+
           return isPicked && !layer.getLayerConfig().enablePropagation;
         });
     });
@@ -415,7 +417,6 @@ export default class PickingService implements IPickingService {
     if (isEventCrash(target)) {
       // Tip: 允许用户动态设置鼠标光标
       this.handleCursor(layer, target.type);
-
       layer.emit(target.type, target);
     }
   }

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

@@ -433,6 +433,7 @@ export interface ILayerConfig {
  * 提供 Layer 管理服务
  */
 export interface ILayerService {
+  pickedLayerId: number;
   clock: Clock;
   alreadyInRendering: boolean;
   sceneService?: any;

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

@@ -11,6 +11,8 @@ import { ILayerModel, ILayerService } from './ILayerService';
 
 @injectable()
 export default class LayerService implements ILayerService {
+  // pickedLayerId 参数用于指定当前存在被选中的 layer
+  public pickedLayerId: number = -1;
   public clock = new Clock();
 
   public alreadyInRendering: boolean = false;

packages/scene/src/index.ts

@@ -212,6 +212,10 @@ class Scene
     }
   }
 
+  public getPickedLayer() {
+    return this.layerService.pickedLayerId;
+  }
+
   public getLayers(): ILayer[] {
     return this.layerService.getLayers();
   }

stories/Map/components/mapCenter.tsx

@@ -53,6 +53,30 @@ export default class GaodeMapComponent extends React.Component {
     //   .size(2)
     //   .color('#000');
 
+    let layer0 = new PointLayer({ zIndex: 2 })
+      .source(
+        [
+          {
+            lng: 120.11,
+            lat: 30.27,
+          },
+        ],
+        {
+          parser: {
+            type: 'json',
+            x: 'lng',
+            y: 'lat',
+          },
+        },
+      )
+      .color('#ff0')
+      .shape('circle')
+      .size(30);
+
+    // layer0.on('mouseout', () => {})
+    // layer0.on('mousemove', () => {})
+    layer0.on('click', () => {});
+
     let layer = new PointLayer({}) // blend: 'additive'
       .source(
         [
@@ -75,6 +99,7 @@ export default class GaodeMapComponent extends React.Component {
           },
         },
       )
+
       // - cylinder
       // - triangleColumn
       // - hexagonColumn
@@ -97,6 +122,11 @@ export default class GaodeMapComponent extends React.Component {
       // })
       // .animate(true)
       .active(true)
+      // .active({
+      //   color: '#f00',
+      //   mix: 0
+      // })
+      .select(true)
       // .active({ color: '#ff0' })
       .style({
         // heightfixed: true,
@@ -105,8 +135,8 @@ export default class GaodeMapComponent extends React.Component {
         // lightEnable: true,
         // blur: 0.2,
         // opacity: 0.3,
-        // stroke: '#f00',
-        // strokeWidth: 10,
+        stroke: '#ff0',
+        strokeWidth: 10,
         // strokeWidth: 0,
         // strokeOpacity: 1,
         // unit: 'meter',
@@ -143,8 +173,12 @@ export default class GaodeMapComponent extends React.Component {
     // );
 
     scene.on('loaded', () => {
+      scene.addLayer(layer0);
       scene.addLayer(layer);
 
+      scene.on('click', (e) => {
+        console.log(scene.getPickedLayer());
+      });
       // let scale = layer.getScale('size');
       // console.log('scale n2', scale('n2'));
       // console.log('scale n3', scale('n3'));