点聚合示例新增动态更新

qiuxiang · Dec 14, 2021 · 552dbb4 · 552dbb4
1 parent d648539
commit 552dbb4
Show file tree

Hide file tree

Showing 2 changed files with 18 additions and 7 deletions.
diff --git a/example/screens/cluster.tsx b/example/screens/cluster.tsx
@@ -8,12 +8,7 @@ export default class Clustering extends Component {
   status?: CameraEvent;
   cluster?: Cluster | null;
   mapView?: MapView | null;
-  markers = Array(1000)
-    .fill(0)
-    .map((_, i) => ({
-      position: { latitude: 39.5 + Math.random(), longitude: 116 + Math.random() },
-      properties: { key: `Marker${i}` },
-    }));
+  state = { markers: generateMarkers() };
 
   render() {
     return (
@@ -24,6 +19,10 @@ export default class Clustering extends Component {
           this.status = nativeEvent;
           this.cluster?.update(nativeEvent);
         }}
+        onLongPress={() => {
+          this.setState({ markers: generateMarkers() });
+          setTimeout(() => this.cluster?.update(this.status!), 0);
+        }}
       >
         <Cluster
           onPress={({ position }) => {
@@ -36,7 +35,7 @@ export default class Clustering extends Component {
             );
           }}
           ref={(ref) => (this.cluster = ref)}
-          points={this.markers}
+          points={this.state.markers}
           renderMarker={(item) => (
             <Marker
               key={item.properties.key}
@@ -49,3 +48,12 @@ export default class Clustering extends Component {
     );
   }
 }
+
+function generateMarkers() {
+  return Array(1000)
+    .fill(0)
+    .map((_, i) => ({
+      position: { latitude: 39.5 + Math.random(), longitude: 116 + Math.random() },
+      properties: { key: `Marker${i}` },
+    }));
+}
diff --git a/lib/src/cluster/index.tsx b/lib/src/cluster/index.tsx
@@ -64,6 +64,9 @@ export default class Cluster extends React.PureComponent<Props, State> {
     }, 0);
   }
 
+  /**
+   * 需要在 MapView.onCameraIdle({ nativeEvent }) 回调里调用，参数为 nativeEvent
+   */
   update({ cameraPosition, latLngBounds }: CameraEvent) {
     setTimeout(() => {
       const { southwest, northeast } = latLngBounds;