Question

我对Leaflet库和一般的JavaScript都很陌生，我一直试图弄清楚如何基于缩放级别显示/隐藏传单标签（并且标记位于'集群中'层）。

标记都是通过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' });
    }
}

但即使为leaflet.zoomcss.js

添加库和CSS样式，也没有运气

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

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

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

2 个答案: