Làm cách nào để hiển thị nhãn vượt quá mức thu phóng nhất định trong Leaflet?

Question

Tôi khá mới đối với thư viện Leaflet và JavaScript nói chung và tôi đang cố gắng tìm cách hiển thị/ẩn Nhãn tờ rơi dựa trên mức thu phóng (và các điểm đánh dấu nằm trong 'cụm' lớp).

Các điểm đánh dấu đều được tải qua gọi lại AJAX và sau đó tôi ràng buộc cửa sổ bật lên và nhãn bằng cách sử dụng onEachFeature, sau đó tôi thêm lớp dấu geoJson vào bản đồ.

Tôi muốn chỉ hiển thị các nhãn khi phóng to đến một mức nào đó, nhưng tôi chưa có bất kỳ may mắn nào. Tôi cũng đã thử thêm leaflet.zoomcss.js nhưng tôi đoán tôi không sử dụng chính xác.

mẫu

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

    } 
} 

Tôi cũng đã thử thêm nó như thế này nhưng điều đó không làm việc, hoặc:

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

và sau đó một hàm quickie:

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

Nhưng không may mắn, ngay cả khi thêm thư viện và kiểu CSS cho leaflet.zoomcss.js

Xin lỗi vì đã lâu, nhưng mọi trợ giúp sẽ thực sự được đánh giá cao!

Answer 1

Lớp của Leaflet không có sự kiện nào được kích hoạt khi phóng to bản đồ. Ví dụ bản đồ thực tế. Nhưng ràng buộc một eventhandler cho mỗi tính năng sẽ biến thành một cơn ác mộng hiệu suất khi bạn bắt đầu có nhiều tính năng hơn. Bạn nên xử lý bản đồ thu phóng và sau đó tìm nạp tất cả các tính năng trong lớp của bạn và hiển thị các nhãn nếu cần. Ví dụ:

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

Dưới đây là một ví dụ làm việc trên Plunker: http://plnkr.co/edit/V8duPDjKlY48MTHOU35F?p=preview

Answer 2

Kể từ khi không ai trong số các giải pháp được đăng trước đây làm việc cho tôi, tôi gửi ở đây mã mà đã làm việc, đặc biệt là cho các bản đồ nơi không phải mọi đối tượng lớp trên bản đồ được giả định là một điểm đánh dấu.

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