javascript - mapbox 可以将变量作为 paint 属性值吗？

Question

让我们想象一下，我有这个缩放事件来更新我在 map 上缩放的当前值:

var map_zoom = 8
//Some more code to set up the map
map.on('zoom', function() {
        map_zoom = map.getZoom();
}

现在，如果我有一个像这样绘制圆圈的图层:

map.addLayer({
        'id': 'population',
        'type': 'circle',
        'source': 'data',
        'paint': {
            'circle-radius': map_zoom,
            'circle-color': 'rgba(252,141,98,1)'

});

还有一个像这样画圆的图层:

map.addLayer({
            'id': 'population',
            'type': 'circle',
            'source': 'data',
            'paint': {
                'circle-color': 'rgba(252,141,98,1)'

    });

这两者有什么区别？我在我的示例代码中添加了一个 onClick 事件来获取各个圆圈的绘画属性，但似乎在这两种情况下 'circle-radius' 都是一个固定值。也就是说，即使在我将其设置为取决于随每个缩放级别更新的变量的第一种情况下，它的值也是固定的，即使在不同的缩放级别也是如此。这正常吗？

mapbox 的表达式是动态修改图层值或某些绘制属性的唯一方法吗？

Answer 1

您可以通过更改要素的属性(更改源)或使用 setPaintProperty 来更改绘画属性的行为。方法:

map.on('zoom', function() {
  var map_zoom = map.getZoom() * 5;
  map.setPaintProperty('total', 'circle-radius', map_zoom);
})

[ https://jsfiddle.net/pdoa7kLw/ ]