リーフレット：アクティブなレイヤーに応じてラベルを切り替える

Question

私は別々のgeoJSONファイルからロードする3つのレイヤーを備えたリーフレットマップを持っています。 私は、それぞれにlatlong座標とラベルを持つ3つの追加ファイルを持っています。

私は3つのレイヤーを切り替えるためにbasemap control.layersを使用しています。アクティブなベースマップレイヤーに応じて、ラベルレイヤーを有効にするオーバーレイレイヤーチェックボックスが必要です。

var basemaps= { 
"layer1": layer1, 
"layer2": layer 2, 
"layer3": layer 3 
}; 

私はラベルをまとめて保存するためにlayerGroupsを使用しています。 ActiveLayerプラグインを使用して、現在アクティブなベースレイヤーを選ぶのを手伝ってみましたが、何かが常に順不同であるようです。

私はjavascriptを初めて使っています。

私の制御コードの残り：

var picker = L.control.activeLayers(basemaps, showlabels {collapsed:false}).addTo(map); 

if (picker.getActiveBaseLayer() == "layer1") 
    {activelabel = label1}; 
if (picker.getActiveBaseLayer() == "layer2") 
    {activelabel = label2}; 
if (picker.getActiveBaseLayer() == "layer2") 
    {activelabel = label3}; 

var showlabels = { 
"labels": activelabel 
}; 

これを行うには良い方法はありますか？私は自分のレイヤーのラジオボタンと、ラジオボタンがチェックされているかどうかに応じてラベルを変更する私のレーベル用のチェックボックスを1つ持っています。私はこのコードを見つけ

EDIT

、私はそれは私に、活性層を伝えにconsole.logを行う際baselayerchange

map.on('baselayerchange', function(a) { 
if (picker.getActiveBaseLayer().name == "layer1") 
{activelabel = label1}; 
if (picker.getActiveBaseLayer().name == "layer2") 
{activelabel = label2}; 
if (picker.getActiveBaseLayer().name == "layer3") 
{activelabel = labels3}; 
}); 

何かをするようだが、何らかの理由でそれが更新イマイチどのラベルが表示されています。

Answer 1

複数の基本レイヤーがあり、それぞれの基本レイヤーに関連付けられた別々のオーバーレイ（ケースにラベルを含む）があります。オーバーレイをトグル可能にしたいが、現在のベースレイヤーに関連付けられているオーバーレイのみを表示する必要があります。

これを行うには、必ずActiveLayersプラグインが必要なわけではありません。

あなたが把握したとおり、適切なラベルオーバーレイを「手動で」割り当てるようにイベントリスナーを設定する必要があります。 "baselayerchange"イベントは実際には適切ですが、activelabel変数に新しいラベルを割り当てるだけでは不十分です。レイヤーコントロールでインスタンス化したときの値が使用されたためです。

代わりにactivelabelをLayer Groupに、"baselayerchange"に最初にclearLayersとし、適切なラベルレイヤーを再度追加してください。

var activelabel = L.layerGroup(); 
var showlabels = { 
    "labels": activelabel 
}; 

map.on('baselayerchange', function (event) { 
    activelabel.clearLayers(); 

    switch (event.layer) { 
    case layer1: 
     label1.addTo(activelabel); 
     break; 
    case layer2: 
     layer2.addTo(activelabel); 
     break; 
    case layer3: 
     layer3.addTo(activelabel); 
     break; 
    } 
}); 

ライブデモ：http://playground-leaflet.rhcloud.com/zosa/1/edit?html,output

別の可能な解決策は、それに対応するベース層と、各ラベルオーバーレイを関連付けることができますLeaflet.FeatureGroup.SubGroupプラグインを使用することが、プラグインを持っているでしょうにオーバーレイを追加しますトグ可能なレイヤーグループ。

// Layer Group container for labels overlays. 
var labelsGroup = L.layerGroup().addTo(map); 


// Base layer 1: use a container Layer Group for the Tile Layer 
// and a SubGroup that will receive the labels, 
// to be sent into labelsGroup when the base layer is selected. 
var group1 = L.layerGroup().addTo(map); 
var subgroup1 = L.featureGroup.subGroup(labelsGroup).addTo(group1); 

base1.addTo(group1); 
labels1.addTo(subgroup1); 


// Base layer 2. 
var group2 = L.layerGroup(); 
var subgroup2 = L.featureGroup.subGroup(labelsGroup).addTo(group2); 

base2.addTo(group2); 
labels2.addTo(subgroup2); 


L.control.layers({ 
    // Base layers. 
    'Base 1': group1, 
    'Base 2': group2 
}, { 
    // Overlays. This will switch on/off the labels. 
    'Labels': labelsGroup 
}).addTo(map); 

ライブデモ：http://playground-leaflet.rhcloud.com/pasu/1/edit?html,output

このソリューションは、基本レイヤごとに2つの余分なレイヤのグループが必要ですが、それはあなたがたくさんの基盤を持っている場合は少し面倒なことができ、自分でイベントリスナーを設定する必要がなくなり層。

免責事項：私はLeaflet.FeatureGroup.SubGroupプラグインの著者です。