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

13

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 Capture d'écran de MyTourbook

leaflet

— hgoebl
source

Pouvez-vous s'il vous plaît fournir un exemple de fichier. De cette façon, il pourrait être plus facile d'aider.

— ustroetz

Voici un exemple: track-and-find.me/gpx-viewer/data/kampenwand.gpx

— hgoebl

7

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/

— ustroetz
source

1

Merci, c'est une solution possible. J'ai tripoté un peu jsfiddle.net/2VY5z/3 et observé qu'en interne il y aurait une couche créée pour chaque fonctionnalité. En cas de longues pistes GPX, je suppose que cela peut devenir assez écrasant. Je vais donc attendre quelques heures pour une réponse encore meilleure jusqu'à ce que vous obteniez la marque "correcte".

— hgoebl

1

Je suis d'accord avec @hgoebl, segmenter une fonctionnalité source en un millier de petits morceaux ne semble pas bon en termes de performances. Je pense que nous avons besoin d'une classe spéciale, dérivée de L.Path avec les fonctionnalités mentionnées ci-dessus. Peut-être que quelqu'un l'a déjà fait? ;)

— unibasil

Je développe actuellement un plugin Layer qui est un peu plus efficace. Mais je crains de devoir créer au moins le nombre d' <path>éléments aussi souvent que la couleur change. Malheureusement, il n'y a aucun moyen de changer de couleur dans un chemin: M184 398L187 395C#00FF00 L183 399serait nécessaire pour cela (C = couleur).

— hgoebl

7

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

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

exemple 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).

— hgoebl
source

2

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/

— Dzmitry Atkayey
source

1

Cela semble utile, mais en règle générale, une réponse doit contenir plus qu'un simple lien. Même si tout ce que vous faites est de donner un résumé de ce qui se trouve de l'autre côté du lien, un autre utilisateur devrait être en mesure de comprendre ce qu'est cette solution et pourquoi elle répond adéquatement à la question d'origine, sans que cet utilisateur ait à quitter cette page.

— JoshC

@JoshC, merci, j'espère que la description compréhensible après la mise à jour si vous prenez un compte que l'image explique beaucoup

— Dzmitry Atkayey