Simbología de folletos usando jQuery con una respuesta api estática

Question

Estoy simbolizando una red de carreteras obteniendo una respuesta de una api estática. Tengo un GeoJSON cargado en el frontend que contiene XDSegID como clave primaria. Estoy enviando una petición AJAX que devuelve XDSegID y su valor contra ella. Luego, hago un bucle a través de la respuesta y asigno propiedades de estilo para cada valor mientras que coincide con sus IDs.

El problema es que el bucle consume mucho tiempo para completarse y luego los datos se muestran en el frontend. Estoy buscando un enfoque alternativo en el que cargaría todos los datos en la actualización del mapa y luego lo utilizaría para cambiar la simbología sin tener que hacer un bucle a través de los ID cada vez que se solicitan los datos. No se me ocurre ninguna forma de almacenar la simbología que pueda pasar a leaflet para que "setStyle" funcione.

Algún ejemplo de código sería útil. Mi código actual se comparte a continuación:

$(".ambtn").on("click",function(){
    $.ajax({
        method:"get",
        url:"/los_am",
        beforeSend: function(){
            $("#loader").css({
            display: "inline-block",
            visibility: "visible"
            });
        },
        complete: function(){
            $("#loader").css({
                display: "none",
                visibility: "hidden"
            });
        },
        success:function(res){
            // console.log(res)
            rdNetworkLyr.eachLayer(function (layer) {
                for (const key in res.XDSegID){
                    if(res.XDSegID.hasOwnProperty(key)){
                        if(layer.feature.properties.XDSegID === res.XDSegID[key] && res.los[key] === 'A'){
                            layer.setStyle({color:'#060'})
                        }
                        else if (layer.feature.properties.XDSegID === res.XDSegID[key] && res.los[key] === 'B'){
                            layer.setStyle({color:'#9f0'})
                        }
                        else if (layer.feature.properties.XDSegID === res.XDSegID[key] && res.los[key] === 'C'){
                            layer.setStyle({color:'#ff3'})
                        }
                        else if (layer.feature.properties.XDSegID === res.XDSegID[key] && res.los[key] === 'D'){
                            layer.setStyle({color:'#f90'})
                        }
                        else if (layer.feature.properties.XDSegID === res.XDSegID[key] && res.los[key] === 'E'){
                            layer.setStyle({color:'#f60'})
                        }
                        else if (layer.feature.properties.XDSegID === res.XDSegID[key] && res.los[key] === 'F'){
                            layer.setStyle({color:'#c00'})
                        }
                    }
                }
              });
        }
    });
});

Answer 1

Una posible solución para cambiar rápidamente el estilo de las características sería:

• primero lee los datos de AJAX y al terminar crea una capa vectorial rdNetworkLyr y dentro de onEachFeature asignar el color secundario como propiedad de la característica;
• definir alguna variable booleana global secondaryStyleActive que indica que el estilo secundario está en uso;
• en función del estilo para rdNetworkLyr comprueba si el estilo secundario está en uso; si es así, devuelve el color asignado como propiedad de la característica, si no, el color primario;
• en la función de procesamiento de clics niega el valor de secondaryStyleActive y luego reasignar el estilo a rdNetworkLyr para que el nuevo valor de secondaryStyleActive se tendrá en cuenta.

El código podría entonces ser algo así:

let secondaryStyleActive = false;

function rdNetworkStyle(feature) {
  let style = secondaryStyleActive ? feature.properties.color : '#aaaaaa';
  return style;
}

let rdNetworkLyr;

$.ajax({
  method:"get",
  url:"/los_am",
  beforeSend: function() {
    $("#loader").css({
      display: "inline-block",
      visibility: "visible"
    });
  },
  complete: function() {
    $("#loader").css({
      display: "none",
      visibility: "hidden"
    });
  },
  success: function(res) {
    rdNetworkLyr = L.geoJSON(data, {
      style: rdNetworkStyle,
      onEachFeature: function(feature) {
        for (const key in res.XDSegID){
          if(res.XDSegID.hasOwnProperty(key)){
            if(feature.properties.XDSegID === res.XDSegID[key] && res.los[key] === 'A'){
              feature.properties.color = '#060';
            }
            else if (feature.properties.XDSegID === res.XDSegID[key] && res.los[key] === 'B'){
              feature.properties.color = '#9f0';
            }
            else if ....
          }
        }
      }
    });
});

$(".ambtn").on("click",function() {
  secondaryStyleActive = !secondaryStyleActive;
  rdNetworkLyr.setStyle(rdNetworkStyle);
});