Codice colore a polilinea di un volantino in base a valori aggiuntivi, ad esempio altitudine, velocità,

13

Vorrei disegnare una traccia GPX su una mappa Leaflet. La polilinea non dovrebbe avere un solo colore, ma mi piacerebbe mostrare determinati valori come altitudine, velocità, frequenza cardiaca, temperatura, cadenza, pendenza codificata a colori. Naturalmente è possibile visualizzare solo un valore alla volta.

I valori verrebbero archiviati insieme L.LatLng, ad es. In un meta: {ele: 298, hr: 155}oggetto.

Sono nuovo di Leaflet e particolarmente preoccupato di trovare un modo efficace per farlo. Il primo che mi è venuto in mente è stato quello di creare centinaia o migliaia di polilinee ognuna con un colore speciale. Ma questo sembra molto avido per quanto riguarda memoria e CPU.

Qualche idea?

Un esempio di ciò che intendo può essere visualizzato qui Schermata di MyTourbook

leaflet

— hgoebl
fonte

Potete per favore fornire un file di esempio. In questo modo potrebbe essere più facile aiutare.

— ustroetz,

Ecco un esempio: track-and-find.me/gpx-viewer/data/kampenwand.gpx

— hgoebl

7

Converti la tua traccia GPX in un GeoJSON con QGIS.

Supponiamo che il tuo GeoJSON assomigli a questo. GeoJSON ha un attributo elevationcon il valore dell'elevazione.

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

Aggiungi il tuo GeoJSON con il seguente codice alla mappa del tuo volantino. Usa una funzione per dare uno stile al tuo file. L' "color"elemento chiama la funzione get colore passa il elevationvalore della funzione come parametro.

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

La funzione getColorrestituisce il colore in base al valore di elevazione.

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

Ho realizzato un JSFiddle con l'esempio GeoJSON e le funzioni sopra descritte: http://jsfiddle.net/2VY5z/1/

— ustroetz
fonte

1

Grazie, questa è una possibile soluzione. Ho armeggiato un po ' jsfiddle.net/2VY5z/3 e ho osservato che internamente ci sarà un livello creato per ogni funzione. Nel caso di lunghe tracce GPX, suppongo che questo possa diventare abbastanza travolgente. Perciò aspetterò alcune ore per una risposta ancora migliore fino a quando non otterrai il segno "corretto".

— hgoebl

1

Sono d'accordo con @hgoebl, segmentare una funzione sorgente in un migliaio di piccoli pezzi sembra non essere buono in termini di prestazioni. Penso che abbiamo bisogno di una classe speciale, derivata da L.Path con le funzionalità sopra menzionate. Forse qualcuno l'ha già fatto? ;)

— unibasil

Attualmente sto sviluppando un plug-in Layer che è un po 'più efficiente. Ma temo di dover creare almeno il numero di <path>elementi ogni volta che cambia colore. Purtroppo non c'è modo di cambiare colore in un percorso: M184 398L187 395C#00FF00 L183 399sarebbe necessario per quello (C = colore).

— hgoebl

7

Ho creato un piccolo plugin per Leaflet: Leaflet.MultiOptionsPolyline .

Ecco uno screenshot dalla pagina demo :

esempio dalla pagina demo

Attualmente manca la documentazione, ma la pagina demo si collega al codice sorgente che dovrebbe essere abbastanza autoesplicativo.

Il tuo feedback è benvenuto (crea un problema su GitHub o commenta questa risposta se non hai un account GitHub).

— hgoebl
fonte

2

Sembra che questo sia il vecchio thread, ma speriamo che qualcuno lo trovi utile.

Un plug-in Leaflet per disegnare sfumature colorate lungo le polilinee. https://github.com/iosphere/Leaflet.hotline/

— Dzmitry Atkayey
fonte

1

Sembra essere utile, ma come regola generale, una risposta dovrebbe contenere più di un semplice link. Anche se tutto ciò che fai è fornire un riepilogo di ciò che si trova dall'altra parte del collegamento, un altro utente dovrebbe essere in grado di capire qual è questa soluzione e perché risponde adeguatamente alla domanda originale, senza che l'utente debba lasciare questa pagina.

— JoshC,

@JoshC, grazie, spero che sia la descrizione comprensibile dopo l'aggiornamento se prendi un account che l'immagine spiega molto

— Dzmitry Atkayey,