如何在Leaflet中显示超出特定缩放级别的标签？

我对Leaflet库以及一般的JavaScript都很陌生，我一直试图弄清楚如何根据缩放级别显示/隐藏传单Label（并且标记位于’cluster’层中） 。

标记都是通过AJAX回调加载的，然后我使用onEachFeature绑定弹出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 = ''; //.. a bunch of other html added here! var warn = props.Warning ? props.Warning : null; if (warn !== null) { desc += '' + warn + '
'; } desc += ''; layer.bindPopup(desc); layer.bindLabel('Hi Label!', { noHide: true, className: 'my-css-styled-labels'}); } } 

我也试过像这样添加它但是这也不起作用：

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

然后是一个快速function：

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

但即使为leaflet.zoomcss.js添加库和CSS样式，也没有运气

很抱歉很长，但任何帮助都会非常感激！

Answer 1

在缩放地图时，Leaflet的图层没有触发事件。 实际的地图实例。 但是，当您开始拥有更多function时，将事件处理程序绑定到每个function将变成性能噩梦。 您最好处理地图zoomevent，然后获取图层中的所有要素并在需要时显示标签。 例如：

 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的一个工作示例： http ：//plnkr.co/edit/V8duPDjKlY48MTHOU35F？p = preview

Answer 2

由于之前发布的解决方案都不适合我，我在这里发布了有效的代码，特别是对于地图中不是每个图层对象都假定为标记对象的地图。 假设创建的L.Map对象存储在map变量中，请将其放在map初始化代码之后：

 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(layer => layer.hideLabel && layer.hideLabel()); } else if(!labels_visible && cur_zoom >= show_label_zoom) { labels_visible = true; map.eachLayer(layer => layer.showLabel && layer.showLabel()); } } map.on('zoomend', show_hide_labels); show_hide_labels();