如何在MAPBOX中为过滤器筛选出的点图层结果设置不同颜色

实现方案 #

你可以通过动态修改图层的paint属性或者在图层样式中配置条件色表达式两种方式实现需求，以下是可直接复用的修改方案：

方案1：和现有筛选逻辑联动修改颜色

在你现有过滤器的change事件回调中，同步修改filtros图层的circle-color属性即可，代码修改如下：

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"];
    // 全量展示时恢复默认颜色
    map.setPaintProperty('filtros', 'circle-color', '#03047D');
  } else if (zona === "rural") {
    filterZona = ["match", ["get", "zona"], ["Rural"], true, false];
    // 筛选农村时恢复默认颜色
    map.setPaintProperty('filtros', 'circle-color', '#03047D');
  } else if (zona === "urbana") {
    filterZona = ["match", ["get", "zona"], ["Urbana"], true, false];
    // 筛选城镇时修改为目标颜色，示例为红色#ff0000，可自行替换色值
    map.setPaintProperty('filtros', 'circle-color', '#ff0000');
  } else {
    console.log("error");
  }
  
  map.setFilter("filtros", [
    "all",
    filterZona,
    filterRegion,
    filterComp,
    filterCat1,
  ]);
});

方案2：图层内置条件色规则

直接在创建filtros图层的时候配置circle-color的条件表达式，只要点的zona属性为Urbana就自动变色，不需要和筛选逻辑绑定：

map.addLayer({
  id: "filtros",
  type: "circle",
  source: 'sin_cluster',
  filter: ['has', 'point_count'],
  paint: {
    'circle-color': [
      'case',
      ['==', ['get', 'zona'], 'Urbana'],
      '#ff0000', // Urbana对应的自定义颜色
      '#03047D' // 其他情况默认颜色
    ],
    'circle-radius': 7
  }
});

内容的提问来源于stack exchange，提问作者aguito1877