mapbox-gl-js 過濾器或數據驅動屬性

Question

這個問題是針對知道 mapbox-gl-js 如何在內部工作的人的。

用例：我們希望根據屬性區域顯示具有 2 個不同 colors 的 2 個多邊形。

目前，使用 mapbox-gl-js，您有兩種根據數據定義樣式的方法：

1. 使用過濾器：

{
  "id": "region_sud",
  "filter": [
    "all",
    [
      "==",
      "sud",
      ["get", "region"]
    ]
  ],
  "paint": {
    "fill-color": "#F27E00",
  },
  "source": "region",
  "source-layer": "region",
  "type": "fill"
},{
  "id": "region_nord",
  "filter": [
    "all",
    [
      "==",
      "nord",
      ["get", "region"]
    ]
  ],
  "paint": {
    "fill-color": "#007E00",
  },
  "source": "region",
  "source-layer": "region",
  "type": "fill"
}

2. 使用數據驅動的樣式屬性

{
  "id": "region",
  "paint": {
    "fill-color": [
      "case",
      ["==", ["get", "region"],"sud"],
      "#F27E00",
      ["==", ["get", "region"],"nord"],
      "#007E00",
      "#000000",
    ],
  },
  "source": "region",
  "source-layer": "region",
  "type": "fill"
}

我想說最好的選擇是方法 2，因為我們只需要創建一種樣式而不是 2。

但是，如果要繪制 20 或 200 個不同的區域怎么辦。 哪種解決方案在性能方面是最好的？

Answer 1

如果定義 20-200 層，map 渲染會變慢……所以當然將它們視為單層並使用數據驅動的 styles 是更好的方法。

你可以看看文檔