Анимация слоя Mapbox GL JS с низким fps - PullRequest
Новая
       15

Анимация слоя Mapbox GL JS с низким fps

2 голосов
/ 09 мая 2019

Я использую следующий код Javascript для анимации слоя радара на моей карте: 

function updateLayer() {

    window.requestAnimationFrame(updateLayer);     

    var now = Date.now();
    elapsed = now - then;      

    if (elapsed > fpsInterval) {
        //fpsInterval being 1000 / 10 or 1000 / 60
        then = now - (elapsed % fpsInterval);

        updateLayerImage();

    }

}

updateLayerImage () циклически просматривает радиолокационные изображения последних 3 часов с шагом 5 минут.

Однако это приводит к очень медленной анимации (около 1-2 кадров в секунду).Вот что я сделал:

  • Так как я загружаю радиолокационные изображения непосредственно из официального источника погоды, каждое изображение размером от 500 КБ до 3 МБ, я решил, что это может быть узким местом при загрузкеих 60 раз в секунду.Поэтому я написал независимый скрипт, который кэширует радиолокационные изображения последних 3 часов на моем собственном сервере, что обеспечивает более быстрое соединение.Результатом стало лишь небольшое улучшение.
  • Я изменил этот код кэша, чтобы дополнительно сжимать изображения примерно до 300 КБ каждое, что должно сделать его быстрее, но не сильно помогло.
  • ЯЯ не специалист по Javascript и не был уверен, как «кэшировать» изображения в браузере клиента, поэтому я делаю следующее: как только изображение загружено, я добавляю его как простое (скрытое) img src = "" id = ""тег.После того, как моя updateLayerImage () вернулась к тому же изображению, я не загружаю его снова с моего сервера, но фактически повторно использую изображение.
  • Mapbox GL JS не поддерживает, однако, обновление изображения источника изображения, нотолько его URL, который заставляет это загрузить это снова.Поэтому я скачал код Mapbox GL JS и изменил исходный файл изображения, чтобы иметь функцию, принимающую HTMLImageElement в качестве параметра и присваивающую его источнику, не загружая ничего.Yarn установил код и внедрил мой собственный файл Mapbox GL JS, и все, сетевые подключения не выполняются после загрузки всех изображений на страницу HTML.На самом деле все еще не быстрее.

У меня нет идей, поскольку у меня относительно небольшие изображения, я не загружаю их из Интернета более одного раза и использую их повторно.Но все равно у меня очень низкий fps.Я начинаю думать, что это ограничение Mapbox GL JS ...

Как улучшить мой fps?

Редактировать: Измерение времени выполнения updateLayerImage()приводит к изменению длительности от 45 мс до менее 2 мс!Внутри updateLayerImage() я вызываю функции Mapbox GL JS внутри файла image_source.js, который запускает событие dataloading, я назначаю свое новое изображение его переменной изображения, а затем вызываю _finishLoadinig (), который запускает событие data.Я думаю, что некоторая магия рендеринга изображений занимает много времени.Есть ли способ просто переназначить переменную изображения и вызвать простое перерисовывание?

...