删除 geojson 图层 Mapbox.js/Leaflet.js

Question

我一次删除多个 geojson 层时遇到问题。当我将它们保留为要素图层时，每个添加的图层都会有记忆，一个接一个。但是当它们成为标记层时，只有最后单击的层被删除。

我试过将它们添加到一个组并在该组上调用 clearLayers，但这仍然只删除最后添加的层，而不是全部。也尝试传递一个 id，但这似乎也不起作用。

    $(function() {

        var geojson;

        var map = L.mapbox.map('map')
            .setView([29.9629, -90.0603], 6);

        var filters = document.getElementById('filters');

        var layerTwo = L.mapbox.featureLayer()
            .loadURL('panel/data/tamorethan5.geojson')
            .on('ready', layer)
        var layerOne = L.mapbox.featureLayer()
            .loadURL('panel/data/talessthan5.geojson')
            .on('ready', layer)
        var layerThree = L.mapbox.featureLayer()
            .loadURL('panel/data/palessthan5.geojson')
            .on('ready', layer)
        var layerFour = L.mapbox.featureLayer()
            .loadURL('panel/data/pamorethan5.geojson')
            .on('ready', layer)

        function layer() {
            var assetLayerGroup = new L.LayerGroup();

            var layer = this
            var name = layer.getGeoJSON().name;
            var item = filters.appendChild(document.createElement('div'));
            var checkbox = item.appendChild(document.createElement('input'));
            var label = item.appendChild(document.createElement('label'));
            checkbox.type = 'checkbox';
            checkbox.name ='radio';
            checkbox.id = 'myCheckbox';
            checkbox.value = name;
            label.innerHTML = name;
            label.class = label;
            label.setAttribute('for', name);
            checkbox.addEventListener('change', update);

            function update(val) {
                if (checkbox.checked) {
                console.log(layer)
                drawLocations(layer._geojson)
                } else {
                newMapLayer.clearLayers();

                }
            }

            drawLocations = function(layer) {
                L.stamp(layer)
                newMapLayer = L.geoJson(layer, {
                    style: style,
                    onEachFeature: onEachFeature,
                    pointToLayer: function(feature, latlng) {
                        var rad = 3;
                        var col = getColor(feature.properties, 'status');
                        return L.circleMarker(latlng, {
                            radius: rad,
                            fillColor: "#ff7800",
                            stroke: true,
                            weight: 2,
                            opacity: 0.8,
                            fillOpacity: 0.8,
                            className: "circle"
                        });
                    }


                }).addTo(map);

            };
        } //end layer

Answer 1

嗯，好的 - 需要或建议进行一些调整：

drawLocations(layer._geojson)

传单或 Mapbox 中任何以下划线开头的内容都应被视为禁区。请改用 .getGeoJSON 方法。

drawLocations(layer.getGeoJSON());

看起来您实际上并没有向 assetLayerGroup 添加图层。如果你想这样做，你会打电话给

var assetLayerGroup = L.layerGroup().addTo(map);

右在之后

    var map = L.mapbox.map('map')
        .setView([29.9629, -90.0603], 6);

行，而不是在 L.geoJson 层上调用 .addTo(map)，而是调用 .addTo(assetLayerGroup).

然后调用 assetLayerGroup.clearLayers() 将删除所有添加的图层。

删除 geojson 图层 Mapbox.js/Leaflet.js

Removing geojson layers Mapbox.js/Leaflet.js

leaflet

mapbox