मैं पत्रक में एक निश्चित ज़ूम स्तर से परे एक लेबल कैसे दिखा सकता हूं?

Question

मैं पत्रिका पुस्तकालय के लिए काफी नया हूं, और सामान्य रूप से जावास्क्रिप्ट में हूं, और मैं यह पता लगाने की कोशिश कर रहा हूं कि ज़ूम स्तर के आधार पर लेबल को कैसे दिखाया/छुपाएं (और मार्कर 'क्लस्टर' में हैं परत)।

मार्करों सभी AJAX कॉलबैक के माध्यम से लोड किए गए हैं और उसके बाद मैं पॉपअप और लेबल onEachFeature का उपयोग कर बाँध, तो मैं नक्शा करने के लिए GeoJSON मार्कर की परत जोड़ते हैं।

मैं कुछ स्तरों पर ज़ूम करते समय केवल लेबल दिखाना चाहता हूं, लेकिन मेरे पास कोई भाग्य नहीं है। मैंने leaflet.zoomcss.js जोड़ने का भी प्रयास किया लेकिन मुझे लगता है कि मैं इसका सही उपयोग नहीं कर रहा हूं।

नमूना

var officesLayerGroup = L.markerClusterGroup(); 
var currentMakers; 
function DiaplyLocalOffices(jqOffices) { 

    currentMakers = new L.geoJson(jqOffices, { 
     style: function (feature) { 
      var c = feature.properties.markercolor; 
      if (feature.properties.OfficeID == 0) { 
       c = 'yellow'; 
      } 
      return { color: c }; 
     }, 
     pointToLayer: function (feature, latlng) { 
      return new L.CircleMarker(latlng, { radius: 7, fillOpacity: 0.5 }); 
     }, 

     onEachFeature: bindOfficePopup 
    }); 
    officesLayerGroup.addLayer(currentMakers); 
    map.addLayer(officesLayerGroup); 
} 

function bindOfficePopup(feature, layer) { 
    // This function adds the popup based on the information in the 'layer' or marker 
    // Keep track of the layer(marker) 
    feature.layer = layer; 

    var props = feature.properties; 
    if (props) { 
     var desc = '<span id="feature-popup">'; 
     //.. a bunch of other html added here!  
     var warn = props.Warning ? props.Warning : null; 
     if (warn !== null) { 
      desc += '<font size="4" color="red"><strong><em>' + warn + '</em></strong></font></br>'; 
     } 
     desc += '</span>'; 
     layer.bindPopup(desc); 
     layer.bindLabel('Hi Label!', { noHide: true, className: 'my-css-styled-labels'}); 

    } 
} 

मैं भी इस लेकिन यह है कि जैसे कि यह जोड़ने की कोशिश की है या तो काम नहीं किया:

layer.on({ 
      zoomend: showLabel(e) 
    }); 

और फिर एक जल्दी समारोह:

function showLabel(e) { 
    z = map.getZoom(); 
    if (z > 6) { 
     layer.bindLabel("HIYA", { noHide: true, className: 'my-css-styled-labels' }); 
    } 
} 

लेकिन कोई भाग्य नहीं, यहां तक ​​किके लिए लाइब्रेरी और सीएसएस शैलियों को जोड़ते समय भी

लंबा होने के लिए खेद है, लेकिन किसी भी मदद की वास्तव में सराहना की जाएगी!

Answer 1

मानचित्र की ज़ूम करते समय पत्रक की परतों को निकाल दिया गया ईवेंट नहीं है। वास्तविक नक्शा उदाहरण करता है। लेकिन जब आप अधिक सुविधाएं शुरू करते हैं तो प्रत्येक सुविधा के लिए इवेंटहालर को बाध्यकारी प्रदर्शन प्रदर्शन दुःस्वप्न में बदल जाएगा। आप मानचित्र ज़ूमोमेन्ट को संभालने और फिर अपनी परत में सभी सुविधाओं को लाने और आवश्यक होने पर लेबल दिखाने से बेहतर हैं। उदाहरण के लिए: http://plnkr.co/edit/V8duPDjKlY48MTHOU35F?p=preview

Answer 2

के बाद से पहले से तैनात समाधान में से कोई भी मेरे लिए काम किया, मैं यहाँ विशेष रूप से नक्शे जहां हर स्तर आइटम के लिए कोड है कि काम किया है पोस्ट,:

var geoJsonLayer = L.geoJson(featureCollection, { 
    onEachFeature: function (feature, layer) { 
     layer.bindLabel(feature.geometry.coordinates.toString()); 
    } 
}).addTo(map); 

var visible; 

// Attach map zoom handler 
map.on('zoomend', function (e) { 
    // Check zoom level 
    if (map.getZoom() > 10) { 
     // Check if not already shown 
     if (!visible) { 
      // Loop over layers 
      geoJsonLayer.eachLayer(function (layer) { 
       // Show label 
       layer.showLabel(); 
      }); 
      // Set visibility flag 
      visible = true; 
     } 
    } else { 
     // Check if not already hidden 
     if (visible) { 
      // Loop over layers 
      geoJsonLayer.eachLayer(function (layer) { 
       // Hide label 
       layer.hideLabel(); 
      }); 
      // Set visibility flag 
      visible = false; 
     } 
    } 
}); 

// Fits to layer bounds which automaticly will fire the zoomevent 
map.fitBounds(geoJsonLayer.getBounds()); 

यहाँ Plunker पर एक काम उदाहरण है मानचित्र पर एक मार्कर माना जाता है।

var show_label_zoom = 20; // zoom level threshold for showing/hiding labels 
var labels_visible = true; 
function show_hide_labels() { 
    var cur_zoom = map.getZoom(); 
    if(labels_visible && cur_zoom < show_label_zoom) {   
     labels_visible = false; 
     map.eachLayer(function (layer) { 
      layer.hideLabel && layer.hideLabel(); 
     });    
    } 
    else if(!labels_visible && cur_zoom >= show_label_zoom) {   
     labels_visible = true; 
     map.eachLayer(function (layer) { 
      layer.showLabel && layer.showLabel(); 
     });    
    } 
} 
map.on('zoomend', show_hide_labels); 
show_hide_labels();