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

How do I show a label beyond a certain zoom level in Leaflet?

本文关键字：缩放 标签 单中 显示      更新时间：2023-09-26

我对传单库和一般的 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样式

很抱歉太长了，但任何帮助将不胜感激！

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

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

由于之前发布的解决方案都不适合我，因此我在此处发布了确实有效的代码，特别是对于并非地图上的每个图层对象都被假定为标记对象的地图。假设创建的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();

就我而言，我之前进行了 AJAX 回调。在我的代码的这一部分中，您将看到我按照此示例设置的规则

map.on('zoomstart', function () {
try{
var zoomLevel = map.getZoom();
    //alert(zoomLevel);
    console.log(zoomLevel);
    //alert(zoomLevel);
var tooltip = $('.label');
    
    //alert(zoomLevel);
    console.log("zoomLevel");
    console.log(zoomLevel);
switch (zoomLevel) {
    default:
        tooltip.css('font-size', 0)
    if(zoomLevel>5)
    {
        tooltip.css('font-size', 10);
    }
    if(zoomLevel>13)
    {
        tooltip.css('font-size',20);
    }
}
}catch(ex)
{
alert(ex);  
} 
});

这一行：var tooltip = $（'.label'） 是关于我放在开头的 CSS 样式，这些是我的工具提示的属性。在我的情况下，在两个不同的缩放级别中，我决定了两种字体大小。

我希望这对你有所帮助。

相关文章：