如何同步更新 mapbox gl 样式？

Question

背景： 我有一个应用程序，它遍历一个数组，其中包含我希望每 100 毫秒或当用户单击后退/前进按钮时设置样式的功能 ID 数组。我当前的实现使用自定义事件侦听器，在其中我更新外部数组的索引以获取一组新功能。我首先使用 removeFeatureState() 来清除特征状态，然后对于新内部数组中的每个特征 ID，我使用 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);