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

Question

我对Leaflet库和一般的JavaScript都很陌生,而且我一直试图弄清楚如何基于缩放级别显示/隐藏传单Label(并且标记位于'cluster'层中) .

标记都是通过AJAX回调加载的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 = '<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'});

    }
}

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

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

然后是一个快速功能:

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

但是没有运气,即使在添加库和CSS样式时也是如此 leaflet.zoomcss.js

很抱歉很长,但任何帮助都会非常感激!

Answer 1

在缩放地图时,Leaflet的图层没有触发事件.实际的地图实例.但是,当您开始拥有更多功能时,将事件处理程序绑定到每个功能将变成性能噩梦.您最好处理地图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变量中，请将其放在地图初始化代码之后：

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