Come faccio a mostrare un'etichetta oltre un certo livello di zoom in Leaflet?

Question

Sono abbastanza nuovo alla libreria Leaflet e JavaScript in generale, e sono bloccato cercando di capire come mostrare/nascondere un opuscolo Etichetta basata sul livello di zoom (e i marcatori sono in un 'cluster' strato).

I marcatori sono tutti caricati tramite callback AJAX e quindi associo il popup e l'etichetta utilizzando lo onEachFeature, quindi aggiungo il livello dei marcatori geoJson alla mappa.

Mi piacerebbe mostrare le etichette solo quando ingrandito ad un certo livello, ma non ho avuto fortuna. Ho anche provato ad aggiungere il leaflet.zoomcss.js ma suppongo che non lo sto usando correttamente.

Esempio

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

    } 
} 

Ho anche provato ad aggiungere in questo modo, ma che non ha funzionato neanche:

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

e quindi una funzione sveltina:

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

Ma senza fortuna, anche quando aggiungi la libreria e gli stili CSS per leaflet.zoomcss.js

Ci scusiamo per il lungo, ma qualsiasi aiuto sarebbe davvero apprezzato!

Answer 1

Gli strati di volantini non attivano gli eventi quando si ingrandisce la mappa. L'istanza della mappa effettiva lo fa. Ma legare un eventhandler a ciascuna funzionalità si trasformerebbe in un incubo per le prestazioni quando inizi ad avere più funzionalità. Stai meglio gestendo lo zoom della mappa e recuperando tutte le funzionalità nel tuo layer e mostrando le etichette se necessario. Per esempio:

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

Ecco un esempio di lavoro sul Plunker: http://plnkr.co/edit/V8duPDjKlY48MTHOU35F?p=preview

Answer 2

Dal momento che nessuna delle soluzioni precedentemente pubblicati lavorato per me, vi posto qui il codice che ha fatto il lavoro, in particolare per le mappe in cui non tutti gli oggetti strato sulla mappa si presume che sia un marker.

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