反应原生地图聚类

Question

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

Answer 1

您可以使用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>

来自react-native-maps的{​​{3}}的

警告：

  

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

react-native-maps还有一个有效的有冲突的 issue，可以解决此问题在Android和iOS 本机，但它等待合并。但是，您可以手动实现它。

Answer 2

纱线添加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>
    );

Answer 3

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

演示