Jquery Deferred를 사용하여 여러 JSON 데이터 호출

Question

지연된 객체로 여러 JSON 데이터를 가져 오려고합니다. 개별 일 동안 JSON 파일이 있습니다. 각 날에는 점, 선 및 다각형에 대한 데이터가 있습니다. jQueryUI 슬라이더를 사용하여 개별 일을 시각화합니다. 예를 들어 슬라이더의 값이 1 인 경우 day1 데이터 (점, 선 및 다각형) 만 시각화해야하고 day2의 경우 day2와 관련된 모든 점, 선 및 다각형 만 시각화해야합니다.

내 코드에 어떤 문제가 있는지 알 수 없지만 필요한 데이터를 제공하지 않습니다. 최신 데이터/병합 된 데이터가 표시됩니다. 도와주세요.

$(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); 
    } 
});