feat(MarkerCluster): 支持 data

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

Hide file tree

Showing 2 changed files with 19 additions and 11 deletions.
diff --git a/src/components/MarkerCluster/MarkerCluster.tsx b/src/components/MarkerCluster/MarkerCluster.tsx
@@ -42,16 +42,14 @@ const InternalMarkerCluster = <D extends AnyObject = AnyObject>(
     return undefined;
   }, [map]);
 
-  useImperativeHandle(ref, () => supercluster, []);
-
   useEffect(() => {
-    fetch('https://docs.mapbox.com/mapbox-gl-js/assets/earthquakes.geojson')
-      .then((res) => res.json())
-      .then((data) => {
-        supercluster.load(data.features);
-        handleChangeBoundary();
-      });
-  }, []);
+    if (data && data.length) {
+      supercluster.load(data);
+      handleChangeBoundary();
+    }
+  }, [data]);
+
+  useImperativeHandle(ref, () => supercluster, []);
 
   const handleChangeBoundary = useCallback(
     debounce(() => {

diff --git a/stories/examples/ClusterPro.stories.tsx b/stories/examples/ClusterPro.stories.tsx
@@ -1,15 +1,24 @@
-import React, { useRef } from 'react';
+import React, { useRef, useEffect, useState } from 'react';
 import { Avatar } from 'antd';
 import { Map, Marker, StyleLoadFinish, MarkerCluster } from '../../src';
 
 import type { Meta, StoryObj } from '@storybook/react';
-import type { Supercluster } from '../../src';
+import type { Supercluster, MarkerClusterProps } from '../../src';
 
 const meta = {
   title: '示例/ClusterPro',
   render: () => {
+    const [features, setFeatures] = useState<MarkerClusterProps['data']>([]);
     const clusterRef = useRef<Supercluster>(null);
 
+    useEffect(() => {
+      fetch('https://docs.mapbox.com/mapbox-gl-js/assets/earthquakes.geojson')
+        .then((res) => res.json())
+        .then((data) => {
+          setFeatures(data.features);
+        });
+    }, []);
+
     return (
       <Map
         zoom={3}
@@ -21,6 +30,7 @@ const meta = {
           <MarkerCluster
             cluster={{ radius: 50 }}
             ref={clusterRef}
+            data={features}
             zoomOnClick
             render={<Avatar style={{ backgroundColor: '#fde3cf', color: '#f56a00' }}>U</Avatar>}
             renderCluster={(count) => {