Mapbox-gl: эффективно масштабируйте маркеры вместе с картой. ⇐ Javascript

[Anonymous]

Демо:
Я создал простой демонстрационный проект, чтобы продемонстрировать и решить эту проблему.
Проект: https://github. com/zimonitrome/mapbox-scale-problem
Страница: https://zimonitrome.github.io/mapbox-scale-problem/
< img alt="введите здесь описание изображения" src="https://i.sstatic.net/wf3eeLY8.png" />
Описание:
Мои требования к проекту двоякие:< /p>

• Требование 1: Я хочу показать большое количество маркеров (например, 1000) в Mapbox-gl.
• Требование 2. Я хочу, чтобы они масштабировались вместе с картой и ее проекцией/масштабированием/перспективой.

Чтобы решить требование 1:
В идеале я бы использовал встроенный класс Marker() (ссылка), который добавляет элемент HTML для каждого маркера и преобразует его с помощью CSS. Я продемонстрировал это в том, что я называю MarkerMap в своей демонстрации. Но преобразование такого количества объектов в DOM кажется медленным на многих компьютерах и телефонах при отображении 1000 маркеров.
Другой вариант — использовать «слой символов». Следуя официальному руководству, добавляется слой с идентификатором «точек», на который позже можно будет ссылаться и обновлять. Я демонстрирую это как LayerMap в своем репозитории. Слой символов работает быстрее (без задержек), поскольку использует open-gl и не является элементом HTML, но им сложнее управлять.
Чтобы выполнить требование 2:
Масштабирование маркеров (

Код: Выделить всё

Marker()

или слои символов), по-видимому, является нерешенной проблемой в сообществе Mapbox, и я видел несколько вопросов без ответов.
Короче, я хочу, чтобы маркеры масштабировались вместе с базовой поверхностью проекции. , то есть в глобусной проекции маркеры в середине экрана крупнее тех, что ближе к краям. У Меркатора маркеры внизу/верху больше из-за проекции.
Я решил это нестандартно и, вероятно, медленно:
Учитывая координату карты c0, создайте N новых координат (

Код: Выделить всё

c1

, c2,... cN) на реальном расстоянии d от c0 под разными углами. Затем спроецируйте все координаты (

Код: Выделить всё

c0

, ..., cN), чтобы получить пиксельные точки на экране (

Код: Выделить всё

p0

, ..., pN) и получить среднее расстояние всех новых точек пикселей (

Код: Выделить всё

p1

, ..., pN) до p0. Таким образом, мы получим локальный масштаб для любой заданной координаты в любой заданной картографической проекции.
Более наглядно я попытался описать это здесь:


Этот код используется обеими картами через функцию CalcDistScale() и другие вспомогательные функции, найденные в src/helpers.ts.
Проблема
Все работает медленно. Я бы предпочел использовать карту маркеров, но она кажется медленной даже без включенного масштабирования. Я не думаю, что это можно ускорить, но было бы здорово, если бы это было возможно. Но масштабирование обновляется без перехода или с большой задержкой.
Карта слоев имеет более высокую производительность, но обновление масштаба имеет задержку перехода. Я думаю, что некоторая задержка все равно будет существовать, даже если бы я мог каким-то образом избавиться от перехода.
Подводя итог: я бы хотел карта, которая может масштабировать маркеры в соответствии с проекцией, но делать это быстро и без задержек.

Подробнее здесь: https://stackoverflow.com/questions/793 ... fficiently