如何在Leaflet中显示超出特定缩放级别的标签？ [英] How do I show a label beyond a certain zoom level in Leaflet?

问题描述

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

I'm pretty new to the Leaflet library, and to JavaScript in general, and I'm stuck trying to figure out how to show/hide a leaflet Label based on the zoom level (and the markers are in a 'cluster' layer).

标记都是通过AJAX回调加载的，然后我使用 onEachFeature 绑定弹出框和标签，然后我将geoJson标记层添加到地图中。

The markers are all loaded via AJAX callback and then I bind the popup and label using the onEachFeature, then I add the layer of geoJson markers to the map.

我只想在放大某个级别时显示标签，但我没有运气。我也尝试添加 leaflet.zoomcss.js 但我想我没有正确使用它。

I'd like to only show the labels when zoomed in to some level, but I haven't had any luck. I also tried adding the leaflet.zoomcss.js but I guess I'm not using that correctly.

示例

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

    }
}

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

I've also tried adding it like this but that didn't work either:

    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

But no luck, even when adding the library and CSS styles for leaflet.zoomcss.js

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

Sorry for being lengthy, but any help would be really appreciated!

推荐答案

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

Leaflet's layers don't have events fired when zooming the map. The actual map instance does. But binding an eventhandler to each feature would turn into a performance nightmare when you start having more features. You're better off handling the map zoomevent and then fetching all the features in your layer and showing the labels if needed. For example:

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

Here's a working example on Plunker: http://plnkr.co/edit/V8duPDjKlY48MTHOU35F?p=preview

这篇关于如何在Leaflet中显示超出特定缩放级别的标签？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！