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 是更好的方法。

你可以看看文档