Mapbox GL JS линейная анимация - PullRequest
Новая
       60

Mapbox GL JS линейная анимация

0 голосов
/ 31 марта 2020

Я работаю с ~ 150 000 полилиний, которые охватывают Северную Америку. По всем линиям я хотел бы нарисовать / анимировать от начала до конца каждой линии. Я начал с добавления вершин в массив и обновления источника Mapbox , как в этом примере . Это было неосуществимо, учитывая размер всего набора данных. В geo json форме это около 800 Мб, и манипулирование этим в браузере казалось необоснованным.

В качестве альтернативного подхода я разбил каждую ломаную на сегменты одинакового размера длиной 10 км. Я добавил атрибут в каждый сегмент, который представляет его процентное расстояние от начала. Я создал интервал ниже, который вызывает событие setFilter, фильтруя сегменты в процентах от начала. 

currentLinPos=0;
lineInterval=setInterval(function(){
  currentLinPos+=.01;
  if(currentLinPos>0.9999){
    currentLinPos=0
  }
  map.setFilter('lines',['<','linePrc',currentLinPos])
}, 250);

Даже при работе с небольшим подмножеством данных производительность меняется и отстает. Я ожидал лучшего результата от Mapbox GL, но, возможно, мне нужно полностью переосмыслить свою структуру данных или подход. Или было бы гораздо лучше использовать что-то вроде DECK.GL ?

...