使用切换列表过滤多边形，并使用Mapbox GL JS单击以显示弹出窗口

如何解决使用切换列表过滤多边形，并使用Mapbox GL JS单击以显示弹出窗口

我试图为我的数据重现此示例“ [通过替换列表过滤符号] [1]”，这是巴西的州。我按“南部，东南部，中西部，北部和东北部”行政区域对它们进行了分组。到目前为止，我已经设法使其正常工作，切换列表正常工作。

但是，我想在单击状态时显示一个带有名称的弹出窗口，该弹出窗口可以工作，但是在同一位置显示了多个弹出窗口，而不仅仅是一个。

例如，如果我单击地图下方的州“南里奥格兰德州”，则三个弹出窗口将一个显示在另一个窗口的上方，因为在南部地区，存在三个状态。如果单击“圣保罗”，则会显示4个弹出窗口，因为东南地区有4个州，依此类推。 我仍在学习javascript，找不到解决方案。 这是一个带有代码的codepen： https://codepen.io/hugonbgg/pen/JjXGjgw

<script>

   var filterGroup = document.getElementById('filter-group');
        var map = new mapboxgl.Map({
            container: 'map',style: 'mapbox://styles/mapbox/light-v10',center: [-55.5,-13.5],zoom: 4
        });

        map.on('load',function () {
            d3.json(
                'https://raw.githubusercontent.com/hugonbgg/hugonbgg.github.io/master/de-olho-nos-ruralistas/Desenvolvimento/Duvidas/UFs.geojson?token=ACVPPYLU726YPFTNLVOIPMK7HVMQA',function (err,UFs) {
                    if (err) throw err;
                    // Add a GeoJSON source containing place coordinates and information.
                    map.addSource('UFs',{
                        'type': 'geojson','data': UFs
                    });

                    UFs.features.forEach(function (feature) {
                        var symbol = feature.properties['NM_REGIAO'];
                        var layerID = 'poi-' + symbol;

                        // Add a layer for this symbol type if it hasn't been added already.
                        if (!map.getLayer(layerID)) {
                            map.addLayer({
                                'id': layerID,'type': 'fill','source': 'UFs','layout': {},'paint': {
                                    'fill-color': 'brown','fill-opacity': 0.3
                                },'filter': ['==','NM_REGIAO',symbol]
                            });

                            // Add checkbox and label elements for the layer.
                            var input = document.createElement('input');
                            input.type = 'checkbox';
                            input.id = layerID;
                            input.checked = true;
                            filterGroup.appendChild(input);

                            var label = document.createElement('label');
                            label.setAttribute('for',layerID);
                            label.textContent = symbol;
                            filterGroup.appendChild(label);

                            // When the checkbox changes,update the visibility of the layer.
                            input.addEventListener('change',function (e) {
                                map.setLayoutProperty(
                                    layerID,'visibility',e.target.checked ? 'visible' : 'none'
                                );
                            });
                        }
                        // When a click event occurs on a feature in the states layer,open a popup at the
                        // location of the click,with description HTML from its properties.
                        map.on('click',layerID,function (e) {
                            new mapboxgl.Popup()
                                .setLngLat(e.lngLat)
                                .setHTML(e.features[0].properties.NM_UF)
                                .addTo(map);
                        });

                        // Change the cursor to a pointer when the mouse is over the places layer.
                        map.on('mouseenter',function () {
                            map.getCanvas().style.cursor = 'pointer';
                        });

                        // Change it back to a pointer when it leaves.
                        map.on('mouseleave',function () {
                            map.getCanvas().style.cursor = '';
                        });

                    });
                });
        });
    </script> ```



  [1]: https://docs.mapbox.com/mapbox-gl-js/example/filter-markers/