How to optimize leaflet eachLayer method - javascript

[aba2s]

J'ai deux fonctions :
- Une qui récupère les données depuis un API (fonction request)
- Et une autre qui s'occupe de traiter les données une fois récupérer (fonction dropdown)
Le souci est que la deuxième fonction est trop lente. J'aimerai bien l'optimiser.
Pouvez-vous svp m'aiguiller?
Merci

Code : Tout sélectionner

const request = async () => {
const links = await fetch(`http://127.0.0.1:8000/api/network/${network_id}/edges/`);
  const linksdata = await links.json();
  return linksdata
}
request();

async function linkDropDown() {
  // Remove any previous legend
  d3.select('#linkLegendSvg').remove();
  const edges_data_api = await request()

  /* Lanes contants variables*/
  var lanes_array = edges_data_api.map(element => element.lanes);
  var lanes_max = d3.max(lanes_array);
  var lanes_min = d3.min(lanes_array);
  var lanes_colorscale = d3.scaleLinear().domain(d3.extent(lanes_array))
    .interpolate(d3.interpolateHcl)
    .range([d3.rgb('#FFF500'), d3.rgb("#FF0000")]);

  /* Length constants variables*/
  var length_array = edges_data_api.map(element => element.length);
  var length_colorscale = d3.scaleLinear()
    .domain(d3.extent(length_array))
    .interpolate(d3.interpolateHcl)
    .range([d3.rgb("#FFF500"), d3.rgb("#00ff00")]);
  var length_max = d3.max(length_array);
  var length_min = d3.min(length_array);

  /* Speed constants variables*/
  var speed_array = edges_data_api.map(element => element.speed);
  var speed_colorscale = d3.scaleLinear().domain(d3.extent(speed_array))
    .interpolate(d3.interpolateHcl)
    .range([d3.rgb("#FFF500"), d3.rgb("#000066")]);
  var speed_max = d3.max(speed_array);
  var speed_min = d3.min(speed_array);

  var linkSelector = document.getElementById('linkSelector')
  if (linkSelector.value == "lanes") {
    drawLinkLegend(lanes_colorscale, lanes_min, lanes_max);
    geojsonLayer.eachLayer(function(layer) {
      let currentLayer = edges_data_api.find(
        element => element.edge_id === layer.feature.properties.edge_id)
      let lanes_color = lanes_colorscale(currentLayer.lanes)
      layer.setStyle({
        fillColor: lanes_color,
        color: lanes_color,
      });

      layer.on('mouseover', function(e) {
        layer.setStyle({
          color: 'cyan',
          fillColor: 'cyan'
        })
      })
      layer.on('mouseout', function(e) {
        layer.setStyle({
          color: lanes_color,
          fillColor: lanes_color
        })
      })
    })
  } else if (linkSelector.value == "length") {
    drawLinkLegend(length_colorscale, length_min, length_max);
    geojsonLayer.eachLayer(function(layer) {
      let currentLayer = edges_data_api.find(
        element => element.edge_id === layer.feature.properties.edge_id)
      var length_color = length_colorscale(currentLayer.length)
      layer.setStyle({
        fillColor: length_color,
        color: length_color
      });
      layer.on('mouseover', function(e) {
        layer.setStyle({
          color: 'cyan',
          fillColor: 'cyan'
        })
      });
      layer.on('mouseout', function(e) {
        layer.setStyle({
          color: length_color,
          fillColor: length_color
        })
      });
    });
  }
}

[brown7]

You can try this code and check if it is working or not!

Code : Tout sélectionner

function linkDropDown(){
  // Remove any previous legend
  d3.select('#linkLegendSvg').remove();

  if (linkSelector.value ==="lanes"){
       var data = geo_json_6e3c60c8b0b046c1a06eb56942730a3a.toGeoJSON().features
       var Roads = geo_json_6e3c60c8b0b046c1a06eb56942730a3a

      //Get min and max values
      var max = d3.max(data, function(d){
          return d.properties.lanes;
      });

      var min = d3.min(data, function(d){
        return d.properties.lanes;

      });

      let colorscale = d3.scaleSequential()
          .domain(d3.extent(arrayObject))
          .interpolator(d3.interpolateOranges);

      drawLinkLegend(arrayObject, colorscale, min, max);
      Roads.eachLayer(function (layer) {
        
          layer.setStyle({fillColor: colorscale(layer.feature.properties.lanes)})
          
        });
    }