如何在使用Mapbox GL JS单击时关闭标记图层时关闭弹出窗口

Question

单击时标记图层关闭时，我无法关闭/删除弹出窗口。我曾尝试在onclick函数中使用popup.remove，但是没有太多运气将函数绑定到用于显示和隐藏标记图层的按钮。任何有关在关闭或隐藏标记图层时关闭弹出窗口的帮助将非常感激。

JS：

    // add popup to layer
    map.on('click', function (e) {
        var features = map.queryRenderedFeatures(e.point, {
            layers: ["high_camp"] // Add layers
        });

        if (!features.length) {
            return;
        }

        var feature = features[0];

        var popup = new mapboxgl.Popup({
            offset: {
                'top': [0, 0],
                'top-left': [0, 0],
                'top-right': [0, 0],
                'bottom': [0, -40],
                'bottom-left': [0, -40],
                'bottom-right': [0, -40],
                'left': [18, -22],
                'right': [-18, -22],
            }
        })
        .setLngLat(feature.geometry.coordinates)
        .setHTML(feature.properties.NAME)
        // Change attribute, properties.'Replace' (Uppercase)
        .addTo(map);
    });

    // Toggle high camp layer
    var togglehighcampId = ["high_camp"]; // Add layer

    document.getElementById("highcampIcon").onclick = function (e) { 
        // Change button name, getElementById('Replace')
        for (var index in togglehighcampId) {
            var clickedLayer = togglehighcampId[index];
            e.preventDefault();
            e.stopPropagation();

            var visibility = map.getLayoutProperty(clickedLayer, 'visibility');

            if (visibility === 'none') {
                map.setLayoutProperty(clickedLayer, 'visibility', 'visible');
                this.className = '';
            } else {
                this.className = 'on';
                map.setLayoutProperty(clickedLayer, 'visibility', 'none');
            }
        }

    };

Answer 1

也许您可以将弹出窗口保留在全局范围内，以便在onclick方法中访问它

像这样的东西：

    var popup;

    // add popup to layer
    map.on('click', function (e) {
        var features = map.queryRenderedFeatures(e.point, {
            layers: ["high_camp"] // Add layers
        });

        if (!features.length) {
            return;
        }

        var feature = features[0];

        popup = new mapboxgl.Popup({
            offset: {
                'top': [0, 0],
                'top-left': [0, 0],
                'top-right': [0, 0],
                'bottom': [0, -40],
                'bottom-left': [0, -40],
                'bottom-right': [0, -40],
                'left': [18, -22],
                'right': [-18, -22],
            }
        })
        .setLngLat(feature.geometry.coordinates)
        .setHTML(feature.properties.NAME)
        // Change attribute, properties.'Replace' (Uppercase)
        .addTo(map);
    });

    // Toggle high camp layer
    var togglehighcampId = ["high_camp"]; // Add layer

    document.getElementById("highcampIcon").onclick = function (e) { 
        // Change button name, getElementById('Replace')
        for (var index in togglehighcampId) {
            var clickedLayer = togglehighcampId[index];
            e.preventDefault();
            e.stopPropagation();

            var visibility = map.getLayoutProperty(clickedLayer, 'visibility');

            if (visibility === 'none') {
                map.setLayoutProperty(clickedLayer, 'visibility', 'visible');
                this.className = '';
            } else {
                this.className = 'on';
                popup.remove(); // REMOVE THE POPUP WHEN THE LAYER IS REMOVED
                map.setLayoutProperty(clickedLayer, 'visibility', 'none');
            }
        }

    };

PS：代码未经过测试