マップをreact-nativeアプリに統合したいのですが、そのために「react-native-maps」ライブラリを使用しています https://github.com/airbnb/react-native-maps 欲しいクラスタリングを使用しますが、それに関連する適切なドキュメントを見つけることができません。マップをクラスタリングと統合する方法のドキュメントを見つけ、iOSとAndroidの両方のプラットフォームのクラスタリングの実装に最適なライブラリを教えてください。
mapbox/supercluster
repo 、および ここに要点 を使用して、スーパークラスターを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の両方でネイティブに、ただしマージを待機します。ただし、手動で実装できます。
react-native-maps-super-cluster を使用できます。このモジュールは AirBnBのreact-native-maps をラップし、 MapBoxのSuperCluster をクラスタリングエンジンとして使用します。このモジュールは非常に使いやすいです。
クラスタリング用のライブラリがもう1つあります react-native-map-clustering 。