切换时传单几个功能组顺序更改

Question

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

if( dHMT.dataColorLayer===undefined ){
    dHMT.dataColorLayer = new L.featureGroup({}).addTo(dHMT.map);
}
if( dHMT.dataValueLayer===undefined ){
    dHMT.dataValueLayer = new L.featureGroup({}).addTo(dHMT.map);
}

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

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

一旦用户选择了数据，featureGroups 就会填充相关的 values/markers。

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

两层都很好，我有一张漂亮的地图，其中标记层带有彩色圆圈，另一层显示标记上方的值。目标是使用图层切换器停用颜色或值。

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

Answer 1

您可以在您的 L.Map 实例上收听 overlayadd 事件：

Fired when an overlay is selected through the layer control.

http://leafletjs.com/reference.html#map-overlayadd

被解雇时，您可以使用 L.FeatureLayer 的 bringToFront 方法：

Brings the layer group to the top of all other layers.

http://leafletjs.com/reference.html#featuregroup-bringtofront

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

切换时传单几个功能组顺序更改

Leaflet several featuregroups order changes when toggled

leaflet

mapbox