web-dev-qa-db-ja.com

ネイティブマップクラスタリングに反応する

マップをreact-nativeアプリに統合したいのですが、そのために「react-native-maps」ライブラリを使用しています https://github.com/airbnb/react-native-maps 欲しいクラスタリングを使用しますが、それに関連する適切なドキュメントを見つけることができません。マップをクラスタリングと統合する方法のドキュメントを見つけ、iOSとAndroidの両方のプラットフォームのクラスタリングの実装に最適なライブラリを教えてください。

react-nativemapsmarkerclustererreact-native-maps
19
coffee

mapbox/superclusterrepo 、および ここに要点 を使用して、スーパークラスターをReact Nativeに実装する方法を示します。最初はブラウザ/ノードアプリケーションですが、それでも単にnpm installして使用できます（javascriptはどこでも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の両方でネイティブに、ただしマージを待機します。ただし、手動で実装できます。

10
eden

react-native-maps-super-cluster を使用できます。このモジュールは AirBnBのreact-native-maps をラップし、 MapBoxのSuperCluster をクラスタリングエンジンとして使用します。このモジュールは非常に使いやすいです。

デモ

enter image description here

クラスタリング用のライブラリがもう1つあります react-native-map-clustering 。

4
Pir Shukarullah Shah