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

【问题标题】：Mapbox Gl JS: Can't update feature property with setFeatureStateMapbox Gl JS：无法使用 setFeatureState 更新功能属性
【发布时间】：2019-09-09 04:57:19
【问题描述】：

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

【问题讨论】：

标签： javascript jquery mapbox mapbox-gl-js

【解决方案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

【讨论】：

【解决方案2】：

根据https://docs.mapbox.com/mapbox-gl-js/style-spec/#other-function，我不确定您是否可以将这些类型的函数表达式与特征状态一起使用。

相反，您应该能够使用match 表达式https://docs.mapbox.com/mapbox-gl-js/style-spec/#expressions-match 和["feature-state", "numUsers"] 来获取表达式https://docs.mapbox.com/mapbox-gl-js/style-spec/#expressions-feature-state 中的特征状态

【讨论】：