fix: 修复 useLayer 动态加载图层情况

package.json

@@ -32,8 +32,9 @@
     "version": "node scripts/sync-version"
   },
   "dependencies": {
+    "@antv/event-emitter": "^0.1.3",
     "@antv/l7-composite-layers": "^0.1.0-alpha.0",
-    "@antv/l7-draw": "^3.0.4",
+    "@antv/l7-draw": "^3.0.6",
     "@types/geojson": "^7946.0.8",
     "ahooks": "^3.3.13",
     "classnames": "^2.3.1",

src/components/LarkMap/hooks/use-layer/demos/default.tsx

@@ -30,7 +30,7 @@ const MyComponent = () => {
 
   useEffect(() => {
     myBubbleLayer?.fitBounds();
-  }, []);
+  }, [myBubbleLayer]);
 
   return null;
 };

src/components/LarkMap/hooks/use-layer/index.ts

@@ -1,9 +1,38 @@
+import { useEffect, useState } from 'react';
 import type { Layer } from '../../../../utils';
 import { useLayerManager } from '../use-layer-manager';
 
-export const useLayer = <T extends Layer = Layer>(id: string): T => {
+export const useLayer = <T extends Layer = Layer>(id: string): T | undefined => {
   const layerManager = useLayerManager();
-  const layer = layerManager.getLayer(id);
+  const [layer, setLayer] = useState<T | undefined>(layerManager.getLayer(id) as T);
 
-  return layer as T;
+  useEffect(() => {
+    const onLayerAdd = (_layer: T) => {
+      if (id === _layer.id) {
+        setLayer(_layer);
+      }
+    };
+    const onLayerRemove = (layerId: string) => {
+      if (id === layerId) {
+        setLayer(undefined);
+      }
+    };
+    const _layer = layerManager.getLayer(id);
+
+    if (_layer) {
+      setLayer(_layer as T);
+    } else {
+      layerManager.on('add', onLayerAdd);
+      layerManager.on('remove', onLayerRemove);
+    }
+
+    return () => {
+      if (_layer === undefined) {
+        layerManager.off('add', onLayerAdd);
+        layerManager.off('remove', onLayerRemove);
+      }
+    };
+  }, [id]);
+
+  return layer;
 };

src/utils/layer-manager.ts

@@ -1,3 +1,4 @@
+import EventEmitter from '@antv/event-emitter';
 import type { ICompositeLayer, ICoreLayer, Scene } from '@antv/l7-composite-layers';
 
 export type LayerManagerOptions = {
@@ -10,7 +11,7 @@ let layerCounter = 0;
 /**
  * 图层管理器
  */
-export class LayerManager {
+export class LayerManager extends EventEmitter {
   /**
    * 地图容器
    */
@@ -25,6 +26,7 @@ export class LayerManager {
   private layerMap = new Map<string, Layer>();
 
   constructor(options: LayerManagerOptions) {
+    super();
     this.scene = options.scene;
     this.options = options;
   }
@@ -45,6 +47,7 @@ export class LayerManager {
     this.layerMap.set(layerId, layer);
 
     layer.addTo(this.scene);
+    this.emit('add', layer);
   }
 
   /**
@@ -68,6 +71,7 @@ export class LayerManager {
     this.layerMap.delete(layerId);
 
     findLayer.remove();
+    this.emit('remove', layerId);
 
     return true;
   }