Как реализовать загрузку большого количества маркеров на карту, react/svg?

Question

[cester]

Добрый день! Подскажите пожалуйста как лучше реализовывать загрузку маркеров на карту если их около 5-ти тысяч и может быть больше.
Проект на react, карта на svg.
Маркеры надо показать постепенно, группами.
На данный момент в компоненте я беру массив из этих элементов и через сетинтервал записываю в стейт определенное количество элементов.
И уже со стейта вывожу данные.
Но что-то мне это не нравится)

Буду благодарен за лучший вариант/идею рендера этих маркеров)

Answer 1

[Andrew Lewman]

Вам точно надо именно визуализировать 5 тысяч маркеров, или можно прибегнуть к кластеризации?

Comments

[cester]

надо показать все 5 тысяч

[Максим Тимофеев]

cester, это ж какого размера маркер будет? Даже если их один к одному подряд поставить, и карту во весь экран, то на HDReady это 12х12px. А в реальных условиях, где их распределение не равномерно, я уверен что не будет не единого случая, где они все на экране. Так что кластеризация нужна и поможет.
Ну и банально исходя из здравого смысла - если хотите что-бы это завелось и полетело, надо кластеризировать.

Вы же понимаете что

надо показать все 5 тысяч

это не значит, что они все 5 тысяч отрисованы.

[cester]

Максим Тимофеев, маркеры в виде кружка, разного диаметра, они могут быть друг на друге и они должны быть загружены постепенно и отображаться также все без кластеризации. Для карт использую это.
Никакой интерактивности с картой не нужно, просто нужно показать маркеры постепенно

[Максим Тимофеев]

cester, прикиньте просто математически, какое расширение должно быть у экрана, что бы разместить на нем 5000 кружочков и при этом они не перекрыли всю карту собой и Вы поймете, что одновременно 5000 кружочков - это утопия. Если и не кластеризация, то как минимум вывод только тех, что не перекрывают друг друга.
Просто прикиньте, вот пример:
https://www.react-simple-maps.io/simple-markers
карта около 1000 на 1000 и на ней 13 маркеров, уже не мало выглядит. А что будет при 5000?

[cester]

прикиньте просто математически, какое расширение должно быть у экрана, что бы разместить на нем 5000 кружочков и при этом они не перекрыли всю карту собой

они и должны перекрыть всю карту собой)
вопрос не в отображении, а в постепенной загрузке

Answer 2

[Владимир Проскурин]

Рисуйте только те маркеры, которые находятся в области видимости карты. Еще лучше - загружать с сервера только те маркеры, которые находятся в области видимости карты. т.е. при получении маркеров, передаете на сервер свою область (позицию и размер), на сервере составляете список маркеров в этой области и возвращаете клиенту. т.к. не очень хорошо хранить 5 тысяч объектов на клиенте, а уж отображать тем более.
UPD: если хотите отобразить все, можно произвести некоторую оптимизацию.
1) Не засовывать массив точек в state. Создайте отдельный массив точек markers, а в state добавьте переменную iteration. И после того, как вы что-то меняете в объектах markers, меняйте в state переменную iteration, и тогда рендеринг будет произведен.
2) Хранить все маркеры в одном path, а не в множестве элементов.

Вот пример https://jsfiddle.net/7z9grsxe/6/ У меня спокойно держит 10000 объектов.

Comments

[cester]

Еще лучше - загружать с сервера только те маркеры, которые находятся в области видимости карты

карта такого типа, что видно сразу всю карту

на сервере составляете список маркеров ...

к сожелению, к серверу допуска нет и приходят сразу 5 тыс. (

[Владимир Проскурин]

cester, обновил ответ.

[cester]

Владимир Проскурин, Спасибо, но

Хранить все маркеры в одном path

не вийдет,
так как есть компонент Marker отсюда

[Владимир Проскурин]

cester, такие сложные объекты будут тормозить.

Answer 3

[anjiJa]

В mapbox есть функция, которая проверяет месторасположение маркера внутри определенного контура. Если ответ true, то можно смело выводить на экран.