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

您应该使用“功能状态” ^[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

Answer 2

我不确定您是否可以根据https://docs.mapbox.com/mapbox-gl-js/style-spec/#other-function使用具有功能状态的那种函数表达式。

相反，您应该可以将match与["feature-state", "numUsers"]一起使用<rect inkscape:label="#rect1067" y="50.32835" x="154.16335" height="25.92329" width="23.673288" id="lobby-link" style="fill:none;fill-opacity:1;stroke:#000000; stroke-width:0.32671064;stroke-miterlimit:4; stroke-dasharray:none;stroke-opacity:1" />表达式https://docs.mapbox.com/mapbox-gl-js/style-spec/#expressions-match来获取表达式https://docs.mapbox.com/mapbox-gl-js/style-spec/#expressions-feature-state的特征状态

Mapbox GL JS：无法使用setFeatureState更新要素属性

2 个答案: