¿Utilizar perfiles de elevación de Leaflet con múltiples características GeoJSON?

Question

Tengo un archivo GeoJson que contiene muchas rutas, necesito mostrar cada ruta en un perfil de elevación a través del plugin Leaflet.elevation, en la necesidad de que cuando hago clic en una ruta su perfil se muestre en el perfil de elevación, aquí está mi código

  function addData(e) {
    var el = L.control.elevation();
    el.addData(e);
    map.addControl(el);
}

function onEachFeature(feature, layer) {
    layer.on ('click', function(e) {
        addData(feature)
    });
}

  $.getJSON('data/routes/network=Nwn_Lines.json', function(e) {
    Nwn = L.geoJson(e, {
      style: function(feature, layer) {
        return {color:'#0000FF', weight:3, opacity: 0};
      }, onEachFeature: function(feature, layer) {
        layer.on('mouseover', function() {
          $('#Name').html("Name: "+'<strong>'+layer.feature.properties.name+'</strong>');
          layer.setStyle({color: '#FFFF00', opacity: 1});
        })
        layer.on('mouseout', function() {
          $('#Name').html("Name: ");
          layer.setStyle({opacity: 0});
        })
      }, onEachFeature: onEachFeature
    }).addTo(map);
  });

Answer 1

Hay tres cosas principales que impiden que su código funcione. Tienes la opción onEachFeature definido dos veces para geoJSON capa. La segunda definición anula la primera. A continuación, llama a su addData con la función feature en lugar del evento e parámetro. Y cuando se añaden datos al control se utiliza el evento e parámetro insetad de e.target.layer .

El código debería ser algo así:

var elevationDisplayed = false;
var currFeature;

var el = L.control.elevation();

function showElevation(layer) {
  if (elevationDisplayed && (currFeature === layer.feature)) {
    map.removeControl(el);
    elevationDisplayed = false;
    }
  else {
    el.clear();
    if (!elevationDisplayed) el.addTo(map);
    el.addData(layer.feature);
    currFeature = layer.feature;
    elevationDisplayed = true;
  }
};

$.getJSON('data/routes/network=Nwn_Lines.json', function(e) {
  Nwn = L.geoJson(e, {
    style: function(feature, layer) {
      return {color:'#0000FF', weight:3, opacity: 0};
    }, onEachFeature: function(feature, layer) {
      layer.on('mouseover', function() {
        $('#Name').html("Name: "+'<strong>'+layer.feature.properties.name+'</strong>');
        layer.setStyle({color: '#FFFF00', opacity: 1});
      })
      layer.on('mouseout', function() {
        $('#Name').html("Name: ");
        layer.setStyle({opacity: 0});
      })
      layer.on ('click', function(e) {
        showElevation(e.target);
      });
    }
  }).addTo(map);
});

He añadido una lógica simple que el control de la elevación se oculta cuando se hace clic en la línea con la elevación mostrada la segunda vez.

---

Después de comprobar el archivo geoJSON de entrada, quedó claro que no contiene datos de altura. Cada punto debería tener tres coordenadas: [lat, lon, height]. Este geoJSON sólo tiene [lat, lon]. Por eso Chrome broser arroja un error

Error: <path> attribute d: Expected number, "M0,NaNL0.0295626108…".

IE11 y Firefox ni siquiera se quejan.