リーフレットで特定のズームレベルを超えてラベルを表示するにはどうすればよいですか？

Question

私はリーフレットのライブラリと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' }); 
    } 
} 

しかし、ライブラリとCSSスタイルを追加する場合でも、運がないleaflet.zoomcss.js

申し訳ありませんが長いですが、どんな助けでも本当に感謝しています！

Answer 1

リーフレットのレイヤーには、マップをズームする際に発生するイベントはありません。実際のマップインスタンスが行います。しかし、イベントハンドラを各フィーチャにバインドすると、より多くのフィーチャを持つようになると、パフォーマンスの悪夢になります。あなたは地図のズームを処理し、レイヤー内のすべての機能を取り出し、必要に応じてラベルを表示する方がよいでしょう。たとえば：

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

Answer 2

以前に掲載ソリューションのどれも私のために働いていないので、私はここに特にマップの仕事をしたコードではなく、すべてのレイヤオブジェクトを投稿します地図上のマーカをマーカとする。

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(function (layer) { 
      layer.hideLabel && layer.hideLabel(); 
     });    
    } 
    else if(!labels_visible && cur_zoom >= show_label_zoom) {   
     labels_visible = true; 
     map.eachLayer(function (layer) { 
      layer.showLabel && layer.showLabel(); 
     });    
    } 
} 
map.on('zoomend', show_hide_labels); 
show_hide_labels();