feat: 第一次点击高亮再次点击取消高亮

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

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;

packages/layers/src/core/BaseLayer.ts

@@ -66,7 +66,8 @@ export default class BaseLayer<ChildLayerStyleOptions = {}> 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<ChildLayerStyleOptions = {}> 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<ChildLayerStyleOptions = {}> 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;
     }
 

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

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',
     });