fix: 修复 marker-layer removeMarker 不生效的问题

dev-demos/component/marker/markerLayer.md

@@ -0,0 +1,6 @@
+---
+title: MarkerLayer
+order: 1
+---
+
+<code src="./markerLayer.tsx" compact defaultShowCode></code>

dev-demos/component/marker/markerLayer.tsx

@@ -0,0 +1,102 @@
+import { GaodeMap, Marker, MarkerLayer, Scene } from '@antv/l7';
+import { randomPoint } from '@turf/turf';
+import { mean } from 'lodash-es';
+import React, { useEffect, useState } from 'react';
+
+export default () => {
+  const [scene, setScene] = useState<Scene | undefined>(undefined);
+  const [markerLayer, setMarkerLayer] = useState<MarkerLayer | undefined>(
+    undefined,
+  );
+
+  useEffect(() => {
+    const scene = new Scene({
+      id: 'map',
+      map: new GaodeMap({
+        center: [121.438579, 31.246384],
+        pitch: 0,
+        zoom: 10,
+        style: 'normal',
+      }),
+    });
+    setScene(scene);
+
+    scene.on('loaded', () => {
+      const markerLayer = new MarkerLayer({
+        cluster: true,
+        clusterOption: {
+          element: (cars) => {
+            const rotation =
+              cars.properties.rotation ||
+              mean(
+                cars.properties.clusterData?.map(
+                  (item) => item.properties.rotation,
+                ),
+              ) ||
+              0;
+            const el = document.createElement('div');
+            el.className = `markerDivClass`;
+            el.innerHTML = `<div>
+              <img 
+                style="width: 20px; height:30px; transform: rotate(${rotation}deg);" 
+                src="https://mdn.alipayobjects.com/huamei_k6sfo0/afts/img/A*lFnGQae3LtkAAAAAAAAAAAAADjWqAQ/original"
+              />
+            </div>`;
+            return el;
+          },
+          // 触发聚合的范围
+          radius: 40,
+        },
+      });
+      const bounds = scene.getBounds();
+
+      randomPoint(100, {
+        bbox: [bounds[0][0], bounds[0][1], bounds[1][0], bounds[1][1]],
+      }).features.forEach((point) => {
+        const coordinates = point.geometry.coordinates;
+        const marker = new Marker({}).setLnglat({
+          lng: coordinates[0],
+          lat: coordinates[1],
+        });
+        marker.setExtData({
+          rotation: Math.round(Math.random() * 360),
+        });
+        markerLayer.addMarker(marker);
+      });
+      scene.addMarkerLayer(markerLayer);
+      setMarkerLayer(markerLayer);
+    });
+  }, []);
+
+  const onAddMarker = () => {
+    const bounds = scene?.getBounds();
+    if (bounds && markerLayer && scene) {
+      const point = randomPoint(1, {
+        bbox: [bounds[0][0], bounds[0][1], bounds[1][0], bounds[1][1]],
+      });
+      const coordinates = point.features[0].geometry.coordinates;
+      const marker = new Marker({}).setLnglat({
+        lng: coordinates[0],
+        lat: coordinates[1],
+      });
+      markerLayer.addMarker(marker);
+    }
+  };
+
+  const onRemoveMarker = () => {
+    const markers = markerLayer?.getOriginMarkers();
+    markerLayer?.removeMarker(markers[markers.length - 1]);
+  };
+
+  return (
+    <div>
+      <button type="button" onClick={onAddMarker}>
+        车辆+1
+      </button>
+      <button type="button" onClick={onRemoveMarker}>
+        车辆-1
+      </button>
+      <div id={'map'} style={{ height: 400, position: 'relative' }} />
+    </div>
+  );
+};

packages/component/package.json

@@ -44,4 +44,4 @@
   "publishConfig": {
     "access": "public"
   }
-}
+}

packages/component/src/marker-layer.ts

@@ -5,13 +5,13 @@ import {
   TYPES,
 } from '@antv/l7-core';
 import {
-  bindAll,
-  boundsContains,
   DOM,
   IBounds,
+  Satistics,
+  bindAll,
+  boundsContains,
   lodashUtil,
   padBounds,
-  Satistics,
 } from '@antv/l7-utils';
 import { EventEmitter } from 'eventemitter3';
 import { Container } from 'inversify';
@@ -117,16 +117,19 @@ export default class MarkerLayer extends EventEmitter {
       }
     }
     this.markers.push(marker);
-    // if(this.inited) {
-    //   marker.addTo(this.scene);
-    // }
   }
 
   public removeMarker(marker: IMarker) {
     this.markers.indexOf(marker);
     const markerIndex = this.markers.indexOf(marker);
     if (markerIndex > -1) {
       this.markers.splice(markerIndex, 1);
+      if (this.markerLayerOption.cluster) {
+        this.removePoint(markerIndex);
+        if (this.mapsService) {
+          this.getClusterMarker(this.bbox, this.zoom);
+        }
+      }
     }
   }
 
@@ -162,6 +165,10 @@ export default class MarkerLayer extends EventEmitter {
     return cluster ? this.clusterMarkers : this.markers;
   }
 
+  public getOriginMarkers() {
+    return this.markers;
+  }
+
   // 批量添加marker到scene
   public addMarkers() {
     this.getMarkers().forEach((marker: IMarker) => {
@@ -212,6 +219,19 @@ export default class MarkerLayer extends EventEmitter {
     }
   }
 
+  private removePoint(id: number) {
+    const targetIndex = this.points.findIndex(
+      (point) => point.properties.marker_id === id,
+    );
+    if (targetIndex > -1) {
+      this.points.splice(targetIndex, 1);
+    }
+    if (this.clusterIndex) {
+      // 在删除点的时候需要更新 cluster 的数据
+      this.clusterIndex.load(this.points as any[]);
+    }
+  }
+
   private initCluster() {
     if (!this.markerLayerOption.cluster) {
       return;
@@ -303,7 +323,6 @@ export default class MarkerLayer extends EventEmitter {
 
     const zoom = this.mapsService.getZoom();
     const bbox = this.mapsService.getBounds();
-
     if (
       !this.bbox ||
       Math.abs(zoom - this.zoom) >= 1 ||