From 6e8e978a8b4cc8667661e2e7b8029cb18f63c933 Mon Sep 17 00:00:00 2001 From: thinkinggis Date: Sun, 29 Mar 2020 00:33:38 +0800 Subject: [PATCH] =?UTF-8?q?feat:=20=E7=AC=AC=E4=B8=80=E6=AC=A1=E7=82=B9?= =?UTF-8?q?=E5=87=BB=E9=AB=98=E4=BA=AE=E5=86=8D=E6=AC=A1=E7=82=B9=E5=87=BB?= =?UTF-8?q?=E5=8F=96=E6=B6=88=E9=AB=98=E4=BA=AE?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../src/services/interaction/PickingService.ts | 17 +++++++++++++++-- .../core/src/services/layer/ILayerService.ts | 4 +++- packages/layers/src/core/BaseLayer.ts | 18 ++++++++++++++++-- stories/Components/components/Marker.tsx | 4 +++- stories/Components/components/Scale.tsx | 11 +++++------ 5 files changed, 42 insertions(+), 12 deletions(-) diff --git a/packages/core/src/services/interaction/PickingService.ts b/packages/core/src/services/interaction/PickingService.ts index 049c2cfcd9..afa283850a 100644 --- a/packages/core/src/services/interaction/PickingService.ts +++ b/packages/core/src/services/interaction/PickingService.ts @@ -168,7 +168,10 @@ export default class PickingService implements IPickingService { x, y, lngLat, - type: layer.getCurrentPickId() === null ? 'un' + type : 'mouseout', + type: + layer.getCurrentPickId() !== null && type === 'mousemove' + ? 'mouseout' + : 'un' + type, featureId: null, feature: null, }; @@ -188,7 +191,17 @@ export default class PickingService implements IPickingService { type === 'click' && pickedColors?.toString() !== [0, 0, 0, 0].toString() ) { - this.selectFeature(layer, pickedColors); // toggle select + const selectedId = decodePickingColor(pickedColors); + if ( + layer.getCurrentSelectedId() === null || + selectedId !== layer.getCurrentSelectedId() + ) { + this.selectFeature(layer, pickedColors); + layer.setCurrentSelectedId(selectedId); + } else { + this.selectFeature(layer, new Uint8Array([0, 0, 0, 0])); // toggle select + layer.setCurrentSelectedId(null); + } } return isPicked; }; diff --git a/packages/core/src/services/layer/ILayerService.ts b/packages/core/src/services/layer/ILayerService.ts index 4e6270e447..21b23ff79b 100644 --- a/packages/core/src/services/layer/ILayerService.ts +++ b/packages/core/src/services/layer/ILayerService.ts @@ -84,7 +84,7 @@ export interface ILayer { layerModelNeedUpdate: boolean; layerModel: ILayerModel; dataState: IDataState; // 数据流状态 - pickedFeatureID: number; + pickedFeatureID: number | null; hooks: { init: SyncBailHook; afterInit: SyncBailHook; @@ -112,6 +112,8 @@ export interface ILayer { setContainer(container: Container): void; setCurrentPickId(id: number | null): void; getCurrentPickId(): number | null; + setCurrentSelectedId(id: number | null): void; + getCurrentSelectedId(): number | null; prepareBuildModel(): void; renderModels(): void; buildModels(): void; diff --git a/packages/layers/src/core/BaseLayer.ts b/packages/layers/src/core/BaseLayer.ts index ec5eee969e..7c77738673 100644 --- a/packages/layers/src/core/BaseLayer.ts +++ b/packages/layers/src/core/BaseLayer.ts @@ -66,7 +66,8 @@ export default class BaseLayer extends EventEmitter public maxZoom: number; public inited: boolean = false; public layerModelNeedUpdate: boolean = false; - public pickedFeatureID: number = -1; + public pickedFeatureID: number | null = null; + public selectedFeatureID: number | null = null; public dataState: IDataState = { dataSourceNeedUpdate: false, @@ -612,6 +613,14 @@ export default class BaseLayer extends EventEmitter public getCurrentPickId(): number | null { return this.currentPickId; } + + public setCurrentSelectedId(id: number) { + this.selectedFeatureID = id; + } + + public getCurrentSelectedId(): number | null { + return this.selectedFeatureID; + } public isVisible(): boolean { const zoom = this.mapService.getZoom(); const { @@ -844,7 +853,12 @@ export default class BaseLayer extends EventEmitter if ((type === 'click' || type === 'dblclick') && enableSelect) { isPick = true; } - if (type === 'mousemove' && enableHighlight) { + if ( + type === 'mousemove' && + (enableHighlight || + this.eventNames().indexOf('mouseenter') !== -1 || + this.eventNames().indexOf('mouseout') !== -1) + ) { isPick = true; } diff --git a/stories/Components/components/Marker.tsx b/stories/Components/components/Marker.tsx index 5343266a94..b77c21e306 100644 --- a/stories/Components/components/Marker.tsx +++ b/stories/Components/components/Marker.tsx @@ -24,7 +24,7 @@ export default class MarkerComponent extends React.Component { zoom: 18, }), }); - this.scene = scene; + const popup = new Popup({ offsets: [0, 20], @@ -72,6 +72,7 @@ export default class MarkerComponent extends React.Component { scene.addLayer(pointLayer); scene.addMarker(marker); + scene.on('loaded', () => { // @ts-ignore marker.on('click', (e) => { @@ -90,6 +91,7 @@ export default class MarkerComponent extends React.Component { // console.log(this.scene.getZoom()); // console.log('选中的点', 1111); // }); + this.scene = scene; }); } diff --git a/stories/Components/components/Scale.tsx b/stories/Components/components/Scale.tsx index 3c2dae8dde..9251c1272e 100644 --- a/stories/Components/components/Scale.tsx +++ b/stories/Components/components/Scale.tsx @@ -46,7 +46,7 @@ export default class ScaleComponent extends React.Component { '#CF1D49', ]) .shape('fill') - // .select(true) + .select(true) .style({ opacity: 1.0, }); @@ -73,11 +73,13 @@ export default class ScaleComponent extends React.Component { scene.addLayer(pointLayer); layer.on('click', (e) => { console.log(1, e); - layer.setSelect(e.featureId); + // layer.setSelect(e.featureId); }); pointLayer.on('click', (e) => { console.log(2, e); - pointLayer.setSelect(e.featureId); + }); + pointLayer.on('mouseout', (e) => { + console.log(2, e); }); const scaleControl = new Scale(); const layers = { @@ -91,9 +93,6 @@ export default class ScaleComponent extends React.Component { scene.addControl(scaleControl); scene.addControl(layerControl); - scene.on('zoomchange', () => { - console.log(scene.getCenter(), scene.getZoom()); - }); const zoomControl = new Zoom({ position: 'bottomright', });