更改属性值时,mapbox会动态更改圆形颜色

时间:2018-05-23 13:00:14

标签: properties mapbox-gl-js mapbox-gl-draw

我正在尝试制作mapbox图层以更改圆圈的颜色 当我改变一个属性的值。但是圆圈的颜色并没有改变。

我使用mapbox-gl-draw

这里是jsbin:https://jsbin.com/lojuwak/edit?html,output

这里带有圆圈颜色表达式的图层样式根据

的值改变颜色
{
  'id': 'gl-draw-point-inactive',
  'type': 'circle',
  'filter': ['all',
    ['==', 'active', 'false'],
    ['==', '$type', 'Point'],
    ['==', 'meta', 'feature'],
    ['!=', 'mode', 'static']
  ],
  'paint': {
    'circle-radius': 12,
    'circle-blur': 0.5,      
    'circle-color': ["case",
        ['!',['has', 'isProcessed']], '#FF0000',
        '#214AED'
      ]
  }

我的数据是geojson,其属性'isProcessed'定义为not。

当我最初加载geojson时,这部分工作正常。

当我更改为所选功能添加prroperty时引发的问题

我通过执行以下操作添加了该功能的属性'isProcessed':

selectedFeature = this.draw.getSelected();
selectedFeature.features[0].properties.isProcessed = true;
this.draw.add(selectedFeature);

但更新功能的颜色不会改变。

我错过了一步?

由于

1 个答案:

答案 0 :(得分:1)

  

如果opts.userProperties设置为true,则功能的属性也可用于样式设置。所有用户属性都以user_为前缀,以确保它们不与Draw属性冲突。

[https://github.com/mapbox/mapbox-gl-draw/blob/master/docs/API.md#styling-draw]

因此,您需要在样式中为属性添加user_前缀:

'paint': {
    'circle-radius': 12,
    'circle-blur': 0.5,      
    'circle-color': ["case",
        ['!',['has', 'user_isProcessed']], '#FF0000',
        '#214AED'
      ]
}

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