feat: map support update (#51)

* feat: marker,polyline 支持更新

* docs: 修改一些描述信息和配置

* chore: setting

* Update settings.json

* Create strange-turtles-allow.md

---------

Co-authored-by: 象数 <[email protected]>
Co-authored-by: lvisei <[email protected]>

.changeset/strange-turtles-allow.md

@@ -0,0 +1,5 @@
+---
+'@antv/gpt-vis': patch
+---
+
+feat: map support update

src/Map/Component/MapView.tsx

@@ -0,0 +1,20 @@
+import { useScene } from '@antv/larkmap';
+import { useEffect } from 'react';
+import type { Map } from '../../types/map';
+import { fitBounds, setMapStatus, setMapView } from '../../utils/map';
+
+// 更新地图视野
+export default (props: Map) => {
+  const scene = useScene();
+  useEffect(() => {
+    setMapView(props, scene);
+  }, []);
+  useEffect(() => {
+    setMapStatus(props, scene);
+  }, [props.enableRotate, props.enableScroll, props.enableZoom]);
+  useEffect(() => {
+    fitBounds(props, scene);
+  }, [props.includePoints, props.markers, props.polyline, props.includePadding]);
+
+  return null;
+};

src/Map/Component/Marker.tsx

@@ -0,0 +1,33 @@
+import type { ILayer } from '@antv/l7';
+import { useScene } from '@antv/larkmap';
+import { useEffect, useState } from 'react';
+import type { Map } from '../../types/map';
+import { setMapContext, setMarkers } from '../../utils/map';
+// 渲染标记点
+export default (props: Map) => {
+  const scene = useScene();
+  const [layers, setLayers] = useState<ILayer[]>([]);
+  const removeLayers = () => {
+    layers.forEach((item) => {
+      scene.removeLayer(item);
+    });
+  };
+  useEffect(() => {
+    if (!props.markers) return;
+    // 异步调用
+    setMapContext(props, scene)?.then(() => {
+      // 初始化资源
+      const markerLayer = setMarkers(props.markers || []);
+      removeLayers();
+      markerLayer.forEach((item) => {
+        scene.addLayer(item);
+      });
+      setLayers(markerLayer);
+    });
+    return () => {
+      removeLayers();
+    };
+  }, [props.markers]);
+
+  return null;
+};

src/Map/Component/Polyline.tsx

@@ -0,0 +1,30 @@
+import type { ILayer } from '@antv/l7';
+import { useScene } from '@antv/larkmap';
+import { useEffect, useState } from 'react';
+import type { Map } from '../../types/map';
+import { setPolyline } from '../../utils/map';
+// 渲染线图层
+export default (props: Map) => {
+  const scene = useScene();
+  const [layers, setLayers] = useState<ILayer[]>([]);
+  const removeLayers = () => {
+    layers.forEach((item) => {
+      scene.removeLayer(item);
+    });
+  };
+  useEffect(() => {
+    if (!props.polyline) return;
+    const lineLayers = setPolyline(props.polyline || []);
+    removeLayers();
+    lineLayers.forEach((item) => {
+      scene.addLayer(item);
+    });
+    setLayers(lineLayers);
+
+    return () => {
+      removeLayers();
+    };
+  }, [props.polyline]);
+
+  return null;
+};

src/Map/Component/index.tsx

@@ -0,0 +1,5 @@
+import MapView from './MapView';
+import Marker from './Marker';
+import Polyline from './Polyline';
+
+export { MapView, Marker, Polyline };

src/Map/index.tsx

@@ -1,37 +1,18 @@
-import type { ILayer, Scene } from '@antv/l7';
 import { LarkMap } from '@antv/larkmap';
-import React, { type FC } from 'react';
+import React, { useMemo, type FC } from 'react';
 import type { BaseMapProps } from '../types';
-import { formatMapStyle, setMapContext, setMapView, setMarkers, setPolyline } from '../utils/map';
+import { formatMapStyle } from '../utils/map';
+import { MapView, Marker, Polyline } from './Component/';
 
 export type MapProps = Omit<BaseMapProps<any>, 'data'>;
 
 const Map: FC<MapProps> = (props) => {
   const { className, containerStyle, children } = props;
-  const allLayers: ILayer[] = [];
-  const mapConfig = formatMapStyle(props);
-
-  const onSceneLoaded = async (scene: Scene) => {
-    // 初始地图视野
-    setMapView(props, scene);
-    // 初始化地图资源和状态
-    await setMapContext(props, scene);
-
-    // 添加线图层
-    if (props.polyline) {
-      const polylineLayer = setPolyline(props.polyline || []);
-      allLayers.push(...polylineLayer);
-    }
-
-    // 添加标记
-    if (props.markers) {
-      const markerLayer = setMarkers(props.markers || []);
-      allLayers.push(...markerLayer);
+  const mapConfig = useMemo(() => formatMapStyle(props), [props]);
+  const onSceneLoaded = async () => {
+    if (props.onInitComplete) {
+      props.onInitComplete();
     }
-
-    allLayers.forEach((item) => {
-      scene.addLayer(item);
-    });
   };
 
   return (
@@ -41,6 +22,13 @@ const Map: FC<MapProps> = (props) => {
       {...mapConfig}
       onSceneLoaded={onSceneLoaded}
     >
+      {/* 设置地图状态 */}
+      <MapView {...props} />
+      {/* 初始化图片，并加载 Marker */}
+      <Marker {...props} />
+      {/* 初始化线，并加载 Polyline */}
+      <Polyline {...props} />
+
       {children}
     </LarkMap>
   );

src/utils/map/context.ts

@@ -14,6 +14,9 @@ export function setMapContext(props: Map, scene: Scene) {
     return Promise.all(
       Array.from(icons.values()).map(async (url: string) => {
         const id = urlToMarkerId(url);
+        if (scene.hasImage(id)) {
+          return;
+        }
         return await scene.addImage(id, url);
       }),
     );

src/utils/map/view.ts

@@ -32,7 +32,11 @@ function fitIncludePoints(
 }
 
 export const setMapView = (props: Map, scene: Scene) => {
-  // 单个点,多个点
+  fitBounds(props, scene);
+  setMapStatus(props, scene);
+};
+
+export const fitBounds = (props: Map, scene: Scene) => {
   if (props.includePoints) {
     fitIncludePoints(props.includePoints, scene, props.includePadding);
   } else {
@@ -53,7 +57,9 @@ export const setMapView = (props: Map, scene: Scene) => {
       fitIncludePoints(points, scene, props.includePadding);
     }
   }
+};
 
+export const setMapStatus = (props: Map, scene: Scene) => {
   if (props.enableZoom !== undefined) {
     scene.setMapStatus({
       zoomEnable: props.enableZoom,
@@ -69,9 +75,4 @@ export const setMapView = (props: Map, scene: Scene) => {
       dragEnable: props.enableScroll,
     });
   }
-
-  if (props.onInitComplete) {
-    scene.off('loaded', props.onInitComplete);
-    scene.on('loaded', props.onInitComplete);
-  }
 };