Web Map中JS切换按钮失效，无法切换图层属性求助

以下是针对你代码问题的具体修正方案：

1. 修复变量声明与全局污染问题 #

你的filterAccess未用let/const声明，会默认成为全局变量，容易引发意外冲突，先补上声明：

let filterAccess = ['all']; // 初始设置为显示全部要素

2. 简化过滤逻辑与代码冗余 #

原代码中多个else if判断可以合并，直接利用单选框的value值生成过滤规则，同时优化"显示全部"的逻辑（Mapbox中['all']表示匹配所有要素，比依赖不存在的placeholder更可靠）：

// 替换原有的事件监听逻辑
document.querySelectorAll('input[name="toggle"]').forEach(radio => {
    radio.addEventListener('change', (event) => {
        const type = event.target.value;
        console.log(type);
        
        if (type === "all") {
            filterAccess = ['all'];
        } else {
            filterAccess = ['==', ['get', 'type'], type];
        }
        
        map.setFilter("Whisky", filterAccess);
    });
});

3. 关键验证点 #

• 确认图层ID：检查你的Mapbox图层ID确实为"Whisky"，与map.setFilter中的参数完全一致。
• 字段值匹配：确保数据中type字段的取值（大小写、拼写）和单选框的value完全对应，比如数据里是"open"就不能用"Open"作为过滤值。
• 控制台排查：打开浏览器开发者工具（F12），查看是否有map未定义、图层不存在这类报错。

完整修正后的JS代码 #

let filterAccess = ['all'];

document.querySelectorAll('input[name="toggle"]').forEach(radio => {
    radio.addEventListener('change', (event) => {
        const type = event.target.value;
        console.log(type);
        
        filterAccess = type === "all" ? ['all'] : ['==', ['get', 'type'], type];
        
        map.setFilter("Whisky", filterAccess);
    });
});

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