react-native - 反应原生地图聚类

Question

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

Answer 1

您可以使用mapbox/supercluster repo，这里有一个要点，展示了如何将超集群实现到 React Native。它最初是为浏览器/节点应用程序开发的，但您仍然可以简单地npm install使用它（javascript 无处不在）。将集群标记添加到您的 MapView 中（最初在此处共享）：

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

来自以下问题的警告react-native-maps：

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

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

Answer 2

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

演示

还有一个用于集群react-native-map-clustering 的库。

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