Mapbox JS GL：按特征過濾點

Question

我有一個 mapbox map，它顯示來自 GEOJson 源的許多點，具有多個特征和獨立類別。 我希望能夠按這些功能進行過濾。

理想情況下，當我單擊復選框過濾器時，只有相關點應在圖層上保持可見。

所以我想在點擊一個復選框后，map 點應該全部清除，而 map 應該只用相關點重新繪制。 為此我需要知道

• 單擊復選框后如何遍歷所有活動點並踢出所有不需要的點

或者

1. 清除 map 中的所有點
2. 僅加載/添加點的過濾部分到 map
3. 刷新 map 數據。

我在 mapbox 頁面上找到的所有示例都對類別使用了不同的圖層，並切換了這些圖層的可見性。 這假設一個點一次只能屬於一個類別。 但在我的例子中，有幾個相互獨立的類別（類似於“顏色”、“形狀”、“重量”等類別）。 所以我需要單獨過濾這些點。

知道如何解決這個問題嗎？

Answer 1

根據文檔，您可以通過使用filters來實現。 過濾器被寫成表達式。

在您的情況下，您想單獨過濾這些點。 您不必清除所有點或刷新 map 數據。

假設我們有 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() function 設置特定圖層的過濾器：

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