Codifique por color una polilínea de folleto basada en valores adicionales, por ejemplo, altitud, velocidad,

Me gustaría dibujar una pista GPX en un mapa de folleto. La polilínea no debe tener solo un color, pero me gustaría mostrar ciertos valores como altitud, velocidad, frecuencia cardíaca, temperatura, cadencia, pendiente codificada por colores. Por supuesto, solo se puede visualizar un valor a la vez.

Los valores se almacenarían junto con L.LatLng, por ejemplo, en un meta: {ele: 298, hr: 155}objeto.

Soy nuevo en Leaflet y estoy especialmente preocupado por encontrar una manera eficiente de hacer esto. Lo primero que se me ocurrió fue crear cientos o miles de polilíneas, cada una con un color especial. Pero esto suena muy codicioso con respecto a la memoria y la CPU.

¿Algunas ideas?

Un ejemplo de lo que quiero decir se puede ver aquí

Convierta su pista GPX a GeoJSON con QGIS.

Digamos que su GeoJSON se ve así. GeoJSON tiene un atributo elevationcon el valor de la elevación.

        var yourGeoJSON = [ 
{ "type": "Feature", "properties": { "id": 2, "elevation": 50 }, "geometry": { "type": "LineString", "coordinates": [ [ 11.836395263671875, 47.75317468890147 ], [ 11.865234375, 47.73193447949174 ] ] } },
{ "type": "Feature", "properties": { "id": 1, "elevation": 750 }, "geometry": { "type": "LineString", "coordinates": [ [ 11.865234375,47.73193447949174 ], [ 11.881027221679688, 47.700520033704954 ] ] } },
{ "type": "Feature", "properties": { "id": 0, "elevation": 1700 }, "geometry": { "type": "LineString", "coordinates": [ [ 11.881027221679688, 47.700520033704954 ], [ 11.923599243164062, 47.706527200903395 ] ] } },
{ "type": "Feature", "properties": { "id": 0, "elevation": 3000 }, "geometry": { "type": "LineString", "coordinates": [ [ 11.923599243164062, 47.706527200903395 ], [ 11.881027221679688, 47.700520033704954 ], ] } }
];

Agregue su GeoJSON con el siguiente código a su mapa de folleto. Use una función para diseñar su archivo. El "color"elemento llama a la función get colory pasa el elevationvalor de su característica como parámetro.

L.geoJson(yourGeoJSON, {
    style: function (feature) {
        return {
         "color": getColor(feature.properties.elevation),
         "opacity": 1,
        }}
}).addTo(map);

La función getColordevuelve el color en función del valor de elevación.

function getColor(x) {
  return x < 500     ?    '#bd0026':
         x < 1000     ?   '#f03b20':
         x < 1500     ?   '#fd8d3c':
         x < 2000     ?   '#fecc5c':
                          '#ffffb2' ;
};

Hice un JSFiddle con el ejemplo GeoJSON y las funciones descritas anteriormente: http://jsfiddle.net/2VY5z/1/

He creado un pequeño complemento para Leaflet: Leaflet.MultiOptionsPolyline .

Aquí hay una captura de pantalla de la página de demostración :

Actualmente carece de documentación, pero la página de demostración enlaza con el código fuente, lo que debería explicarse por sí mismo.

Sus comentarios son bienvenidos (cree un problema en GitHub o comente esta respuesta si no tiene una cuenta de GitHub).

Parece que este es el hilo viejo, pero con suerte, alguien lo encuentra útil.

Un complemento de folleto para dibujar gradientes de colores a lo largo de polilíneas. https://github.com/iosphere/Leaflet.hotline/