mapbox-gl-js 过滤器或数据驱动属性

Question

这个问题是给了解 mapbox-gl-js 内部工作原理的人的。

用例：我们想要根据属性区域显示具有 2 种不同颜色的 2 个多边形。

目前，使用 mapbox-gl-js，您有 2 种根据数据定义样式的方法：

使用过滤器：

{
  "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"
}

使用数据驱动风格属性

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

我认为最好的选择是方法 2，因为我们只需要创建一种样式而不是两种。

但是如果要绘制 20 或 200 个不同的区域呢？哪种解决方案在性能方面最好？

Answer 1

如果定义 20-200 个图层，地图渲染会变慢...因此当然将它们视为单个图层并使用数据驱动样式是更好的方法。

你可以看看documentation

mapbox-gl-js 过滤器或数据驱动属性

mapbox-gl-js filter or data-driven properties

javascript

performance

mapbox

mapbox-gl

mapbox-gl-js