fix(MarkerCluster): 修复点击聚合点异常

pansyjs · Jan 19, 2024 · e3ee3da · e3ee3da
1 parent c5a0d71
commit e3ee3da
Show file tree

Hide file tree

Showing 2 changed files with 13 additions and 13 deletions.
diff --git a/src/components/MarkerCluster/MarkerCluster.tsx b/src/components/MarkerCluster/MarkerCluster.tsx
@@ -12,7 +12,7 @@ import { useMap } from '../../hooks/useMap';
 import type { MarkerClusterProps } from './types';
 
 export const MarkerCluster = forwardRef<Supercluster, MarkerClusterProps>((props, ref) => {
-  const { cluster, render, renderCluster } = props;
+  const { cluster, render, renderCluster, zoomOnClickPadding = 20 } = props;
   const { map } = useMap();
   const [list, setList] = useState<any[]>([]);
 
@@ -54,8 +54,6 @@ export const MarkerCluster = forwardRef<Supercluster, MarkerClusterProps>((props
     debounce(() => {
       const mapBoundary = getMapBoundary();
 
-      console.log(333);
-
       const result = supercluster.getClusters(...mapBoundary);
 
       setList(result);
@@ -74,46 +72,42 @@ export const MarkerCluster = forwardRef<Supercluster, MarkerClusterProps>((props
   };
 
   const handleClusterMarkerClick = (data: any) => {
-    console.log(data);
     const { properties } = data;
 
     if (!properties?.cluster) return;
 
-    console.log(111);
     const children = supercluster.getLeaves(properties.cluster_id, Infinity);
-    console.log(222);
     const childrenBbox = bbox(featureCollection(children));
 
     map.fitBounds(LngLatBounds.convert(childrenBbox as any), {
-      padding: 20,
+      padding: zoomOnClickPadding,
     });
   };
 
-  console.log(list);
-
   return (
     <>
       {list.map((item, index) => {
         const { geometry, properties } = item;
         const { point_count, cluster, cluster_id } = properties;
 
-        console.log(item);
+        const key = item.id || index;
 
         if (cluster) {
           return (
             <Marker
-              key={index}
+              key={key}
               lngLat={geometry.coordinates}
               onClick={(e) => {
-                handleClusterMarkerClick(item);
+                handleClusterMarkerClick(JSON.parse(JSON.stringify(item)));
               }}
             >
               {isFunction(renderCluster) ? renderCluster(point_count, cluster_id) : renderCluster}
             </Marker>
           );
         }
+
         return (
-          <Marker key={index} lngLat={geometry.coordinates}>
+          <Marker key={key} lngLat={geometry.coordinates}>
             {isFunction(render) ? render(item) : render}
           </Marker>
         );

diff --git a/src/components/MarkerCluster/types.ts b/src/components/MarkerCluster/types.ts
@@ -1,4 +1,5 @@
 import type Supercluster from 'supercluster';
+import type { PaddingOptions } from 'mapbox-gl';
 
 export type RenderMarkerFun = (data: any) => React.ReactNode;
 export type RenderClusterMarkerFun = (count: number, clusterId: string) => React.ReactNode;
@@ -23,6 +24,11 @@ export interface MarkerClusterProps {
    * 聚合点渲染扩展
    */
   renderCluster?: React.ReactNode | RenderClusterMarkerFun;
+  /**
+   * 添加到给定边界的填充量
+   * @default 20
+   */
+  zoomOnClickPadding?: number | PaddingOptions;
   onClick?: any;
   onClusterClick?: any;
 }