使用 Jquery Deferred 调用多个 JSON 数据

Question

我正在尝试使用延迟对象获取多个 JSON 数据。我有个别日子的 JSON 文件。在每一天，我都有点、线和多边形的数据。我有 jQueryUI 滑块来可视化个别日子。例如，如果滑块的值为 1，则只需要可视化第 1 天的数据（点、线和多边形），而对于第 2 天，应仅可视化与第 2 天相关的所有点、线和多边形，依此类推。

我不知道我的代码有什么问题，但它没有提供所需的数据。显示最新数据/合并数据。 帮帮我。

$(document).ready(function () {

var map = L.map("map", {
    center: [27.6419412, 85.1224152],
    zoom: 13,
    doubleClickZoom: true
});

L.tileLayer('http://{s}.tiles.wmflabs.org/bw-mapnik/{z}/{x}/{y}.png', {
    attribution: '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>'
}).addTo(map);

L.control.scale().addTo(map);

var markerCluster = L.markerClusterGroup({
    showCoverageOnHover: false
});

function TableContent(jsonData) {
    var content = $('<div></div>').addClass('table-content');
    for (row in jsonData) {
        var tableRow = $('<div></div>').addClass('table-row').append(function () {
            var key = row;
            if (!(key === "@uid" || key === "@changeset" || key === "@version" || key === "@timestamp" || key === "@id")) {
                return jsonData[row] ? $("<div></div>").text(key).append($("<div></div>").text(jsonData[row])) : "";
            }
        });
        tableRow.prependTo(content).addClass(row);
    }
    return $(content)[0];
}

function Table(json) {
    return $('<div></div>').append($('<div class="title"></div>').text(json.type)).addClass('table-container').append(new TableContent(json.data));
}

var pointBuild = L.geoJson(null, {
    pointToLayer: function (feature, latlng) {
        var deferred = $.Deferred();
        marker = L.marker(latlng, {
            icon: L.icon({
                iconUrl: 'img/marker.png',
                iconSize: [30, 30],
                iconAnchor: [15, 15]
            }),
            riseOnHover: true,
            title: "This is a Point feature. Click to have a look at some of its attributes"
        });
        markerCluster.addLayer(marker);
        deferred.resolve();
        map.fire('cluster-hover');
        return marker;
    },
    onEachFeature: function (feature, layer) {
        var popup = L.popup();
        layer.on('click', function (e) {
            var deferred = $.Deferred();
            popup.setLatLng(e.latlng);
            popup.setContent(new TableContent(feature.properties));
            popup.openOn(map);
            deferred.resolve();
        });
    }
});

var myStyle = {
    weight: 2,
    opacity: 1,
    color: '#FF0000',
    dashArray: '3',
    fillOpacity: 0.3,
    fillColor: '#FA8072'
};

var wayBuild = L.geoJson(null, {
    style: myStyle,
    onEachFeature: function (feature, layer) {
        var popup = L.popup();
        layer.on('click', function (e) {
            var deferred = $.Deferred();
            popup.setLatLng(e.latlng);
            popup.setContent(new TableContent(feature.properties));
            popup.openOn(map);
            deferred.resolve();
        });
    }
});

function pointLinePolygon(receivedPoints, receivedLines, receivedPolygon, day) {

    var points_, lines_, polygon_;
    var deferredPoint = $.Deferred();
    var deferredLine = $.Deferred();
    var deferredPolygon = $.Deferred();

    $.getJSON(receivedPoints, function (data) {

        setTimeout(function () {
            pointBuild.addData(data);
            points_ = markerCluster;
            deferredPoint.resolve();
        }, 0);
    });

    $.getJSON(receivedLines, function (data) {
        setTimeout(function () {
            lines_ = wayBuild.addData(data);
            deferredLine.resolve();
        }, 0);
    });

    $.getJSON(receivedPolygon, function (data) {
        setTimeout(function () {
            polygon_ = wayBuild.addData(data);
            deferredPolygon.resolve();
        }, 0);
    });

    $.when(deferredPoint, deferredLine, deferredPolygon).done(function () {

        var featureGroup = L.layerGroup([points_, lines_, polygon_]);
        featureGroup.addTo(map);
        $.map(wayBuild._layers, function (layer, index) {
            $(layer._container).find("path").attr("title", "This is a way feature. Click to have a look at some of its attributes.");
        });
    });

}

map.on('cluster-hover', function () {
    setTimeout(function () {
        $("#map").find("div.marker-cluster").attrByFunction(function () {
            return {
                title: "This is a Cluster of " + $(this).find("span").text() + " Point features. Click to zoom in and see the Point features and sub-clusters it contains."
            }
        });
    }, 0);
});

var tooltip = $('<div id="toolTipSlider" />').hide();

$('#slider').slider({
    min: 1,
    max: 4,
    slide: function (event, ui) {
        if (ui.value === 1) {
            tooltip.text("Day " + ui.value);
            $.ajax({
                type: 'post',
                success: function () {
                    pointLinePolygon("data/day1/points.geojson", "data/day1/lines.geojson", "data/day1/polygon.geojson", "Day 1");
                }
            });
        }
        else if (ui.value === 2) {
            tooltip.text("Day " + ui.value);
            $.ajax({
                type: 'post',
                success: function () {
                    pointLinePolygon("data/day2/points.geojson", "data/day2/lines.geojson", "data/day2/polygon.geojson", "Day 2");
                }
            });
        }

        else if (ui.value === 3) {
            tooltip.text("Day " + ui.value);
            $.ajax({
                type: 'post',
                success: function () {
                    pointLinePolygon("data/day3/points.geojson", "data/day3/lines.geojson", "data/day3/polygon.geojson", "Day 3");
                }
            });
        }

        else if (ui.value === 4) {
            tooltip.text("Day " + ui.value);
            $.ajax({
                type: 'post',
                success: function () {
                    pointLinePolygon("data/day4/points.geojson", "data/day4/lines.geojson", "data/day4/polygon.geojson", "Day 4");
                }
            });
        }
    }
}).find(".ui-slider-handle").append(tooltip).hover(function () {
    tooltip.show();
});

});

$.fn.attrByFunction = function (a) {
return $(this).each(function () {
    $(this).attr(a.call(this));
});
};

Answer 1

我通过每次添加新图层时清除地图图层来解决问题。

map.eachLayer(function (layer) {
   if (layer.feature) {
        map.removeLayer(layer);
   }
});