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

Question

我正在尝试创建一个在 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');
});

Answer 1

您应该使用“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