Как загрузить 100000 маркеров, react+google maps?

Question

[fronter-up]

Добрый день! Подскажите пожалуйста как разумно сделать?
Задача построить путь на карте с большим количеством точек (примерно 100000). Саму линию делаю с помощью Polyline, строится довольно быстро. Проблемы появляется когда начинаю выводить маркеры, все начинает зависать (даже если вывожу только 1000 шт.)
Использую кластеризацию, но все равно подвисает.
В маркерах ничего такого нет, один div только.
Вопрос как грузить маркеры, чтобы все классно работало?
Проект на react + google maps.
Спасибо!

Answer 1

[Александр Аксентьев]

использовать кластеризацию на сервере только остаётся.
Никак на фронте нормально такой объём не отработает, да и не нужен он там одновременно.

Т.е. с сервера подтягивать только маркеры которые находятся в заданном квадрате карты.

А когда зум далеко, то отдавать с сервера кластеры готовые.

Comments

[fronter-up]

Сейчас надо без сервера сделать таккое.

Answer 2

[VoidVolker]

Рендерить не более 50-100 макркеров на экране. При изменении масштаба - экстраполировать. Т.е. надо сделать свое количество маркеров для каждого уровня масштаба карты. При движении карты - невидимые маркеры прятать, видимые - показывать. Еще лучше, если на экране будет не более 20-30 маркеров, еще 20-30 можно сделать невидимыми в обе стороны маршрута, чтобы при прокрутке пользователь не видел их рендеринг. А еще лучше использовать Canvas для рендеринга маркеров.

Comments

[fronter-up]

Спасибо за ответ! Звучит красиво, но пока не понимаю как "сделать свое количество маркеров для каждого уровня масштаба карты"?
На счет канвас, создавать на определенный квадрат объект канвас и в нем уже рисовать маркеры или как?

[VoidVolker]

Это значит, что для каждого уровня масштабирования на карте разное число маркеров. Например:

{
    0: [1,2,3,4,5,6,7,8,9,10,11],
    1: [1,3,5,7,9,11],
    2: [1,6,11],
    3: [1,11]
}

На счет канвас, создавать на определенный квадрат объект канвас и в нем уже рисовать маркеры или как?

Если карта на канвасе - то на саму карту. Либо просто поверх карты - но тогда может возникнуть сложность с проксированием события на саму карту.