Я хочу интегрировать карты в свое приложение Reaction-Native, для этого я использую библиотеку "Resact-Native-maps". https://github.com/airbnb/react-native-maps Я хочу использовать кластеризацию, но не могу найти соответствующую документацию, связанную с этим. Пожалуйста, помогите мне найти документацию о том, как интегрировать карты с кластеризацией, а также рассказать, какая библиотека лучше всего подходит для реализации кластеризации для обеих платформ, iOS и Android.
Реагировать на локальные карты кластеризации
Ответ 1
Вы можете использовать mapbox/supercluster
repo, а здесь gist показывает, как реализовать сверхскопление для React Native. Сначала он разрабатывался для приложений browser/ node, но вы все равно можете просто 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>
Предупреждение из issue react-native-maps
:
Основная проблема - производительность, если вам нужно отображать сотни или тысячи маркеров, которые вам нужно будет оптимизировать из этого, и именно там он становится очень тяжелым.
Ответ 2
Вы можете использовать response-native-maps-super-cluster. Этот модуль оборачивает AirBnB response-native-maps и использует MapBox SuperCluster в качестве механизма кластеризации. Этот модуль очень прост в использовании.
Демо
Есть еще одна библиотека для кластеризации response-native-map-clustering.