mapbox/minemap 改变选中矢量的颜色

1记录两个知识点，一个是数据驱动渲染矢量。paint的模式line-color设置为get模式。

'line-color': ['get', 'color'],

会自动从数据的属性里面读取。

layer.paint={
  'line-color': ['get', 'color'],
  "line-width": {
    'property': 'flow',
    'stops': [
      [100, 20],
      [200, 30],
      [300, 40],
      [400, 50],
      [500, 60]
    ]
  },
}

2 步入正题：

点击事件放在click中

map.on("click",function (e) {
  var features = map.queryRenderedFeatures(e.point, { layers: ['line-layer'] });
 
  features.map( feature => {

    map.setPaintProperty('line-layer','line-color',[
      'match',//匹配模式
      ['get','id'],//匹配的属性值名称，id，可以从feature的属性得到
      'sss', //要匹配的值
      'rgb(255,0,0)',//匹配中的颜色
      'rgb(255,0,0)'//未匹配上的颜色
    ])

  })
 
})

match的使用参见style Specification中的expressions

 

https://docs.mapbox.com/mapbox-gl-js/example/data-driven-circle-colors/