diff --git a/packages/core/src/services/interaction/PickingService.ts b/packages/core/src/services/interaction/PickingService.ts index 9341fe4dce..146b6dd61b 100644 --- a/packages/core/src/services/interaction/PickingService.ts +++ b/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); } } diff --git a/packages/core/src/services/layer/ILayerService.ts b/packages/core/src/services/layer/ILayerService.ts index 78e5a8bbdf..f07fd20980 100644 --- a/packages/core/src/services/layer/ILayerService.ts +++ b/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; diff --git a/packages/core/src/services/layer/LayerService.ts b/packages/core/src/services/layer/LayerService.ts index 350270f9ac..568ea350e6 100644 --- a/packages/core/src/services/layer/LayerService.ts +++ b/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; diff --git a/packages/scene/src/index.ts b/packages/scene/src/index.ts index 74f27d2c75..2132802b6d 100644 --- a/packages/scene/src/index.ts +++ b/packages/scene/src/index.ts @@ -212,6 +212,10 @@ class Scene } } + public getPickedLayer() { + return this.layerService.pickedLayerId; + } + public getLayers(): ILayer[] { return this.layerService.getLayers(); } diff --git a/stories/Map/components/mapCenter.tsx b/stories/Map/components/mapCenter.tsx index 39261342d3..abd032cb76 100644 --- a/stories/Map/components/mapCenter.tsx +++ b/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'));