leaflet.js में लेयर ऑर्डरिंग

Question

मैं बेसमेप पर पहली बार होने के लिए मानचित्र में जोड़े गए एक नई परत को कैसे मजबूर कर सकता हूं?

मुझे परतों के क्रम को आसानी से बदलने के लिए कोई तरीका नहीं मिला, जो कि एक बहुत ही बुनियादी जीआईएस सुविधा है। क्या मैं कुछ भूल रहा हूँ?

Answer 1

एक पत्रक नक्शा "फलक" जिसका आदेश देखें z- सूचकांक का उपयोग कर नियंत्रित किया जाता है का एक संग्रह के होते हैं। प्रत्येक फलक में परतों का संग्रह होता है डिफ़ॉल्ट फलक डिस्प्ले ऑर्डर टाइल्स-> छाया-> ओवरले-> मार्कर-> पॉपअप होता है। एटियेन की तरह वर्णन किया गया है, आप bringToFront() या bringToBack() पर कॉल करके ओवरलेज़ फलक के पथों के प्रदर्शन क्रम को नियंत्रित कर सकते हैं। L.FeatureGroup में इन विधियों के भी तरीके हैं ताकि आप ओवरले के समूहों के क्रम को एक बार में बदल सकें यदि आपको आवश्यकता हो।

यदि आप पूरे फलक के प्रदर्शन ऑर्डर को बदलना चाहते हैं तो आप सीएसएस का उपयोग करके फलक के जेड-इंडेक्स को बदल दें।

यदि आप एक नया नक्शा फलक जोड़ना चाहते हैं ... तो मुझे यकीन नहीं है कि अभी तक यह कैसे करना है।

http://leafletjs.com/reference.html#map-panes

http://leafletjs.com/reference.html#featuregroup

Answer 2

पत्रक एपीआई के अनुसार, आप किसी भी परत पर bringToFront या bringToBack का उपयोग कर सकते हैं ताकि सभी परत परतों के ऊपर या नीचे उस परत को लाया जा सके।

एटीन

Answer 3

थोड़ा अधिक विस्तार के लिए, बॉबी Sudekum फलक z- सूचकांक के हेरफेर दिखा एक साथ a fantastic demo डाल दिया। मैं इसे हर समय एक शुरुआती बिंदु के रूप में उपयोग करता हूं।

var topPane = L.DomUtil.create('div', 'leaflet-top-pane', map.getPanes().mapPane); 
var topLayer = L.mapbox.tileLayer('bobbysud.map-3inxc2p4').addTo(map); 
topPane.appendChild(topLayer.getContainer()); 
topLayer.setZIndex(7); 

Answer 4

मैंने पाया यह सुधार (सीएसएस):

.leaflet-map-pane { 
    z-index: 2 !important; 
} 

.leaflet-google-layer { 
    z-index: 1 !important; 
} 

यह पाया गया: https://gis.stackexchange.com/questions/44598/leaflet-google-map-baselayer-markers-not-visible

Answer 5

इस हाल ही में हल करने के लिए था, लेकिन ठोकर खाई

यहाँ कुंजी कोड है इस सवाल पर।

यहां एक समाधान है जो सीएसएस हैक्स पर निर्भर नहीं है और परत समूहों के साथ काम करता है। यह वांछित क्रम में परतों को अनिवार्य रूप से हटा देता है और फिर से जोड़ता है।

मैं इसे वर्तमान उत्तर की तुलना में बेहतर "सर्वोत्तम अभ्यास" के रूप में प्रस्तुत करता हूं। यह दिखाता है कि परतों का प्रबंधन कैसे करें और उन्हें फिर से ऑर्डर करें, जो अन्य संदर्भों के लिए भी उपयोगी है। वर्तमान विधि परत को Title का उपयोग करती है ताकि यह पहचान सके कि कौन सी परत पुन: क्रमबद्ध है, लेकिन आप इसे किसी सूचकांक या वास्तविक परत ऑब्जेक्ट के संदर्भ के लिए आसानी से संशोधित कर सकते हैं।

सुधार, टिप्पणियां, और संपादन का स्वागत है और प्रोत्साहित किया जाता है।

जे एस फिडल: http://jsfiddle.net/ob1h4uLm/

या नीचे स्क्रॉल करें और क्लिक करें "भागो कोड स्निपेट" और इसके साथ खेलते हैं। मैंने प्रारंभिक ज़ूम स्तर को उस बिंदु पर सेट किया है जो layerGroup ओवरलैप प्रभाव को चित्रित करने में मदद करनी चाहिए।

function LeafletHelper() { 
 

 
    // Create the map 
 
    var map = L.map('map').setView([39.5, -0.5], 4); 
 

 
    // Set up the OSM layer 
 
    var baseLayer = L.tileLayer(
 
     'http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', { 
 
     maxZoom: 18 
 
    }).addTo(map); 
 

 
    var baseLayers = { 
 
     "OSM tiles": baseLayer 
 
    }; 
 

 
    this.map = map; 
 

 
    this.BaseLayers = { 
 
     "OSM tiles": baseLayer 
 
    }; 
 
    this.LayersControl = L.control.layers(baseLayers).addTo(map); 
 

 
    this.Overlays = []; 
 
    this.AddOverlay = function (layerOptions, markers) { 
 
     var zIndex = this.Overlays.length; 
 
     var layerGroup = L.layerGroup(markers).addTo(map); 
 
     this.LayersControl.addOverlay(layerGroup, layerOptions.title); 
 
     this.Overlays.push({ 
 
      zIndex: zIndex, 
 
      LeafletLayer: layerGroup, 
 
      Options: layerOptions, 
 
      InitialMarkers: markers, 
 
      Title: layerOptions.title 
 
     }); 
 
     return layerGroup; 
 
    } 
 
    this.RemoveOverlays = function() { 
 
     for (var i = 0, len = this.Overlays.length; i < len; i++) { 
 
      var layer = this.Overlays[i].LeafletLayer; 
 
      this.map.removeLayer(layer); 
 
      this.LayersControl.removeLayer(layer); 
 
     } 
 
     this.Overlays = []; 
 
    } 
 
    this.SetZIndexByTitle = function (title, zIndex) { 
 

 
     var _this = this; 
 

 
     // remove overlays, order them, and re-add in order 
 
     var overlays = this.Overlays; // save reference 
 
     this.RemoveOverlays(); 
 
     this.Overlays = overlays; // restore reference 
 

 
     // filter overlays and set zIndex (may be multiple if dup title) 
 
     overlays.forEach(function (item, idx, arr) { 
 
      if (item.Title === title) { 
 
       item.zIndex = zIndex; 
 
      } 
 
     }); 
 

 
     // sort by zIndex ASC 
 
     overlays.sort(function (a, b) { 
 
      return a.zIndex - b.zIndex; 
 
     }); 
 

 
     // re-add overlays to map and layers control 
 
     overlays.forEach(function (item, idx, arr) { 
 
      item.LeafletLayer.addTo(_this.map); 
 
      _this.LayersControl.addOverlay(item.LeafletLayer, item.Title); 
 
     }); 
 
    } 
 
} 
 

 
window.helper = new LeafletHelper(); 
 

 
AddOverlays = function() { 
 
    // does not check for dups.. for simple example purposes only 
 
    helper.AddOverlay({ 
 
     title: "Marker A" 
 
    }, [L.marker([36.83711, -2.464459]).bindPopup("Marker A")]); 
 
    helper.AddOverlay({ 
 
     title: "Marker B" 
 
    }, [L.marker([36.83711, -3.464459]).bindPopup("Marker B")]); 
 
    helper.AddOverlay({ 
 
     title: "Marker C" 
 
    }, [L.marker([36.83711, -4.464459]).bindPopup("Marker c")]); 
 
    helper.AddOverlay({ 
 
     title: "Marker D" 
 
    }, [L.marker([36.83711, -5.464459]).bindPopup("Marker D")]); 
 
} 
 

 
AddOverlays(); 
 

 
var z = helper.Overlays.length; 
 

 
ChangeZIndex = function() { 
 
    helper.SetZIndexByTitle(helper.Overlays[0].Title, z++); 
 
} 
 

 
ChangeZIndexAnim = function() { 
 
    StopAnim(); 
 
    var stuff = ['A', 'B', 'C', 'D']; 
 
    var idx = 0; 
 
    var ms = 200; 
 
    window.tt = setInterval(function() { 
 
     var title = "Marker " + stuff[idx++ % stuff.length]; 
 
     helper.SetZIndexByTitle(title, z++); 
 
    }, ms); 
 
} 
 

 
StopAnim = function() { 
 
    if (window.tt) clearInterval(window.tt); 
 
}

#map { 
 
    height: 400px; 
 
}

<link rel="stylesheet" type="text/css" href="http://cdn.leafletjs.com/leaflet-0.6.4/leaflet.css"> 
 
<script type='text/javascript' src="http://cdn.leafletjs.com/leaflet-0.6.4/leaflet.js"></script> 
 
<div id="map"></div> 
 
<input type='button' value='Remove overlays' onclick='helper.RemoveOverlays();' /> 
 
<input type='button' value='Add overlays' onclick='AddOverlays();' /> 
 
<input type='button' value='Move bottom marker to top' onclick='ChangeZIndex();' /> 
 
<input type='button' value='Change z Index (Animated)' onclick='ChangeZIndexAnim();' /> 
 
<input type='button' value='Stop animation' onclick='StopAnim();' />