Performant GL Triangles Mapbox GL JS

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

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

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

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

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

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

У меня наивная реализация, использующая этот рабочий процесс:

• Создайте источник geojson 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. Назначьте непроектируемую широту и долготу в качестве координат для геометрии многоугольника
13. Добавить в массив функций для коллекции
14. Вызов setData на слое

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

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

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

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

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

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

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