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

2022-01-12 00:00:00 json leaflet jquery javascript css

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

但没有运气，即使为 leaflet.zoomcss.js

抱歉冗长，但我们将不胜感激！

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

推荐答案

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

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

相关文章