Leaflet中使用indexOf()/search()实现筛选功能失效问题排查

问题背景 #

基于Leaflet框架通过AJAX加载GeoJSON数据的地图，需通过3个复选框实现Marker筛选逻辑：

• 每个Marker的types属性为空格分隔的字符串（示例：" soft scoop shake"、" soft scoop"），包含"soft"、"scoop"、"shake"任意组合
• 当前问题：使用==判断时仅能匹配完全一致的字符串，无法实现「勾选单个选项时，显示所有包含该选项的Marker」；改用indexOf()后功能完全失效，无Marker加载

核心问题分析 #

1. 原代码将选中选项拼接为字符串，若勾选顺序与Marker的types值顺序不一致，会导致匹配失败
2. 直接使用字符串匹配无法灵活处理“包含所有选中选项”的逻辑

修复方案 #

逻辑调整 #

• 放弃字符串拼接，将选中的筛选选项存入数组，避免顺序依赖
• 检查Marker的types是否包含所有选中的选项
• 保留原有规则：未勾选时显示所有Marker，包含全部三个值的Marker始终显示

修正后的代码 #

var geojsonLayer = new L.GeoJSON.AJAX("data/map.geojson", {
    pointToLayer: pointToLayer,
    filter: icefilter
});     

function icefilter(json) {
  // 收集所有选中的筛选选项到数组
  var selectedTypes = [];
  $("input[name=icetype]").each(function () {
    if (this.checked) {
      selectedTypes.push(this.value);
    }
  });

  var att = json.properties.types;
  // 未勾选任何选项，显示所有Marker
  if (selectedTypes.length === 0) {
    return true;
  }
  // 包含全部三个值的Marker始终显示
  if (att === " soft scoop shake") {
    return true;
  }
  // 检查Marker的types是否包含所有选中的选项
  return selectedTypes.every(function(type) {
    return att.includes(" " + type); // 加空格避免部分匹配
  });
}

$("input[name=icetype]").click(function () {
  clusterLayer.clearLayers();
  geojsonLayer.refresh();
  locationList();
});

关键说明 #

• selectedTypes.every()方法确保所有选中的选项都存在于Marker的types中，满足多选项组合筛选需求
• att.includes(" " + type)通过添加前缀空格，避免出现部分匹配（例如防止"scoop"误匹配到类似"scoops"的字符串）
• 数组形式的筛选条件不受选项勾选顺序影响，逻辑更稳定

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