From 7e87baa1969b68af20dc971cd939087aaa330bc0 Mon Sep 17 00:00:00 2001 From: 2912401452 <2912401452@qq.com> Date: Wed, 20 Apr 2022 15:14:22 +0800 Subject: [PATCH 1/2] =?UTF-8?q?feat:=20scene=20=E6=96=B0=E5=A2=9E=E8=8E=B7?= =?UTF-8?q?=E5=8F=96=E6=8B=BE=E5=8F=96=E9=80=89=E4=B8=AD=E7=9A=84=20layer?= =?UTF-8?q?=20id?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../services/interaction/PickingService.ts | 3 +- .../core/src/services/layer/ILayerService.ts | 1 + .../core/src/services/layer/LayerService.ts | 2 ++ packages/scene/src/index.ts | 4 +++ stories/Map/components/mapCenter.tsx | 36 +++++++++++++++++-- 5 files changed, 43 insertions(+), 3 deletions(-) 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..5799a48ac7 100644 --- a/stories/Map/components/mapCenter.tsx +++ b/stories/Map/components/mapCenter.tsx @@ -53,6 +53,28 @@ 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 +97,7 @@ export default class GaodeMapComponent extends React.Component { }, }, ) + // - cylinder // - triangleColumn // - hexagonColumn @@ -97,6 +120,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 +133,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 +171,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')); From 1b87d5962fad6586a017c9832c33e5f9a4b93bc4 Mon Sep 17 00:00:00 2001 From: 2912401452 <2912401452@qq.com> Date: Wed, 20 Apr 2022 15:17:47 +0800 Subject: [PATCH 2/2] style: lint style --- stories/Map/components/mapCenter.tsx | 42 +++++++++++++++------------- 1 file changed, 22 insertions(+), 20 deletions(-) diff --git a/stories/Map/components/mapCenter.tsx b/stories/Map/components/mapCenter.tsx index 5799a48ac7..abd032cb76 100644 --- a/stories/Map/components/mapCenter.tsx +++ b/stories/Map/components/mapCenter.tsx @@ -53,27 +53,29 @@ 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', + 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) + .size(30); - // layer0.on('mouseout', () => {}) - // layer0.on('mousemove', () => {}) - layer0.on('click', () => {}) + // layer0.on('mouseout', () => {}) + // layer0.on('mousemove', () => {}) + layer0.on('click', () => {}); let layer = new PointLayer({}) // blend: 'additive' .source( @@ -97,7 +99,7 @@ export default class GaodeMapComponent extends React.Component { }, }, ) - + // - cylinder // - triangleColumn // - hexagonColumn @@ -175,8 +177,8 @@ export default class GaodeMapComponent extends React.Component { scene.addLayer(layer); scene.on('click', (e) => { - console.log(scene.getPickedLayer()) - }) + console.log(scene.getPickedLayer()); + }); // let scale = layer.getScale('size'); // console.log('scale n2', scale('n2')); // console.log('scale n3', scale('n3'));