Mapbox Gl JS：无法使用 setFeatureState 更新功能属性

Question

我正在尝试创建一个在地图上呈现圆圈的网络应用程序。如果 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

根据 https://docs.mapbox.com/mapbox-gl-js/style-spec/#other-function。

，我不确定您是否可以将这些类型的函数表达式与特征状态一起使用

您应该可以使用 match 表达式 https://docs.mapbox.com/mapbox-gl-js/style-spec/#expressions-match with ["feature-state", "numUsers"] to get the feature state in an expression, https://docs.mapbox.com/mapbox-gl-js/style-spec/#expressions-feature-state

Answer 2

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

Mapbox Gl JS：无法使用 setFeatureState 更新功能属性

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

javascript

jquery

mapbox

mapbox-gl-js

Mapbox Gl JS：无法使用 setFeatureState 更新功能 属性

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

javascript

jquery

mapbox

mapbox-gl-js

Mapbox Gl JS：无法使用 setFeatureState 更新功能属性