Как синхронно обновить стиль mapbox gl?

Question

Контекст: У меня есть приложение, которое просматривает массив, содержащий массивы идентификаторов функций, которые я хочу стилизовать каждые 100 мс или когда пользователь нажимает кнопку «назад / вперед». Моя текущая реализация использует пользовательский прослушиватель событий, где я обновляю индекс внешнего массива, чтобы получить новый набор функций. Я начинаю с использования removeFeatureState (), чтобы очистить состояния объектов, а затем для каждого из идентификаторов объектов в новом внутреннем массиве я использую setFeatureState () для управления стилем.

Код:

document.addEventListener('update', function (e) {
            var algo_step = run_data[run_index];
            map.removeFeatureState(
                {source: 'precincts'});

            if (algo_step.feasible){
                let district_ix = 0;
                for(center in algo_step.partition){
                    algo_step.partition[center].forEach(precinct =>
                        map.setFeatureState(
                            { source: 'precincts', id: precinct },
                            { district_n : district_ix }
                        ));
                    district_ix++;
                }
            }
            else{
                algo_step.area.forEach(precinct =>
                    map.setFeatureState(
                        { source: 'precincts', id: precinct },
                        { infeasible : true }
                    ));
            }
        }, false);

Проблема: Когда я запускаю приложение, иногда стили не обновляются правильно. В настоящее время я понимаю, что это происходит из-за асинхронного обновления состояния объекта, которое не происходит до отображения карты, но я не уверен.

Ожидаемое поведение (иногда) Наблюдаемое поведение

Поэтому я думаю, что смогу решить эту проблему, если смогу обновлять карту синхронно и / или в конце обработчик событий отобразит карту со всеми функциями. состояния обновлены. Исходя из https://github.com/mapbox/mapbox-gl-js/issues/7893, неясно, реализовано ли это в настоящее время.

Есть идеи, как решить эту проблему?

Answer 1

Трудно сказать, не видя его в действии, но это звучит как какое-то состояние гонки, которое возникает, когда ваша функция обновления иногда занимает более 100 мс?

Одна вещь, которую вы можете попробовать, это ждать idle событие и время от времени пропуская обновления.

Примерно так:

let idle = true;
map.on('idle', {
  idle = true;
});
window.setInterval(() => {
  if (!idle) {
    return; // still processing something, let's skip
  }
  idle = false;
  var algo_step = run_data[run_index];
  // ... rest of update function
}, 100);