Низкая производительность Mapbox GL JS по сравнению со старым Mapbox. js - PullRequest
Новая
       27

Низкая производительность Mapbox GL JS по сравнению со старым Mapbox. js

0 голосов
/ 24 февраля 2020

Я переписываю веб-приложение для планирования маршрута из библиотеки Mapbox.js в Mapbox GL JS.

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

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

https://petrnagy.github.io/index.html#automove = нет

Обратите внимание, что старый Mapbox.js (слева) гораздо более гладкий, чем новый Mapbox GL JS (справа).

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

https://petrnagy.github.io/index.html#automove = yes

Это просто базовый пример. Само приложение также имеет:

  • Динамически стилизованные маршруты (траффи c, качество воздуха, высота над уровнем моря)
  • Богатый пользовательский интерфейс, который накладывается на карту
  • Дополнительные слои ( например, велосипедные дорожки, POI, качество воздуха)

Со всеми имеющимися функциями Mapbox GL JS в значительной степени непригоден для использования. В отличие от старого Mapbox. js, что гладко.

Любой совет по оптимизации производительности приветствуется!

1 Ответ

2 голосов
/ 26 февраля 2020

важно отметить, что более старая библиотека Mapbox. js обслуживала растровые плитки, которые обрабатываются на стороне сервера, а более современный Mapbox GL JS основан на векторах и визуализирован на стороне клиента. Из-за природы растр против вектора, вы можете увидеть это «падение» в производительности, если вы строго смотрите на FPS, потому что ваша машина может работать.

Mapbox. js, как и другие традиционные JavaScript библиотеки карт, использующие соглашение отображения базовых карт с наложением. Базовая карта (или базовый слой) - это растровый слой листов, который обслуживается уже отрисованным с сервера, и наложения часто представляют собой векторные данные, которые располагаются поверх базовой карты.

Mapbox GL JS не имеет различия между базовыми слоями и накладывать слои и использовать в основном векторные плитки. Это означает, что детали карты, такие как метки, значки и элементы, такие как улицы и здания, можно изменить с помощью JavaScript, как наложения в более ранних библиотеках отображения. Каждый слой содержит правила о том, как визуализатор должен рисовать определенные данные в браузере, и визуализатор использует эти слои для рисования карты на экране.

Подробнее о разнице вы можете прочитать здесь: https://docs.mapbox.com/help/how-mapbox-works/web-apps/

Также есть несколько замечательных руководств по повышению производительности Mapbox GL JS карт и , работающих с большими источниками Geo JSON в Mapbox GL JS

...