leaflet - Having issues in sorting layers with LeafletJS - Stack Overflow

admin管理员组

文章数量:1122832

I am using the following code with LeafletJS to generate custom maps with a large number of markers:

    <script>
var light_OSM = L.tileLayer('https://{s}.basemaps.cartocdn/light_all/{z}/{x}/{y}.png', {
maxZoom: 20,
minZoom: 12,
attribution: 'Positron'
});
                    
var autodark_OSM = L.tileLayer('https://{s}.basemaps.cartocdn/light_all/{z}/{x}/{y}.png', {
maxZoom: 20,
minZoom: 12,
attribution: 'Positron',
className: 'map-autodark'
});
                
L.tileLayer('https://{s}.tile.openstreetmap.fr/osmfr/{z}/{x}/{y}.png', {
attribution: 'données © <a href="//osm/copyright">OpenStreetMap</a>/ODbL - rendu <a href="//openstreetmap.fr">OSM France</a>',
minZoom: 1,
maxZoom: 20,
className: 'map-autodark'
});
                
const canvasRenderer = L.canvas();
    
    
const API_OPEN_PARIS = new Request("json/accidentologie0_data2023/accidentologie0_75013_75014_2017-2023.json");
var layer_per_type = {};
const arrondissements = [];
                
var layer_2017 = L.layerGroup()
var layer_2018 = L.layerGroup()
                
                    
fetch(API_OPEN_PARIS)
.then((response) => response.json())
.then((data) => process_per_date_show_mode_3(data))
.catch(console.error);
    
    
const API_CDQ_CONTOUR = new Request("json/conseil-quartier-montsouris-dareau.json");
var layer_cdq = L.layerGroup()
                
fetch(API_CDQ_CONTOUR)
.then((response) => response.json())
.then((data) => process_cdq_contour(data))
.catch(console.error);
    
                
var mappos = L.Permalink.getMapLocation(zoom=15, center=[48.825487, 2.338575]);
var carte = L.map('maCarte', {
center: mappos.center,
zoom: mappos.zoom,
layers: [autodark_OSM, layer_2017, layer_2018, layer_cdq]
});
                
L.Permalink.setup(carte);
                
var baseMaps = {
"Light": light_OSM,
"Auto dark": autodark_OSM
};
                
                
var overlayMaps = {
"2017": layer_2017,
"2018": layer_2018,
"Limites CDQ": layer_cdq
};
                
var layerControl = L.control.layers(baseMaps, overlayMaps).addTo(carte);
show_advice() 
                
</script>

With the following functions:

function process_per_date_show_mode_3(data) {
    const yearLayers = {
        2017: layer_2017,
        2018: layer_2018,
    };

    for (var i = 0; i < data.length; i++) {
        var element = data[i];
        var year = new Date(element.annee).getFullYear();
        var the_layer = yearLayers[year];

        if (the_layer) {
            let popup_text = get_popup_text(element);
            let event_text = get_detailed_event(element);
            add_marker_per_mode_3(element, popup_text, the_layer, event_text);
        }
    }
}

function add_marker_per_mode_3(element, text, layer, detailed_event) {
    const modeColors = {
        "2 Roues Motorisées": '#F3BC22',
        "Piéton": '#00A4CA',
        "4 Roues": '#E36924',
        "Vélo": '#AFCD39',
        "EDP-m": '#6AB5A3',
        "default": '#C8237F'
    };

    const fillColor = modeColors[element.victime_type] || modeColors["default"];

    L.circleMarker([element.latitude, element.longitude], {
        renderer: canvasRenderer,
        radius: 9,
        color: 'white',
        fillColor: fillColor,
        fillOpacity: 1,
        weight: 1
    })
    .bindPopup(text)
    .on('click', () => {
        document.getElementById('detailed_info').innerHTML = detailed_event;
    })
    .addTo(layer);
}

Everything works fantastically, except that I cannot find how to put layer_cdq below layer_2017 and layer_2018.

I have been looking at many solutions using panes and zIndex and cannot find a proper to solve this issue.

Could somebody help me?

Thank you!

本文标签： leafletHaving issues in sorting layers with LeafletJSStack Overflow