Здравствуйте, я расскажу вам о кластеризации на стороне клиента с помощью react native и javascript.

На самом деле кластеризация на стороне клиента - это слишком сложно, но если вы используете kdbush, это слишком просто. Поддерживается маркер 400k с минимальной скоростью 56 кадров в секунду.

Что это за КДБУШ?

Это очень быстрый статический пространственный индекс для 2D-точек на основе плоского KD-дерева. Я знаю, тебе не нравятся уши. На самом деле работа очень простая и очень легкая. Сначала сравниваем координаты и индексируем ключи по координатам местоположения.

Примечание. Суперкластер поддерживает только тип данных geoJSON.

Как я могу использовать React Native?

Первоначально нам нужно добавить некоторые зависимости для карты и кластеризации. Сверхскопление отвечает нам деревьями кластеров и координатами точек. Теперь добавим наши пакеты.

npm install react-native-maps supercluster --save

Все в порядке, правда?

Еще нет! мы забыли связать пакеты.

react-native link

Порядок работы

  1. Сначала создание наборов данных кластера

2. Теперь нам нужно преобразовать данные для geoJSON.

3. Получаем масштаб карты для кластеров.

На самом деле этот блок кода выглядит сложным, но содержательным. Мы получили его user longitudeDelta для поиска ширины экрана карты по размеру пикселя.

Если хочешь узнать больше, посмотри

Stackoverflow
Группы Google

4. Теперь нам нужно получить координаты кластеров / точек.

Мы реализуем массив bbox для поиска точек.

[westLng, southLat, eastLng, northLat]
Variables
padding = 0.5
longitude - (longitudeDelta * (0.5 + padding)
latitude - (latitudeDelta * (0.5 + padding)
longitude + (longitudeDelta * (0.5 + padding)
latitude + (latitudeDelta * (0.5 + padding)

Собственно все, что готово к разработке, осталось только настроить карту и маркеры 😄 😄

Продолжайте строительство! 🚀🚀

Спасибо..