Mapbox JS GL：按特征过滤点

Question

我有一个 mapbox 地图，它显示来自 GEOJson 源的许多点，具有多个特征和独立类别。我希望能够按这些功能进行过滤。

理想情况下，当我单击复选框过滤器时，只有相关点应在图层上保持可见。

所以我想在点击一个复选框后，地图点应该全部被清除并且地图应该只用相关点重新绘制。为此我需要知道

如何在点击复选框后循环遍历所有活动点并踢出所有不需要的点

或

清除地图上的所有点
load/add只过滤了一部分点到地图
刷新地图数据。

我在 mapbox 页面上找到的所有示例都对类别使用了不同的图层，并切换了这些图层的可见性。这假设一个点一次只能属于一个类别。但在我的例子中，有几个相互独立的类别（类似于“颜色”、“形状”、“重量”等类别）。所以我需要单独过滤点。

知道如何解决这个问题吗？

Answer 1

根据文档，您可以使用 filters 实现此目的。过滤器写成 expressions.

在您的情况下，您想单独过滤这些点。您不必清除所有点或刷新地图数据。

假设我们有 3 个类别：color、shape 和 weight。我们假设您的 GeoJSON 源是这样的：

this.map.addSource('points-source', {
  type: 'geojson',
  data: { 
    type: 'FeatureCollection', 
    features: [
      {
        type: 'Feature',
        geometry: {
          type: 'Point',
          coordinates: [lng, lat],
        },
        properties: {
          color: 'blue',
          weight: 34,
          shape: 'shape1'
        }
      },
      ...
    ]
})

您可以直接在层定义中过滤点，具体取决于每个点的属性：

this.map.addLayer({
  id: 'points-layer',
  type: 'symbol',
  filter: ['all', ['==', 'color', 'blue'], ['>=', 'weight', 40], ...],
  source: 'points-source',
  paint: { ... }
})

您还想使用复选框过滤器动态过滤点。在这种情况下，您可以使用 setFilter() 函数设置特定图层的过滤器：

this.map.setFilter(
   'points-layer', 
   ['all', ['==', 'color', 'red'], ['>=', 'weight', 10], ...]
)

Mapbox JS GL：按特征过滤点

Mapbox JS GL: Filter points by features

javascript

filter

geojson

mapbox-gl-js