React native 反应本机映射聚类

我想在我的react native应用程序中集成地图，为此我使用“react native maps”库 我想使用集群，但我无法找到与此相关的适当文档。

---

请帮助我查找有关如何将地图与群集集成的文档，并告诉我哪一个库最适合在iOS和Android平台上实现群集。

您可以使用

mapbox/supercluster

，并展示如何实现supercluster以作出本机反应。它最初是为浏览器/节点应用程序开发的，但您仍然可以简单地

npm安装并使用它（javascript到处都是javascript）。将聚集标记添加到地图视图中（最初共享）：

{this.map=ref；}}>
{this.state.markers.map（（marker，index）=>{
返回(
this.markerPressed（marker）}>
);
})}

警告来自
react native maps
：

如果需要显示成百上千个或更多的数据，主要问题是性能
成千上万的标记你必须优化它，
这才是真正困难的地方

react-native-maps
也有一个活动的冲突的，它解决了这个问题在Android和iOS中都是本机的，但它等待合并。但是，您可以手动实现它。
您可以使用。此模块包装并用作群集引擎。这个模块非常容易使用

演示

还有一个用于集群的库
 纱线添加反应本地映射聚类

import {Marker} from 'react-native-maps';
import MapView from "react-native-map-clustering";


    const INITIAL_REGION = {
      latitude: 52.5,
      longitude: 19.2,
      latitudeDelta: 8.5,
      longitudeDelta: 8.5,
    };
    
    const App = () => (
      <MapView initialRegion={INITIAL_REGION} style={{ flex: 1 }}>
        <Marker coordinate={{ latitude: 52.4, longitude: 18.7 }} />
        <Marker coordinate={{ latitude: 52.1, longitude: 18.4 }} />
        <Marker coordinate={{ latitude: 52.6, longitude: 18.3 }} />
        <Marker coordinate={{ latitude: 51.6, longitude: 18.0 }} />
        <Marker coordinate={{ latitude: 53.1, longitude: 18.8 }} />
        <Marker coordinate={{ latitude: 52.9, longitude: 19.4 }} />
        <Marker coordinate={{ latitude: 52.2, longitude: 21 }} />
        <Marker coordinate={{ latitude: 52.4, longitude: 21 }} />
        <Marker coordinate={{ latitude: 51.8, longitude: 20 }} />
      </MapView>
    );

从'react native maps'导入{Marker}；
从“react native map clustering”导入MapView；
常量初始_区域={
纬度：52.5，
经度：19.2，
latitudeDelta:8.5，
纵向德尔塔：8.5，
};
常量应用=（）=>(
);


import {Marker} from 'react-native-maps';
import MapView from "react-native-map-clustering";


    const INITIAL_REGION = {
      latitude: 52.5,
      longitude: 19.2,
      latitudeDelta: 8.5,
      longitudeDelta: 8.5,
    };
    
    const App = () => (
      <MapView initialRegion={INITIAL_REGION} style={{ flex: 1 }}>
        <Marker coordinate={{ latitude: 52.4, longitude: 18.7 }} />
        <Marker coordinate={{ latitude: 52.1, longitude: 18.4 }} />
        <Marker coordinate={{ latitude: 52.6, longitude: 18.3 }} />
        <Marker coordinate={{ latitude: 51.6, longitude: 18.0 }} />
        <Marker coordinate={{ latitude: 53.1, longitude: 18.8 }} />
        <Marker coordinate={{ latitude: 52.9, longitude: 19.4 }} />
        <Marker coordinate={{ latitude: 52.2, longitude: 21 }} />
        <Marker coordinate={{ latitude: 52.4, longitude: 21 }} />
        <Marker coordinate={{ latitude: 51.8, longitude: 20 }} />
      </MapView>
    );