mapboxgl-js过滤器或数据驱动的属性

Question

这个问题是为了解mapbox gl-js内部工作方式的人提出的。

用例：我们希望根据属性区域显示2个具有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层，贴图渲染会变慢。。。因此，将它们视为单层并使用数据驱动的样式当然是一种更好的方法。

你可以看一下文档