反应原生地图聚类

Posted 2021-04-09

我是新来的反应本机，我想在我的应用程序中集成地图，我正在使用“react-native-maps”库为我想要使用群集的https://github.com/airbnb/react-native-maps，但我无法找到与此相关的正确文档。请帮助我找到如何将地图与群集集成的文档，并告诉哪个库最适合实现两个平台，ios和android的群集。

答案

你可以使用mapbox/supercluster repo和here's a gist来展示如何为React Native实现超级集群。它最初是为浏览器/节点应用程序开发的，但你仍然只需要npm install并使用它（javascript到处都是javascript）。将聚簇标记添加到MapView（最初共享here）：

<MapView ref={ref => { this.map = ref; }}>
  { this.state.markers.map((marker, index) => {
    return (
      <MapView.Marker 
        coordinate={{ latitude: marker.geometry.coordinates[1], longitude: marker.geometry.coordinates[0] }}
        onPress={() => this.markerPressed(marker)}>
        <Marker model={place} active={this.isSelected(place)} />
      </MapView.Marker>
    );
  })}
</MapView>

来自issue的react-native-maps的警告：

主要问题是性能，如果你需要显示数百或数千个标记，你将需要优化地狱，这就是它变得非常困难的地方。

react-native-maps也有一个活跃的冲突PR，它在Android和iOS本地解决了这个问题，但它等待合并。但是，您可以手动实现它。

另一答案

你可以使用react-native-maps-super-cluster。这个模块包装AirBnB's react-native-maps并使用MapBox's SuperCluster作为集群引擎。该模块非常易于使用。

Demo