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

最新推荐文章于 2023-04-18 14:16:07 发布

原创最新推荐文章于 2023-04-18 14:16:07 发布 · 2.3k 阅读

1 ·

本内容遵循CC 4.0 BY-SA版权协议

收录于

minemap

当前文章被收录于：

minemap

10 篇文章 3 人学习

订阅专栏查看详情

当前文章被以下社区和专栏收录：

本文介绍如何利用数据驱动的特性在Mapbox中进行矢量渲染，通过设置paint模式和使用get与match表达式来动态调整地图元素的颜色与宽度。同时，详细解释了如何在点击事件中更新渲染样式，实现地图元素的动态交互。

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/