couche de feuillet interrompant l'interactivité de la couche de base

Question

Je travaille sur un projet basé sur le Leaflet Choropleth Tutorial.

Dans ma carte, j'ai trois couches de base que l'utilisateur bascule entre

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

Chacune de ces couches hautes lumières et affiche des informations comme dans apparaitre le modèle choroplèthes.

J'ai également des couches qui affichent des étiquettes (valeurs) pour chaque région, selon lequel est actif.

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: 
     label2.addTo(activelabel); 
     break; 
    case layer3: 
     label3.addTo(activelabel); 
     break; 
    } 
}); 

Mon problème, est que lorsque les étiquettes sont actives, si l'utilisateur passe au-dessus de la partie de la région où l'étiquette est, la fonction de mise en surbrillance et la boîte d'information ne présentent pas de l'information.

J'essaie de trouver un moyen de rendre le calque activelabel invisible, de sorte que le hover fonctionne toujours.

J'ai trouvé le tutoriel sur Map Panes, qui semble être la solution à mon problème, mais il ne semble pas faire quoi que ce soit.

Je ne suis pas sûr si je mets les informations du volet au mauvais endroit, ou si cela ne fonctionne pas comme je le pense? J'ai essayé de changer le xIndex partout de 0 à 700 et cela ne semble pas faire la différence?

map.createPane('labels'); 
map.getPane('labels').style.zIndex = 700; 
map.getPane('labels').style.pointerevents = 'none'; 

J'ai essayé de mettre le volet: code « étiquettes » ici, où je formater mes étiquettes

var createLabelIcon = function(labelClass,labelText){ 
return L.divIcon({ 
className: labelClass, 
html: labelText 
}) 
}; 

comme ici, où je crée le groupe de calques.

var label1 = new L.layerGroup();       
makelabel1(); 

Toute aide serait appréciée. Je vous remercie.

Answer 1

J'ai trouvé une solution à cela. J'ai trois fichiers .js séparés où j'ajoute tous les calques contenant des étiquettes à mes groupes de calques.

Si j'ajoute {interactive: false} à chaque instance de .addLayer dans chaque fichier, les étiquettes n'interrompent pas le survol de la souris. Je ne sais pas pourquoi cela ne fonctionne pas lorsque j'ajoute interactif: false pour le groupe de calques, contrairement à chaque ligne addLayer, mais cela semble fonctionner.