Farbcode einer Flugblatt-Polylinie basierend auf zusätzlichen Werten, z. B. Höhe, Geschwindigkeit,

13

Ich möchte einen GPX-Track auf einer Leaflet-Karte zeichnen. Die Polylinie sollte nicht nur eine Farbe haben, sondern ich möchte bestimmte Werte wie Höhe, Geschwindigkeit, Herzfrequenz, Temperatur, Trittfrequenz und Steigung farblich kennzeichnen. Natürlich kann immer nur ein Wert angezeigt werden.

Die Werte würden zusammen mit L.LatLngzB in einem meta: {ele: 298, hr: 155}Objekt gespeichert .

Ich bin neu bei Leaflet und bin besonders besorgt darüber, einen effizienten Weg zu finden, dies zu tun. Das erste, was mir in den Sinn kam, war, Hunderte oder Tausende von Polylinien mit jeweils einer speziellen Farbe zu erstellen. Aber das klingt sehr gierig in Bezug auf Speicher und CPU.

Irgendwelche Ideen?

Ein Beispiel, was ich meine, kann hier angesehen werdenMyTourbook-Screenshot

leaflet hgoebl
quelle
Können Sie uns bitte eine Beispieldatei zur Verfügung stellen? Auf diese Weise könnte es einfacher sein, zu helfen.
Uströtz
Hier ein Beispiel: track-and-find.me/gpx-viewer/data/kampenwand.gpx
hgoebl

Antworten:

7

Konvertieren Sie Ihren GPX-Track mit QGIS in einen GeoJSON-Track.

Nehmen wir an, Ihr GeoJSON sieht so aus. Das GeoJSON hat ein Attribut elevationmit dem Wert der Höhe.

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


Fügen Sie Ihren GeoJSON mit dem folgenden Code zu Ihrer Flugblattkarte hinzu. Verwenden Sie eine Funktion, um Ihre Datei zu formatieren. Das "color"Element ruft die Funktion auf get colorund übergibt den elevationWert Ihres Features als Parameter.

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

Die Funktion getColorgibt die Farbe basierend auf dem Höhenwert zurück.

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

Ich habe eine JSFiddle mit dem Beispiel GeoJSON und den oben beschriebenen Funktionen erstellt: http://jsfiddle.net/2VY5z/1/

ustroetz
quelle
1
Danke, das ist eine mögliche Lösung. Ich habe ein bisschen an jsfiddle.net/2VY5z/3 herumgespielt und festgestellt, dass intern für jedes Feature eine Ebene erstellt wird. Bei langen GPX-Strecken kann das wohl ziemlich überwältigend werden. Deshalb warte ich ein paar Stunden auf eine noch bessere Antwort, bis Sie die "richtige" Note bekommen.
Hgoebl
1
Ich bin mit @hgoebl einverstanden, ein Quellfeature in tausend kleine Stücke zu segmentieren, scheint im Leistungssinn nicht gut zu sein. Ich denke, wir brauchen eine spezielle Klasse, die von L.Path mit der oben genannten Funktionalität abgeleitet ist. Vielleicht hat es schon jemand geschafft? ;)
Unibasil
Ich entwickle gerade ein Layer-Plugin, das etwas effizienter ist. Aber ich fürchte, ich muss mindestens die Anzahl der <path>Elemente so oft erstellen, wie die Farbe wechselt. Leider gibt es keine Möglichkeit, die Farbe in einem Pfad zu ändern: M184 398L187 395C#00FF00 L183 399Wäre dafür erforderlich (C = Farbe).
hgoebl
7

Ich habe ein kleines Plugin für Leaflet erstellt: Leaflet.MultiOptionsPolyline .

Hier ist ein Screenshot von der Demo-Seite :

Beispiel von der Demo-Seite

Derzeit fehlt die Dokumentation, aber die Demoseite verweist auf den Quellcode, der sich selbst erklären sollte.

Ihr Feedback ist willkommen (erstellen Sie ein Problem bei GitHub oder kommentieren Sie diese Antwort, wenn Sie keinen GitHub-Account haben).

hgoebl
quelle
2

Sieht so aus, als wäre dies der alte Thread, aber hoffentlich findet das jemand hilfreich.

Ein Leaflet-Plugin zum Zeichnen von Farbverläufen entlang von Polylinien. https://github.com/iosphere/Leaflet.hotline/ Demo

Dzmitry Atkayey
quelle
1
Es scheint hilfreich zu sein, aber in der Regel sollte eine Antwort mehr als nur einen Link enthalten. Selbst wenn Sie nur eine Zusammenfassung der Inhalte auf der anderen Seite des Links angeben, sollte ein anderer Benutzer verstehen können, was diese Lösung ist und warum sie die ursprüngliche Frage adäquat behandelt, ohne dass dieser Benutzer diese Seite verlassen muss.
JoshC
@ JoshC, danke, hoffe, es ist die verständliche Beschreibung nach dem Update, wenn Sie ein Konto, das Bild viel erklärt
Dzmitry Atkayey