我对 Leaflet 库和一般的 JavaScript 还很陌生，我一直在试图弄清楚如何根据缩放级别显示/隐藏传单标签(并且标记在“集群”中' 层)。

标记全部通过 AJAX 回调加载，然后我使用 onEachFeature 绑定(bind)弹出窗口和标签，然后我将 geoJson 标记层添加到 map 。

我只想在放大到某个级别时显示标签，但我没有任何运气。我也尝试添加 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 样式时也是如此

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

最佳答案

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

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

关于javascript - 如何在 Leaflet 中显示超出特定缩放级别的标签？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/27820338/