Проблема производительности прокрутки карты при использовании vectorGrid с ngx-листовкой - PullRequest
Новая
       15

Проблема производительности прокрутки карты при использовании vectorGrid с ngx-листовкой

0 голосов
/ 28 января 2019

Я использую Leaflet + VectorGrid + ngx-leaflet для отображения векторных плиток на карте в приложении Angular.Однако, когда отображается слишком много точек, прокрутка становится действительно запаздывающей и невозможной.Уменьшение количества точек улучшает ситуацию.

Тот же сценарий отлично работает ( plunker ) при использовании просто Leaflet + Vectorgrid, поэтому я полагаю, что при использовании с ngx есть некоторые события мыши, которые спамятся-leaflet.Как я могу улучшить ситуацию?Я воспроизвел проблему в демонстрационном приложении из ngx-leaflet , но не смог заставить его работать с plunker.

1 Ответ

0 голосов
/ 28 января 2019

Скорее всего, здесь происходит то, что вы добавляете слой VectorGrid в Angular Zone, что означает, что Angular собирается подключить все обнаруженные обратные вызовы к событиям.По сути, вы правы в том, что все события мыши являются спамом при обнаружении изменений Angular.

Если вы посмотрите в основную директиву ngx-leaflet, вы увидите, как карта создается за пределами угловой зоны.Вы хотите сделать что-то подобное (я не проверял это, но это должно быть правильной базовой идеей): 

constructor(private zone: NgZone) {}
...
onMapReady(map: any) {
  // noinspection JSUnusedGlobalSymbols
  const vectorTileOptions = {
    vectorTileLayerStyles: {
      "cities-point": (p: any) => this.stylingFunction(p)
    },
    interactive: true
  };


  // Create outside of angular so the events don't trigger change detection
  this.zone.runOutsideAngular(() => {
    L.vectorGrid.protobuf(
      "http://localhost:9999/maps/batimap/{z}/{x}/{y}.vector.pbf",
      vectorTileOptions
    ).addTo(map);
  });
}

Единственный трюк в том, что вам придется вручную вызывать обнаружение изменений, когда выочень хочу, чтобы Angular заметил изменение, внесенное вами в обработчик, зарегистрированный для одного из этих событий.Но это довольно стандартная практика, когда вы упаковываете неангулярные библиотеки, подобные этой.Это единственный способ заставить вещи работать эффективно, когда вы хотите, чтобы работала автоматическая привязка данных.

...