問題描述

我對 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

這篇關于如何在 Leaflet 中顯示超出特定縮放級別的標簽?的文章就介紹到這了，希望我們推薦的答案對大家有所幫助，也希望大家多多支持html5模板網！