javascript - 如何通过在引导多重选择器中选择选项来切换地图框中的显示符号？

Question

以下是我的代码，建议将符号图层添加到现有地图：此代码已从https://docs.mapbox.com/mapbox-gl-js/example/filter-markers/引用

for(var i = 0; i < whole_data.length; i++)     // 'whole_data' is actual data pulling from API
        {
            var symbol = whole_data_geo.features[i].properties.icon;   // icon : mountain OR volleyball within data. 'whole_data_geo' is geoJSON data converted from 'whole_data'.
            var layerID = 'poi-' + symbol;

            if (!map.getLayer(layerID)) {
                map.addLayer({
                    'id': layerID,
                    'type': 'symbol',
                    'source': 'places',
                    'layout': {
                    'icon-image': symbol + '-15',
                    'icon-allow-overlap': false,
                    'icon-size': 2
                    },
                    'filter': ['==', 'icon', symbol]
                });
            }

        }           

我的代码的不同之处在于我正在尝试使用引导多重选择器设置切换。

for(var i = 0; i < unique_status_reasons.length; i++){
            $('.dropdown2.selectpicker').append($(`<option>${unique_status_reasons[i]}</option>`).selectpicker({
            // style: 'btn-info',
            size: 4,
            maxOptions: 2
          }));
        }

HTML 内容如下图所示

我的引导多选择器事件处理代码如下所示：

$('.dropdown2 .selectpicker').change(function(e){
            var all_dropdown1 = $('.dropdown2 .selectpicker option[value=all]');    
            console.log(all_dropdown1);
            map.setLayoutProperty(layerID, 'visibility', e.target ? 'visible' : 'none');  // Confused over here with value of e.target as it is not a checkbox.
        });

现在我有 3 个问题：

1. 如何构建事件处理机制以从引导多个选择器的多个输入选择中切换符号显示。

2. size : 4, maxOptions : 2 在我的代码中不起作用。由于我必须限制下拉列表中选择器选项的大小，如何使这项工作有效？

3. 我想添加另一个相同的引导多个选择器，它可以在选择其中的项目时进一步过滤更多符号。如何做到这一点？

感谢您花时间阅读本文，我对您为此付出的努力表示重视和赞赏。感谢stackoverflow社区。

标签： javascripthtmljquerybootstrap-4mapbox-gl-js