反应原生地图聚类

Posted 2023-05-06

【中文标题】反应原生地图聚类

【英文标题】：react native maps clustering

【发布时间】：2017-02-10 10:56:58

【问题描述】：

我想在我的 react-native 应用程序中集成地图，为此我使用了“react-native-maps”库 https://github.com/airbnb/react-native-maps 我想使用集群，但我找不到与此相关的适当文档。 请帮助我查找有关如何将地图与集群集成的文档，并告诉我哪个库最适合在 ios 和 android 这两个平台上实现集群。

【参考方案1】：

您可以使用 mapbox/supercluster repo 和 here's a gist 来展示如何实现超集群到 React Native。它最初是为浏览器/节点应用程序开发的，但您仍然可以简单地 npm install 并使用它（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 也有一个活跃的conflicting PR，它在 Android 和 iOS 本地解决了这个问题，但它等待合并。但是，您可以手动实现它。

【参考方案2】：

您可以使用react-native-maps-super-cluster。该模块包装AirBnB's react-native-maps 并使用MapBox's SuperCluster 作为集群引擎。这个模块超级好用。

演示

还有一个用于聚类react-native-map-clustering 的库。

【参考方案3】：

yarn add react-native-map-clustering

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>
    );