Leaflet 切换时，传单多个功能组的顺序会发生变化

我正在使用传单.js创建地图。地图上显示的数据取决于用户选择，因此我在地图加载时实例化了两个空要素组，一个用于值，另一个用于值后面的颜色标记（颜色取决于值）

然后我将空层添加到层切换器

dHMT.overlayMapsLS = {
    "Bassins ": dHMT.bassinLayer,
    "Couleurs    ": dHMT.dataColorLayer,
    "Données    ": dHMT.dataValueLayer
};

用户选择数据后，要素组将填充相关值/标记

    var iconColor = L.divIcon({className: 'dataSpans',html:"<div style='text-align: center;border-radius: 50%;height:40px;width:40px;padding-top:9px;background:"+dHMT.siteinfo[x].color+"'></div>"});
    var iconColorDiv = L.marker([dHMT.ecartArray[x].lat, dHMT.ecartArray[x].lon], {icon: iconColor})
            .bindPopup(
                'Nom :    '+dHMT.siteinfo[x].name+'<br>'+
                'Numéro : '+dHMT.siteinfo[x].stnm+'<br>'+
                'Stid :   '+dHMT.siteinfo[x].stid+'<br>'+
                'LatLon : '+dHMT.siteinfo[x].lat+','+dHMT.ecartArray[x].lon+'<br>'+
                'Valeur : '+dHMT.ecartArray[x].ecart+'<br>'
            ).on('mouseover', function (e) {
                this.openPopup();
            }).on('mouseout', function (e) {
                this.closePopup();
            });
    var iconValue = L.divIcon({className: 'dataSpans',html:"<div style='text-align: center;height:40px;width:40px;padding-top:9px;'>"+value+"</div>"});
    var iconValueDiv = L.marker([dHMT.ecartArray[x].lat, dHMT.ecartArray[x].lon], {icon: iconValue});               
    dataColorFeatures.push(iconColorDiv);
    dataValueFeatures.push(iconValueDiv);
    L.featureGroup(dataColorFeatures).addTo(dHMT.dataColorLayer);   
    L.featureGroup(dataValueFeatures).addTo(dHMT.dataValueLayer);

var iconColor=L.divIcon（{className:'dataspan'，html:}）；
var iconcorlordiv=L.marker（[dHMT.ecartArray[x].lat，dHMT.ecartArray[x].lon]，{icon:iconColor}）
.bindPopup(
'名称：'+dHMT.siteinfo[x].name+'
'+
“Numéro:”+dHMT.siteinfo[x].stnm+“
”+
'Stid:'+dHMT.siteinfo[x].Stid+'
'+
“LatLon:”+dHMT.siteinfo[x].lat+”，“+dHMT.ecartArray[x].lon+”
”+
“Valeur:”+dHMT.ecartArray[x].ecart+“
”
).on（'mouseover'，函数（e）{
这个.openPopup（）；
}).on（'mouseout'，函数（e）{
this.closePopup（）；
});
var iconValue=L.divIcon（{className:'dataspan'，html:“+value+”}）；
var iconValueDiv=L.marker（[dHMT.ecartArray[x].lat，dHMT.ecartArray[x].lon]，{icon:iconValue}）；
dataColorFeatures.push（IConColorIV）；
dataValueFeatures.push（iconValueDiv）；
L.featureGroup（dataColorFeatures）.addTo（dHMT.dataColorLayer）；
L.featureGroup（dataValueFeatures）.addTo（dHMT.dataValueLayer）；

两个图层都很好，我有一个很好的地图，上面有一个带有彩色圆圈的标记图层，另一个图层在标记上显示值。目标是使用图层切换器停用颜色或值

dHMT.overlayMapsLS = {
    "Bassins ": dHMT.bassinLayer,
    "Couleurs    ": dHMT.dataColorLayer,
    "Données    ": dHMT.dataValueLayer
};

---

问题是，例如，如果我关闭颜色层，然后再次打开它，则彩色圆圈会重新出现在值上。所需的行为是让它们以原始顺序重新出现在值后面。

您可以在

L.Map

实例上收听

overlayadd

事件：

通过图层控件选择覆盖时激发

激发时，您可以使用

L.FeatureLayer

的

bringToFront

方法：

将图层组置于所有其他图层的顶部

---

谢谢你的快速回复！我在控制台中看到“overlayadd”事件触发，在我的dHMT.dataValueLayer中看到.bringToFront（）事件，但由于某些原因，它没有将其放在前面，我得到了与以前相同的结果。也许您可以尝试在

dHMT.dataColorLayer

上使用

bringToBack

？我同意这没有意义，函数在那里，应该可以工作。BringtoBack（）也没有这样做。然而，我最终使用触发的事件来清除这两个层，并按照我需要的顺序重新添加功能，这仍然适用于我。我将看看为什么bringToFront（）/back（）函数在以后的某一天无法工作，因为现在我得到了预期的结果。泰。

map.on('overlayadd', function () {
    dHMT.dataValueLayer.bringToFront();
});