Перформант GL Треугольники Mapbox GL JS

Question

Я работаю над попыткой создать базовую, основанную на сетке, но эффективную систему визуализации стрелка погоды.

РЕДАКТИРОВАТЬ 2: Обновленная версия здесь: ( Mapbox Tracker) системы, используя рабочий процесс, который описан ниже

Инструкции по использованию: - Нажмите на иконку Ветер (слева) - Подождите, пока треугольники не займут экран - Панорамирование времени (внизу)

Как вы заметите (особенно при больших разрешениях или при быстром панорамировании времени), при рисовании треугольников производительность сильно падает.

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

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

У меня наивная реализация работает с использованием этого рабочего процесса:

• Создать источник коллекции геоджонов FeatureCollection
• Создайте слой заливки
• Использование свойства Data Driven: fill-color

Функция данных:

1. Получить границы карты
2. Проецируйте проект в точки экрана (map.project(LatLng))
3. Разделите высоту и ширину на порции
4. Проходите по ширине и высоте
5. Поиск данных
6. Доступ к данным вращения свойства
7. Создание вершин на основе центральной точки + размера
8. Повернуть вершины
9. Создание объектов Point для вершин
10. Снять объект Point и обернуть map.unproject(Point).wrap()
11. Создать объект объекта, назначить управляемый данными цвет
12. Присвойте непроецированный LatLng как координаты геометрии многоугольника
13. Добавить в Feature Array for Collection
14. Вызовите setData на слой

Поэтому, пока это работает, я ищу совет для более дружественного подхода.

Здесь я думаю о том, могу ли я как-то создать пользовательский слой, в котором мне нужно рисовать только координаты экрана для представления данных относительно его точки LatLng. Так что я могу нарисовать цветные, масштабированные, повернутые треугольники в пространстве экрана, а затем обновить их до соответствующих данных из новой относительной позиции LatLng.

Например, обновите сетку некоторого типа на экране вместо того, чтобы: отменять проектирование, а затем обновлять источник коллекции объектов, используя map.getSource('стрелки'). SetData(d), requestAnimationFrame(функция) и т. Д.

Я делал подобное в three.js в других проектах, но я бы предпочел использовать что-то более родное для mapbox. Это звучит выполнимо? Собираюсь ли я увидеть приличное повышение производительности, если так? Я не имел дело с необработанными вызовами gl раньше и т. Д., Поэтому, возможно, мне понадобится один или два указателя в правильном направлении, если он будет нуждаться в таком низком уровне, как этот.

РЕДАКТИРОВАТЬ:

Предыдущая реализация с использованием gmaps / three.js: volvooceanrace(дождитесь, пока кнопка слева перейдет от серого к черному), нажмите верхнюю кнопку, которая показывает метку "ветер" при наведении, сдвиньте красную временную полоску внизу, чтобы изменить данные.

Добавлен скриншот текущей работающей реализации Mapbox GL Arrows

Answer 1

Не уверен, что было доступно в 2016 году, но разумным подходом в эти дни может быть использование symbol слои, а icon-rotate управляемое данными свойство для поворота каждого значка на основе свойства его точки данных.