javascript - Mapbox Gl JS : Can't update feature property with setFeatureState

我正在尝试创建一个在 map 上呈现圆圈的网络应用程序。如果 numUsers 属性 >= 1，则圆圈为绿色；如果 numUsers 属性为 0，则圆圈为红色(默认值为 0)。

以下是我的数据源的结构:

{
    "type":"FeatureCollection",
    "features":[
        {
            "type": "Feature",
            "id": 0,
            "geometry":{
                "type":"Point",
                "coordinates":[
                    1.49129,
                    42.46372
                ]
            },
            "properties": {
                "numUsers":0
            }
        }
    ]
}

所有圆圈最初都呈现为红色，这正是我想要的，因为每个圆圈的 numUsers 属性最初都设置为 0。但是，我想通过将 numUsers 属性设置为 1 来将其中一个圆圈更改为绿色。我我正在尝试使用 setFeatureState ，但 并没有 将圆圈的颜色更改为绿色:

map.setFeatureState({source: "cities", id : 0}, {numUsers : 1});

下面是我的渲染JS代码:

map.on('style.load', function (e) {
    map.addSource('cities', {
        "type": "geojson",
        "data": "cities.geojson",
        "cluster": true,
        "clusterMaxZoom": 14,
        "clusterRadius": 80
    });

    map.addLayer({
        "id": "cities",
        "type": "circle",
        "source": "cities",
        "paint": {
            "circle-color": {
                property: 'numUsers',
                stops: [
                    [0, '#ff6666'],
                    [1, '#33ff33']
                ]
            }
        }
    }, 'settlement-label');
});

最佳答案

您应该使用“feature-state”[1] 表达式来获取使用 setFeatureState 设置的状态，并使用“case”表达式来切换状态值并设置所需的颜色。

这是它的要点:

// update after 2 seconds
setTimeout(() => {
  map.setFeatureState({ id: 0, source: "geom" }, { numUsers: 1 });
  map.setFeatureState({ id: 1, source: "geom" }, { numUsers: 2 });
}, 2000);

map.addLayer({
  id: "geom",
  type: "circle",
  paint: {
    "circle-color": [
      "case",
         ["==", ["feature-state", "numUsers"], 1], "blue",
         ["==", ["feature-state", "numUsers"], 2], "green",
         "red"
       ],
       "circle-radius": 4
  },
  source: { /* ... source */ }
});

带工作图的代码笔:https://codepen.io/manishraj/full/YzKeBwv

[1] https://docs.mapbox.com/mapbox-gl-js/style-spec/#expressions-feature-state

关于javascript - Mapbox Gl JS : Can't update feature property with setFeatureState，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/57848072/