Jak wyświetlić etykietę przekraczającą pewien poziom powiększenia w ulotce?

Question

Jestem całkiem nowy w bibliotece ulotek i ogólnie w JavaScript i utknąłem próbując dowiedzieć się, jak pokazać/ukryć etykietę ulotki na podstawie poziomu powiększenia (a znaczniki są w "klastrze" warstwa). Wszystkie

Znaczniki są ładowane za pośrednictwem AJAX zwrotnego, a następnie powiązać okienko i etykietę za pomocą onEachFeature, a następnie dodać warstwę markerów GeoJSON mapy.

Chciałbym pokazać etykiety tylko po powiększeniu do pewnego poziomu, ale nie miałem szczęścia. Próbowałem również dodać leaflet.zoomcss.js, ale myślę, że nie używam tego poprawnie.

Próbka

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

    } 
} 

Próbowałem zostały również dodanie go w ten sposób, ale to nie działa albo:

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

a następnie funkcję quickie:

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

Ale bez powodzenia, nawet przy dodawaniu biblioteki i stylów CSS do leaflet.zoomcss.js

Przepraszamy za długotrwałość, ale każda pomoc będzie naprawdę doceniona!

Answer 1

Warstwy ulotki nie mają zdarzeń uruchamianych podczas powiększania mapy. Rzeczywista instancja mapy działa. Ale powiązanie elementu zdarzenia z każdą funkcją zmieni się w koszmar, gdy zaczniesz mieć więcej funkcji. Lepiej radzisz sobie z mapą zoomevent, a następnie pobierasz wszystkie funkcje w twojej warstwie i pokazujesz etykiety w razie potrzeby. Na przykład:

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

Oto przykład pracuje nad Plunker: http://plnkr.co/edit/V8duPDjKlY48MTHOU35F?p=preview

Answer 2

Ponieważ żaden z wcześniej opublikowanych rozwiązań pracował dla mnie, pisać tutaj kod, który nie działa, szczególnie na mapach, gdzie nie każdy przedmiot warstwa na mapie zakłada się, że jest markerem.

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