时间戳

首页 > 解决方案 > 更改属性值时，mapbox会动态更改圆圈颜色

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

问题描述

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

我使用 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'
      ]
  }

我的数据是geojson，其属性“isProcessed”未定义。

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

当我将添加属性更改为所选功能时出现的问题

我通过执行以下操作添加功能的属性“isProcessed”：

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

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

我错过了哪一步？

谢谢

标签： propertiesmapbox-gl-jsmapbox-gl-draw

解决方案

如果 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/ ]

推荐阅读