Как вывести миллион маркеров на карте в мобильном приложении?

Question

[German Zvonchuk]

Здравствуйте Разработчики!

У меня есть задача: вывести 100 тысяч маркеров на карте в мобильном приложении.
Буду вам признателен, если поделитесь свои опытом со мной и подскажете, как сделать плавное отображение маркеров на карте.

вывод всех маркеров по запрошенному квадрату
Приложение высылает top_left и bottom_right видимой зоны карты, API возвращает все маркеры.
Этот подход печальный, потому что сервер отдает маркеры не так быстро, как хотелось, и объем передаваемых данных не маленький:

8307 маркеров
Time: 1737 ms
Size: 423.41 KB

Мобильное приложение группирует маркеры не так шустро, как хотелось бы. К тому же, не хотелось бы тратить ресурсы мобильного телефона на это.

Этот вариант был сразу отвергнут.

вывод сгруппированных маркеров по запрошенному квадрату
При таких же top_left и bottom_right сервер возвращает сгруппированные маркеры.

335 маркеров
Time: 197 ms
Size: 25.5 KB

После этого решил остановится на серверном варианте кластеризации.

На данный момент проблема в том, что приложение отсылает запрос на сервер, даже если карту сдвинуть карту на 1px. Это выглядит очень некрасиво.

Посмотрите, пожалуйста, запись:
https://youtu.be/UoFGL4MmSJE

Я предполагаю что надо запрашивать данные по квадрату в два раза больше видимой области карты и отправлять запрос тогда, когда видимая область выходит за рамки квадрата с маркерами.

Может быть, есть какие-то готовые библиотеки которые реализуют это?

Comments

[sim3x]

Как увидеть карту за кучей маркеров?

[German Zvonchuk]

sim3x, количество маркеров соотвественно зуму возвращает API. Тут все можно настроить.

Answer 1

[Moskus]

Изучайте методы, которые давно отработаны для показа данных в различных картографических фреймворках для web.
Подходов несколько. Например, разбивать запрашиваемые данные на фрагменты одинакового (в проекции окна приложения) размера. Это позволяет не запрашивать те, которые у вас уже загружены. Можно запрашивать область больше вашего viewport-а (и комбинировать это с предыдущим методом). И делать новые запросы только тогда, когда величина scroll-а от точки предыдущего запроса превышает какое-то значение. Например, пользователь открыл карту, приложение запросило данные на покрытие viewport-а плюс 50% его ширины с каждой стороны. Пока пользователь не сдвинет карту дальше 25% ширины viewport-а от начальной точки, новых запросов не делать. Также можно озаботиться тем, чтобы сервер не пересчитывал всё каждый раз, а именно - сделать prerender для разных масштабных слоев. И использовать кэширование на стороне сервера. Или вообще превратить ваши маркеры в статичный (или закэшированный, условно статичный) растровый слой, а с сервером общаться только когда пользователь в маркер ткнёт, чтобы о нем информацию получить.

Comments

[German Zvonchuk]

Спасибо за рекомендации, именно так и сделали, запрашиваемся область больше viewport-а. Получилось красиво :-)
Сейчас наверное еще и с зумом что-то придумаем, чтобы запросов меньше к серверу летало и моментально все в приложении отображалось.

[Moskus]

German Zvonchuk, ну так отметьте ответ решением.