Wie zeige ich ein Label über eine bestimmte Zoomstufe in Leaflet hinaus?

Question

Ich bin ziemlich neu in der Leaflet-Bibliothek und im Allgemeinen JavaScript, und ich stehe fest, herauszufinden, wie man eine Broschüre anhand der Zoomstufe anzeigen/verbergen kann (und die Markierungen befinden sich in einem "Cluster") Schicht).

Die Marker werden alle über AJAX-Callback geladen und dann binde ich das Popup und Label mit der , dann füge ich die Ebene der geoJson Marker zur Karte hinzu.

Ich möchte nur die Etiketten zeigen, wenn auf eine Ebene gezoomt, aber ich hatte kein Glück. Ich habe auch versucht, die leaflet.zoomcss.js hinzuzufügen, aber ich denke, ich verwende das nicht richtig.

Probe

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'}); 

    } 
} 

ich auch es so versucht haben, das Hinzufügen, aber das hat nicht funktioniert entweder:

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

und dann eine schnelle Nummer Funktion:

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

Aber kein Glück, auch wenn Sie die Bibliothek und CSS-Stile fürhinzufügen

Sorry für lang, aber jede Hilfe würde wirklich geschätzt werden!

Answer 1

In den Layern von Leaflet werden beim Zoomen der Karte keine Ereignisse ausgelöst. Die tatsächliche Karteninstanz tut dies. Das Binden eines Eventhandlers an jedes Feature würde sich jedoch zu einem Performance-Albtraum entwickeln, wenn Sie mehr Funktionen haben. Sie arbeiten besser mit dem Map-Zoomevent und holen dann alle Features in Ihrem Layer ab und zeigen bei Bedarf die Labels an. Zum Beispiel:

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

Hier ist ein funktionierendes Beispiel auf Plunker: http://plnkr.co/edit/V8duPDjKlY48MTHOU35F?p=preview

Answer 2

Da keiner der zuvor gebuchten Lösungen für mich gearbeitet, poste ich hier den Code, die Arbeit hat, insbesondere für Karten, in denen nicht jede Schicht Objekt Auf der Karte wird angenommen, dass es sich um einen Marker handelt.

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