mapbox可以将变量用作绘画属性值吗?

时间:2018-09-19 17:51:10

标签: javascript maps mapbox mapbox-gl-js

让我们想象一下,我有一个缩放事件,它会更新地图上当前缩放的值:

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的表达式是动态修改图层或某些绘画属性的值的唯一方法吗?

1 个答案:

答案 0 :(得分:1)

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

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

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