Обновление производительности Mapbox при прокрутке - PullRequest
Новая
       27

Обновление производительности Mapbox при прокрутке

1 голос
/ 07 февраля 2020

Я работаю над приложением, которое использует Mapbox для отображения маршрута и позволяет пользователям перемещаться по нему, прокручивая страницу вверх и вниз.

Я использую некоторые приемы, аналогичные показанным на этот пример . Как прямое обновление источника новыми координатами и перемещение карты на каждой итерации (я использую flyTo вместо panTo, потому что я также обновляю масштаб / направление)

При анализе примера Mapbox с использованием вкладки производительности Chrome DevTools, их частота кадров выглядит великолепно. Но, делая то же самое в моем приложении, это гораздо менее согласованно, и некоторые кадры занимают от 50 до 100 мсек.

Пример с вкладкой производительности

Как вы можете видеть на скриншоте , есть некоторые requestAnimationFrame вызовы, которые не запускаются моим кодом и занимают много времени.

У меня ограниченный опыт работы с анимацией или Js улучшения производительности. Некоторое время я искал и пробовал много разных вариантов.

Код очень похож на следующий: 

const app = new App();

$(window).on('scroll', function(){
  app.onScroll();
});


class App {

  [...]

  onScroll() {
    this.latestScroll = window.pageYOffset;

    if(!this.ticking) {
      requestAnimationFrame(this.updateScroll.bind(this));
      this.ticking = true;
    }
  }

  updateScroll() {
    this.ticking = false;

    [...]

    if (this.shouldUpdate()) {
      this.drawPath(path);
      this.moveCamera(position, bearing, zoom);
    }
  }

  drawPath(path) {
    const geojson = {
      type: 'Feature',
      properties: {},
      geometry: {
        type: 'LineString',
        coordinates: path
      }
    };

    this.map.getSource('route').setData(geojson);
  }

  moveCamera(position, bearing, zoom) {
    this.map.flyTo({
      center: position,
      bearing,
      zoom,
      animate: false,
    });
  }
}
...