2013-08-29 7 views
8

मैं मानचित्र के लिए Leaflet.js का उपयोग कर रहा हूं। अब मैं मानचित्र से अतिरिक्त परतों को हटाना चाहता हूं। इनपुट # बटन पर क्लिक करके सभी चेक किए गए चेकबॉक्स को अनचेक में बदला जाएगा और सभी संबंधित परतों को मानचित्र से हटा दिया जाएगा।Leaflet.js: मानचित्र से कई परतों को कैसे हटाएं

मानचित्र से परत को निकालने के लिए परत की आईडी की आवश्यकता है। यह आईडी संबंधित चेकबॉक्स की आईडी के बराबर है। यही कारण है कि मैं सभी चेक किए गए चेकबॉक्स के आईडी प्राप्त करने के लिए jQuery का उपयोग करता हूं और ऑब्जेक्ट में अपना मान संग्रहीत करता हूं, यहां कुछ ओबीजे.आईडीएस कहा जाता है।

जब मैं एक परत यह जबकि console.log प्रदर्शित करता है वांछित मूल्य काम नहीं करता है दूर करने के लिए संग्रहीत मूल्य वैल उपयोग करने के लिए प्रयास करें। उदाहरण के लिए: mapcat52।

पिछली आईडी को मैप.removeLayer (mapcat52) जैसे कार्य में हार्ड कोड डालने के दौरान यह अपेक्षा के अनुसार काम करता है।

मेरे कोड या मेरे विचार में त्रुटि कहां है?
किसी भी मदद की बहुत सराहना की है।

एचटीएमएल

<input type="button" id="selectnone" value="deselect all" /> 

<!-- checkboxes --> 
<input id="mapcat52" type="checkbox" name="maplayer" class="maplayer"> 
<label for="mapcat52">Map Layer One</label> 

<input id="mapcat53" type="checkbox" name="maplayer" class="maplayer"> 
<label for="mapcat53">Map Layer Two</label> 

... 

जे एस:

$('#selectnone').click(function() { 
    var someObj = {}; 
    someObj.idsChecked = []; 

    $("input:checkbox").each(function() { 
     if ($(this).is(":checked")) { 

      someObj.idsChecked.push($(this).attr("id")); 
     } 
    }).attr('checked', false); 

    $.each(someObj.idsChecked,function(id, val) { 

      // displays the wanted value, e.g. "mapcat52" if checkbox with this id is checked 
      console.log(val); 

      // does not work: inserted value 
      map.removeLayer(val); 

      // works: hard coded value of the leaflet.js/input id 
      map.removeLayer(mapcat52); 
     }); 

}); 
+0

यह मदद कर सकता है: https://stackoverflow.com/questions/39186001/ कैसे-टू-क्लोज-ऑल-पॉपअप –

उत्तर

6

पत्रक एपीआई दस्तावेज़ http://leafletjs.com/reference.html#map-removelayer के अनुसार, removeLayer एक ILayer पैरामीटर लेता है: removeLayer(<ILayer> layer) लेकिन आप इसे एक स्ट्रिंग गुजर रहे हैं: $(this).attr("id")

ऐसा लगता है कि आपके पास पहले से एक चर में परत ऑब्जेक्ट है: mapcat52। आप परत वस्तुओं जब आपने उन्हें बनाया तो बचा सकता है, आईडी से उन्हें ढूंढ निकालेंगे removeLayer को पारित करने के लिए:

var layers = new Array(); 

// create layer 
var mapcat52 = new MyCustomLayer(latlng); 

// save to layers list 
layers["mapcat52"] = mapcat52; 
... 

// remove layers 
$.each(someObj.idsChecked, function(id, val) { 
    // look up layer object by id 
    var layerObj = layers[val]; 
    // remove layer 
    map.removeLayer(layerObj); 
}); 
+0

आपके सुझावों के लिए बहुत बहुत धन्यवाद। यह मेरे मामले में फिट लगता है। मैं जल्द ही कोशिश करूंगा। – LuNarez

16

मैं दूर करने के लिए सबसे आसान तरीका है/से मानचित्र का उपयोग किया जाएगा जोड़ने (टॉगल) परतों कहेंगे लेयर समूह

मानचित्र पर अलग-अलग परत जोड़ने से पहले, उन्हें लेयर ग्रुप में जोड़ें और उसके बाद उस परत को अपने मानचित्र में जोड़ें।

फिर जब आपको परतों को हटाना होगा, तो clearLayers() फ़ंक्शन को कॉल करें।

LayerGroup http://leafletjs.com/reference.html#layergroup

के लिए एपीआई बाहर की जाँच करें उदाहरण

var map = L.map('leafletMap', {minZoom:11}).setView([37.8, -96], 11); 
var assetLayerGroup = new L.LayerGroup(); 
var marker1 = L.marker([39.61, -105.02]).bindPopup('This is Littleton, CO.'); 
var marker2 = L.marker([39.74, -104.99]).bindPopup('This is Denver, CO.'), 
assetLayerGroup.addLayer(marker1); 
assetLayerGroup.addLayer(marker2); 

निकालें चेकबॉक्स चेक किया जाता है

assetLayerGroup.clearLayers(); 
+0

स्वच्छ, स्पष्ट उदाहरण के लिए धन्यवाद। उनमें से एक को खोजने में इतना मुश्किल है! – jmadsen

संबंधित मुद्दे