如何在MAPBOX中绘制不同颜色的滤镜结果

Question

我正在使用mapbox-gl-js库我有一些过滤器点层,但其中一个过滤器油漆用另一种颜色。这可能吗?我已经检查了mapbox-gl-js的文档，但我找不到任何具体的东西。具体来说，当我过滤"厄巴纳"时，我想用另一种颜色绘制。选择。

这就是我创建滤镜的方法

document
.getElementById("filters")
.addEventListener("change", function (e) {
var zona = e.target.value;
map.setLayoutProperty('pnud', 'visibility', 'none' );
map.setLayoutProperty('cluster-count', 'visibility', 'none' );
map.setLayoutProperty('unclustered-point', 'visibility', 'none' );
map.setLayoutProperty('participacion_75', 'visibility', 'none' );
map.setLayoutProperty('filtros', 'visibility', 'visible' );


// update the map filter
if (zona === "all") {
filterZona = ["!=", ["string", ["get", "zona"]], "placeholder"];

} else if (zona === "rural") {
filterZona = ["match", ["get", "zona"], ["Rural"], true, false];

} else if (zona === "urbana") {
filterZona = ["match", ["get", "zona"], ["Urbana"], true, false];
} else {
console.log("error");
}

map.setFilter(["filtros"], [
"all",
filterZona,
filterRegion,
filterComp,
filterCat1,
]);
});

所以我创建了图层

map.addLayer({
id: "filtros",
type: "circle",
source: 'sin_cluster',
filter: ['has', 'point_count'],
paint: {
'circle-color': '#03047D',
'circle-radius': 7
}
});

Answer 1

您可以使用paint属性circle-color来实现这一点。

在下面的例子中，我们将颜色从geojson映射到ethnicity属性。每个种族值都有它下面的颜色。注意到最后它们是两个连续的颜色。"亚洲"的直属机构;属于"亚洲人";类别，而最后一个则只是为数据中可能出现的其他种族指定颜色。

'circle-color': [
'match',
['get', 'ethnicity'],
'White',
'#fbb03b',
'Black',
'#223b53',
'Hispanic',
'#e55e5e',
'Asian',
'#3bb2d0',
/* other */ '#ccc'
]

在这里找到文档。

在您的示例中，您将能够使用["get", "zona"]来指定Urbana的颜色。