javascript - 如何根据属性值过滤 MapBox 热图中的点？

Question

假设我有一个基本的 mapbox 热图。构建此热图的矢量瓦片的 geojson 看起来像这样:

{"type":"FeatureCollection",
    "features":[
         {"type":"Feature","properties":{"dbh":0, "icon-type": "bike"},"geometry":{"type":"Point","coordinates":[-79.91746,40.44356]}},
         {"type":"Feature","properties":{"dbh":12, "icon-type": "bike"},"geometry":{"type":"Point","coordinates":[-79.94606,40.44961]}},
         {"type":"Feature","properties":{"dbh":6, "icon-type": "cat"},"geometry":{"type":"Point","coordinates":[-79.96474,40.46283]}},
         {"type":"Feature","properties":{"dbh":2, "icon-type": "dog"},"geometry":{"type":"Point","coordinates":[-80.00949,40.42532]}}
     ]
}

我了解如何按照此处的教程显示热图:

https://docs.mapbox.com/help/tutorials/make-a-heatmap-with-mapbox-gl-js/

请注意，geojson 中的每个功能都有一个 icon-type 属性。我想动态地告诉我的热图只显示数据中具有特定图标类型值(例如“自行车”或“猫”)的点。

我怎样才能做到这一点？

Answer 1

您可以使用 filter 实现此目的在层配置中，如 this exmple 中所用.

在你的情况下，它会是这样的:

map.addLayer({
  id: 'heatmap-layer',
  type: 'heatmap',
  source: 'your-source',
  paint: { ... },
  filter: ['==', ['get', 'icon-type'], 'cat']
});

'=='仅允许下两个参数相等的特征。

'get'用于访问要素属性，所以 ['get', 'icon-type']解析为 icon-type特征的属性。

'cat'是字符串文字。