Broschüre: Etiketten umschalten, je nachdem welche Ebene aktiv ist

Question

Ich habe eine Map mit drei Layern, die aus separaten geoJSON-Dateien geladen werden. Ich habe drei zusätzliche Dateien mit Latlong-Koordinaten und Beschriftungen für jeden.

Ich verwende Grundkarte control.layers, um zwischen meinen drei Schichten zu wechseln, und ich möchte ein Overlay-Layer-Kontrollkästchen, das die Etiketten-Layer aktiviert, abhängig davon, welche Grundkarte-Ebene aktiv ist.

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

Ich verwende LayerGroups, um meine Etiketten zusammenzuhalten. Ich habe versucht, mithilfe des ActiveLayer-Plugins herauszufinden, welcher Baselayer gerade aktiv ist, aber irgendetwas scheint immer nicht in Ordnung zu sein.

Ich bin neu in Javascript und lernen, wie ich gehe.

Der Rest meines Steuercode:

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 
}; 

Gibt es einen besseren Weg, dies zu tun? Ich möchte Radio-Buttons für meine Layer und ein Kontrollkästchen für meine Labels haben, das die Labels je nach aktiviertem Optionsfeld ändert. es sagt mir, die aktive Schicht

EDIT

fand ich diesen Code, die 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}; 
}); 

Es ist etwas zu tun scheint, wenn ich einen console.log tun, aber aus irgendeinem Grund, es ist nicht die Aktualisierung welche Labels angezeigt werden.

Answer 1

Sie haben mehrere Basislayer mit separaten Overlays (die in Ihrem Fall die Labels enthalten), die jeder Basisschicht zugeordnet sind. Sie möchten, dass die Überlagerungen umschaltbar sind, aber nur die mit der aktuellen Basisschicht verknüpfte angezeigt werden soll.

Sie benötigen nicht unbedingt das ActiveLayers Plugin, um dies zu erreichen.

Wie Sie herausgefunden haben, müssen Sie einen Ereignis-Listener einrichten, um das entsprechende Beschriftungs-Overlay "manuell" zuzuweisen. Das Ereignis "baselayerchange" ist in der Tat angemessen, aber es reicht nicht aus, der Variablen activelabel nur die neuen Beschriftungen zuzuweisen, da das Layers Control den Wert verwendet hat, den es bei der Instanziierung hatte.

Stattdessen sollten Sie Ihre activelabel ein Layer Group machen, und auf "baselayerchange" zunächst clearLayers dann die entsprechenden Etiketten Schicht hinein erneut hinzufügen.

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; 
    } 
}); 

Live-Demo: http://playground-leaflet.rhcloud.com/zosa/1/edit?html,output

Eine andere mögliche Lösung wäre es, die Leaflet.FeatureGroup.SubGroup Plugin zu verwenden, die es Ihnen ermöglichen, wird jedes Etiketten-Overlay mit der entsprechenden Basisschicht zu verbinden, haben aber das Plugin das Overlay in ein hinzufügen Umschaltbare Layer-Gruppe.

// 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); 

Live-Demo: http://playground-leaflet.rhcloud.com/pasu/1/edit?html,output

Während diese Lösung 2 zusätzliche Layer-Gruppen pro Base Layer benötigt, es wird vermieden, dass das Ereignis Zuhörer selbst einzurichten, die ein wenig umständlich sein kann, wenn man viel Basis haben Lagen.

Haftungsausschluss: Ich bin der Autor von Leaflet.FeatureGroup.SubGroup Plugin.