Code couleur d'une polyligne Leaflet basée sur des valeurs supplémentaires, par exemple altitude, vitesse,

J'aimerais dessiner une piste GPX sur une carte Leaflet. La polyligne ne doit pas avoir qu'une seule couleur, mais je voudrais montrer certaines valeurs comme l'altitude, la vitesse, la fréquence cardiaque, la température, la cadence, la pente avec un code couleur. Bien sûr, une seule valeur peut être visualisée à la fois.

Les valeurs seraient stockées avec L.LatLng, par exemple dans un meta: {ele: 298, hr: 155}objet.

Je suis nouveau sur Leaflet et je suis particulièrement soucieux de trouver un moyen efficace de le faire. La première qui m'est venue à l'esprit était de créer des centaines ou des milliers de polylignes chacune avec une couleur spéciale. Mais cela semble très gourmand en ce qui concerne la mémoire et le processeur.

Des idées?

Un exemple de ce que je veux dire peut être consulté ici

Convertissez votre piste GPX en GeoJSON avec QGIS.

Disons que votre GeoJSON ressemble à ceci. Le GeoJSON a un attribut elevationavec la valeur de l'élévation.

        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 ], ] } }
];

Ajoutez votre GeoJSON avec le code suivant à votre carte de brochure. Utilisez une fonction pour styliser votre fichier. L' "color"élément appelle la fonction get coloret transmet la elevationvaleur de votre fonction comme paramètre.

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

La fonction getColorrenvoie la couleur en fonction de la valeur d'élévation.

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

J'ai fait un JSFiddle avec l'exemple GeoJSON et les fonctions décrites ci-dessus: http://jsfiddle.net/2VY5z/1/

J'ai créé un petit plugin pour Leaflet: Leaflet.MultiOptionsPolyline .

Voici une capture d'écran de la page de démonstration :

Actuellement, il manque de documentation, mais la page de démonstration renvoie au code source qui devrait être assez explicite.

Vos commentaires sont les bienvenus (créez un problème sur GitHub ou commentez cette réponse si vous n'avez pas de compte GitHub).

On dirait que c'est l'ancien fil, mais j'espère que quelqu'un trouve cela utile.

Un plugin Leaflet pour dessiner des dégradés colorés le long des polylignes. https://github.com/iosphere/Leaflet.hotline/