feat: 聚合支持

pansyjs · Jan 19, 2024 · 6ec86b9 · 6ec86b9
1 parent 219788e
commit 6ec86b9
Show file tree

Hide file tree

Showing 3 changed files with 34 additions and 9 deletions.
diff --git a/src/components/MarkerCluster/MarkerCluster.tsx b/src/components/MarkerCluster/MarkerCluster.tsx
@@ -15,7 +15,16 @@ const InternalMarkerCluster = <D extends AnyObject = AnyObject>(
   props: MarkerClusterProps<D>,
   ref: React.Ref<Supercluster>,
 ) => {
-  const { cluster, render, renderCluster, data = [], zoomOnClick, zoomOnClickPadding = 20 } = props;
+  const {
+    cluster,
+    render,
+    renderCluster,
+    data = [],
+    zoomOnClick,
+    zoomOnClickPadding = 20,
+    onClick,
+    onClusterClick,
+  } = props;
   const { map } = useMap();
   const [list, setList] = useState<any[]>([]);
 
@@ -43,7 +52,7 @@ const InternalMarkerCluster = <D extends AnyObject = AnyObject>(
   }, [map]);
 
   useEffect(() => {
-    if (data && data.length) {
+    if (data) {
       supercluster.load(data);
       handleChangeBoundary();
     }
@@ -104,18 +113,25 @@ const InternalMarkerCluster = <D extends AnyObject = AnyObject>(
               key={item.id}
               lngLat={geometry.coordinates}
               onClick={() => {
+                onClusterClick?.(point_count, cluster_id);
                 if (zoomOnClick) {
-                  handleClusterMarkerClick(JSON.parse(JSON.stringify(item)));
+                  handleClusterMarkerClick(item);
                 }
               }}
             >
-              {isFunction(renderCluster) ? renderCluster(point_count, cluster_id) : renderCluster}
+              {isFunction(renderCluster) ? renderCluster(point_count) : renderCluster}
             </Marker>
           );
         }
 
         return (
-          <Marker key={item.id} lngLat={geometry.coordinates}>
+          <Marker
+            key={item.id}
+            lngLat={geometry.coordinates}
+            onClick={() => {
+              onClick?.(properties);
+            }}
+          >
             {isFunction(render) ? render(item) : render}
           </Marker>
         );

diff --git a/src/components/MarkerCluster/types.ts b/src/components/MarkerCluster/types.ts
@@ -4,7 +4,7 @@ import type { PaddingOptions } from 'mapbox-gl';
 
 export type AnyObject = Record<PropertyKey, any>;
 export type RenderMarkerFun = (data: any) => React.ReactNode;
-export type RenderClusterMarkerFun = (count: number, clusterId: string) => React.ReactNode;
+export type RenderClusterMarkerFun = (count: number) => React.ReactNode;
 
 export type { Supercluster };
 
@@ -49,8 +49,8 @@ export interface MarkerClusterProps<D extends object = any> {
    * @default 20
    */
   zoomOnClickPadding?: number | PaddingOptions;
-  onClick?: any;
-  onClusterClick?: any;
+  onClick?: (data: D) => void;
+  onClusterClick?: (count: number, clusterId: number) => void;
 }
 
 export type RefMarkerCluster = <D extends AnyObject = AnyObject>(

diff --git a/stories/examples/ClusterPro.stories.tsx b/stories/examples/ClusterPro.stories.tsx
@@ -28,7 +28,6 @@ const meta = {
       >
         <StyleLoadFinish>
           <MarkerCluster
-            cluster={{ radius: 50 }}
             ref={clusterRef}
             data={features}
             zoomOnClick
@@ -40,6 +39,16 @@ const meta = {
                 </Avatar>
               );
             }}
+            onClick={(data) => {
+              console.log(data);
+            }}
+            onClusterClick={(count, clusterId) => {
+              console.log(count);
+
+              if (clusterRef.current) {
+                console.log(clusterRef.current.getLeaves(clusterId, Infinity));
+              }
+            }}
           />
         </StyleLoadFinish>
       </Map>