Leaflet: Linien auf Landkarten darstellen
Linuchs
- grafik
- javascript
Moin,
mit Erfassung jedes Veranstaltungsortes unterstütze ich mit meinem Kalender die Friendensfahrt durch Russland vom 23.07. - 13.08.2017
Dazu gehört diese interaktive Landkarte, die ich mit Hilfe von Leaflet mit Veranstaltungsorten und für die Friedensfahrt auch mit Linien versehe. Ich finde es persönlich sehr bereichernd, geografische Kenntnisse über Russland zu gewinnen.
Ich habe jeder Veranstaltung das Feld folge_ort_id gespendet. Also kann die Linie von diesem Ort zum nächsten gezogen werden, denn unter den Orten sind die geogr. Koordinaten gespeichert.
Nun ein "kleines" Problem. Gerne möchte ich die sieben Touren farbig unterscheiden. Doch die Touren haben zahlreiche Linien gemeinsam, überdecken sich also.
Für jede Linie muss ich Leaflet vier Koordinaten melden:
/* ***********************
* Linien
*********************** */
var linien = new Array (
new Array (53.4333,14.5333,54.733,20.483),
new Array (54.733,20.483,56.948,24.106),
new Array (56.948,24.106,57.817,28.333),
...
for ( i=0; i < linien.length; i++ ) {
L.polyline([ [linien[i][0],linien[i][1]], [linien[i][2],linien[i][3]] ], {color:'#f00',weight:1,opacity:1}).addTo(map);
}
Das ist so wie der Plan von Straßenbahn- oder Buslinien, die zum Teil dieselbe Strecke bedienen. Wenn solche Pläne auf Papier gedruckt werden, kann man die Abstände der Linien festlegen und unterscheiden. Aber auf einer interaktiven Karte mit variablem Maßstab?
Und wie man sieht, hat eine Veranstaltung oft mehrere Folge-Veranstaltungen. Nämlich dann, wenn sich die Gruppen trennen. Bei Straßenbahnen entsricht das einer Weiche, es geht in getrennten Strecken weiter.
Irgendwie fehlt mir eine Idee. Vor 30 Jahren habe ich Netzpläne programmiert. Da konnte ein Knoten auch mehrere Vorgänger und mehrere Nachfolger haben. Aber ich suche eine einfachere Lösung.
Jemand eine Idee?
Linuchs
Hallo,
Für jede Linie muss ich Leaflet vier Koordinaten melden:
das sind aber nicht vier Koordinaen, sondern vier Zahlen: Länge und Breite für Anfang und Ende der Linie. Auch verwendest du polyline nur als einfach Linie.
Zu deinem Problem: hast du dchon mal versucht, den Linien eine Opacity kleiner 1 zu geben? Dann schimmern die unteren Linien durch.
Gruß
Jürgen
Hallo Jürgen,
Auch verwendest du polyline nur als einfach Linie.
Ich hatte nach leaflet line
gesucht, aber wie du dir denken kannst, eine unüberschaubare Zahl von unsinnigen Treffern.
Zu deinem Problem: hast du dchon mal versucht, den Linien eine Opacity kleiner 1 zu geben? Dann schimmern die unteren Linien durch.
Danke, wäre ein Ansatz.
Linuchs
Hallo,
für deine Aufgabe ist polyline schon die richtige Wahl, nur eben als eine Linie mit vielen Stützpukten und nicht viele Linien mit nur zwei Stützpunkten.
Gruß
Jürgen
für deine Aufgabe ist polyline schon die richtige Wahl, nur eben als eine Linie mit vielen Stützpukten und nicht viele Linien mit nur zwei Stützpunkten.
Hmm - nachdenk. Eigentlich besteht ein Kalender aus nicht zusammenhängenden Events.
Aber ich hatte da mal was gemacht für Events an einer Bahnlinie. Also den Hinweis "Kommen Sie mit öffentlichen Verkehrsmitteln" umgedreht: "Welche Events erreiche ich mit der S-Bahnlinie 4711?"
Dass war eine Anzahl von Orten an der Linie. Muss ich mal wieder ausgraben, damals kannte ich Leaflet noch nicht.
Linuchs