Leaflet中利用多选框筛选GeoJSON数据技术求助

我是Leaflet新手，正在使用Leaflet Ajax插件尝试通过多选框筛选GeoJSON数据，已编写按钮点击事件代码、筛选函数及GeoJSON对象实例，现寻求相关技术帮助。

按钮代码 #

$("#btnFltGeralALL").click(function(){
    $("input[name=fltGeral]").prop('checked',true);
});

$("#btnFltGeralNONE").click(function(){
    $("input[name=fltGeral]").prop('checked',false);
});

$("#btnFltGeral").click(function(){
    arDoencasEnd = [];
    doencas.refresh();
});

筛选函数 #

function fltDoencas (json){
    var arProjectFilters=[];
    $("input[name=fltGeral]").each(function(){
        if(this.checked) {
            arProjectFilters.push(this.value);
        }
    });
    var atributos = json.properties;
    switch (atributos.type){
        case "1835":
            return (arProjectFilters.indexOf('1835')>=0);
            break;
        case "1836":
            return (arProjectFilters.indexOf('1836')>=0);
            break;
        case "1839":
            return (arProjectFilters.indexOf('1839')>=0);
            break;
        case "F":
            return (arProjectFilters.indexOf('F')>=0);
            break;
        case "M":
            return (arProjectFilters.indexOf('M')>=0);
            break;
        case "Disenteria":
            return (arProjectFilters.indexOf('Disenteria')>=0);
            break;
        case "Tísica":
            return (arProjectFilters.indexOf('Tísica')>=0);
            break;
        case "N/A":
            return (arProjectFilters.indexOf('N/A')>=0);
            break;
     }
};

GeoJSON对象实例 #

doencas = L.geoJSON.ajax('data/Doencas.geojson',{filter:fltDoencas, pointToLayer:returnDoencas}).addTo(meumapa);

优化与修正建议 #

1. 简化筛选函数：原代码的switch语句可直接用数组包含判断替代，大幅精简代码且逻辑更清晰：

function fltDoencas(json) {
    // 直接获取选中的多选框值
    const arProjectFilters = $("input[name=fltGeral]:checked").map(function() {
        return this.value;
    }).get();
    const atributos = json.properties;
    // 判断当前要素的type是否在筛选数组中
    return arProjectFilters.includes(atributos.type);
}

2. 处理未匹配的type：原函数中如果atributos.type不在case列表中，会返回undefined，Leaflet会自动排除这类要素。若需保留未匹配要素，可在函数末尾添加默认返回逻辑：

return true; // 或根据需求返回false

3. 提升用户体验：监听多选框的change事件，无需点击筛选按钮即可自动刷新筛选结果：

$("input[name=fltGeral]").on('change', function() {
    doencas.refresh();
});

4. 优化数据请求：doencas.refresh()会重新请求GeoJSON数据，若数据量较大，建议缓存本地数据避免重复请求：

// 先加载数据并缓存
let geojsonData;
$.getJSON('data/Doencas.geojson', function(data) {
    geojsonData = data;
    doencas = L.geoJSON(geojsonData, {
        filter: fltDoencas,
        pointToLayer: returnDoencas
    }).addTo(meumapa);
});

// 自定义刷新筛选的方法
function refreshFilter() {
    doencas.clearLayers();
    doencas.addData(geojsonData);
}

// 替换按钮事件中的doencas.refresh()
$("#btnFltGeral").click(function(){
    arDoencasEnd = [];
    refreshFilter();
});

内容的提问来源于stack exchange，提问作者Ana Beatriz Lamego Viana