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

Question

我正在尝试制作 mapbox 图层来更改圆圈的颜色当我更改值 a 属性时。但是圆圈的颜色没有改变。

我使用 mapbox-gl-draw

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

这里的circle-color表达式图层的样式根据

的值改变颜色

{
  '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'
      ]
  }

我的数据是具有属性 'isProcessed' 未定义的 geojson。

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

当我更改add property到selected feature时出现的问题

我添加了属性 'isProcessed' 功能：

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

但是更新后的特征颜色没有改变。

我错过了第几步？

谢谢

Answer 1

If opts.userProperties is set to true the properties of a feature will also be available for styling. All user properties are prefixed with user_ to make sure they do not clash with the Draw properties.

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

所以需要在styles中的属性加上user_前缀:

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

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

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

mapbox change circle color dynamically when changing property value

properties

mapbox-gl-js

mapbox-gl-draw

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

mapbox change circle color dynamically when changing property value

properties

mapbox-gl-js

mapbox-gl-draw

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