relation hervorheben mit OpenLayer

lorissa · 2018-12-20T20:23:57.000Z

Hallo,
weil ich heut eh hier bin und ich auf Anhieb nichts finde:

In openstreetmap.org via der Objektabfrage wird beim Anklicken eines Suchergebnisses, zB eine Grenzlinie, diese in der Maps farblich stark hervorgehoben. Genau so etwas suche ich per click-event für OpenLayer. Hat jemand einen Hinweis wie ich da ran komme?

wambacher · 2018-12-20T21:19:18.000Z

lorissa:

Hat jemand einen Hinweis wie ich da ran komme?

Bin lange raus aus Openlayers (*), aber du musst dir einen Style definieren und den dann bei der Darstellung der Polygone verwenden. IIRC steht das irgendwo in der OL-Doku bei “Styling”.

Gruss
walter

*) wer macht denn heutzutage noch Openlayers? Für alte Projekte mag ja noch Sinn machen, aber neue Projekte erstellt fast jeder mit Leaflet.

lorissa · 2018-12-20T21:53:57.000Z

Hm, ich verstehe nicht ganz was du mir mitteilen willst. Objekte in OL anzeigen ist ein anderes Thema. Ich brauch ja erstmal die Daten dessen was hervorgehoben werden soll. Wenn ich eine JSON habe, dann kann ich die einbinden, habe ich aber nicht.

Ich bin jetzt soweit:

Mit click-event per OL eine Overpass-API Abfrage und darin die relation ID im admin_level=8.
Mal eine Beispiel URL (komplett kopieren und im Browser öffnen):
http://overpass-api.de/api/interpreter?data=[out:json];is_in(%2248.525124%22,%228.823963%22);out+body;%3E;out+skel;

Die relation-id bei admin_level=8 = 3601424311
Davon 3600000000 abziehen = 1424311

Die relation-id in Overpass-Turbo verwenden:

[out:json][timeout:25];
  rel(1424311);
// print results
out body;>;out skel qt;

Direktlink: http://overpass-turbo.eu/s/EGV
In Overpass-Turbo wird die Grenze nun schön hervorgehoben dargestellt, sowie die Fläche gefüllt.

Jetzt ist meine Frage: Wie verbinde ich beides, also wie gelingt es die relation (Grenze) mit OpenLayer farblich hervorgehoben darzustellen, nach dem click-event?

wambacher · 2018-12-20T22:00:32.000Z

lorissa:

Hm, ich verstehe nicht ganz was du mir mitteilen willst. Objekte in OL anzeigen ist ein anderes Thema.

Ok, hatte das so verstanden, dass du die Oblekte stylen willst. Dass du überhaupt noch keine Daten hast, war mir entgangen.

Da ich Besitzer einer wunderhübschen PostgreSQL/PostGIS-Datenbank bin, spreche ich kein “Overpassisch”.

Gruss
walter

mmd · 2018-12-20T22:03:55.000Z

lorissa:

Die relation-id bei admin_level=8 = 3601424311
Davon 3600000000 abziehen = 1424311

Ohje, keine gute Idee, benutz besser (pivot) für sowas:

is_in({{center}});
rel[boundary=administrative][admin_level=8](pivot);
out geom;

lorissa · 2018-12-20T23:22:57.000Z

Hm, dann könnte ich die Koordinaten aus dem click-event verwenden:

is_in("48.525124","8.823963");
rel[boundary=administrative][admin_level=8](pivot);
out geom;

Was ist “geom” für ein Datenformat? XML? Was brauchts da für OL?

mmd · 2018-12-21T06:59:04.000Z

Schau am besten mal in der Overpass QL Doku nach “out geom”. Ob das mit OpenLayers funktioniert, weiß ich gerade auch nicht.
Einen OSM XML kompatiblen Output sollte folgende Query produzieren:

is_in(48.525124,8.823963);
(rel[boundary=administrative][admin_level=8](pivot);>;);out qt;

Übrigens: is_in am besten ohne Anführungszeichen benutzen, das sind ja Koordinaten.

lorissa · 2018-12-21T21:20:56.000Z

Ich komme nicht weiter…
Also der Scriptcode steht soweit, aber er funktioniert nicht. Zudem funktioniert er auf jsfiddle nicht, weil die Overpass API Abfragen blockieren.
Bei mir lokal bin ich jetzt soweit, dass ein Point bei coords 0.00,0.00 angezeigt wird, nachdem ich iwo in D in die map klicke. Das weicht noch etwas gewaltig vom gewünschten Ergebnis ab.

Per Overpass API die coords der relation-border von admin_level 8 als JSON besorgen.
Die coords aus dem JSON in ein Array packen, dabei lat,lon lon,lat ausrichten und die Punkte zu Kommas.
Das Array als Polygon per map.addLayer() anzeigen lassen (funktioniert noch nicht).

Was ich noch nicht kapiert habe ist das mit dem Array für das Layer Vector Polygon übergeben. Im OL example ist das ein 3-fach verschachteltes. Zudem die Sache mit dem EPSG. Liegt da vielleicht das Problem?
Oder liegt es an den Sources? Ich nutze das externe OL5 script.

Hier der Code bei jsfiddle, auch wenn es da sowieso nicht funktioniert. copy&paste.
https://jsfiddle.net/n9afvu6d/

mmd · 2018-12-21T21:45:42.000Z

lorissa:

Zudem funktioniert er auf jsfiddle nicht, weil die Overpass API Abfragen blockieren.

Das liegt nicht an jsfiddle, sondern daran dass du overpass-api.de via http statt https aufrufst. Das nennt sich “Blocked mixed content”:

https://developer.mozilla.org/en-US/docs/Web/Security/Mixed_content/How_to_fix_website_with_mixed_content

Ab und an mal im Browser einen Blick auf die Javascript Console werfen spart oft viel Zeit und Nerven…

lorissa · 2018-12-21T22:56:36.000Z

Ach, das wollte mir die Konsole mitteilen. Ich hab nur “blockiert” gelesen. Sorry. Danke für die Info.

Ich bin nun schon ein Stück weiter. Nur die Linien … das haut noch nicht hin. Woran könnte das liegen?
Man muss in die Maps innerhalb Deutschlands klicken.
https://jsfiddle.net/n9afvu6d/4/

mmd · 2018-12-21T23:14:47.000Z

Ist wahrscheinlich ein Problem mit der Sortierreihenfolge. Guck mal hier:
https://help.openstreetmap.org/questions/50685/overpass-api-wrong-order-of-nodes
https://stackoverflow.com/questions/26751879/overpass-relation-railway-segments
https://stackoverflow.com/questions/27403202/how-to-convert-an-osmar-object-osm-relation-containing-several-ways-to-a-close

lorissa · 2018-12-21T23:44:34.000Z

Aha, verstehe. In dem JSON der Overpass API hat jede Coord eine ID. Die einzelnen Coords selbst sind wahllos im JSON gespeichert, sozusagen nur als Points. Die Reihenfolge der IDs ist wiederum an extra Stellen sortiert, multidimensional. So ein Polygon besteht also aus mehreren Linien, deren einzelne Points in einer extra Liste sortiert sind und die Reihenfolge der kompletten Linie nochmals in einer Liste. kompliziert, kompliziert, lässt sich aber lösen.
https://www.w3schools.com/jsref/jsref_sort.asp

lorissa · 2018-12-22T00:08:39.000Z

Ooops, es ist wohl doch nicht so einfach, weil die finale Sortierung fehlt. Es sind also nur einzelne ways und das doofe daran, dass OL diese als Polygon automatisch schließt.

ikonor · 2018-12-22T09:47:23.000Z

OpenLayers unterstützt das OSM XML Format (Standard bzw. [out:xml] bei Overpass, siehe #7), allerdings leider ohne Relationen, das müsste man erweitern, hätte aber immerhin schon mal die Ways:
http://openlayers.org/en/latest/examples/vector-osm.html?q=osm
http://openlayers.org/en/latest/apidoc/module-ol_format_OSMXML-OSMXML.html
https://github.com/openlayers/openlayers/blob/master/src/ol/format/OSMXML.js

Einfacher ist vermutlich, osmtogeojson einzubinden, das alle Overpass Formate unterstützt und nach GeoJSON konvertiert:
https://github.com/tyrasd/osmtogeojson

rainerU · 2018-12-22T11:02:27.000Z

lorissa:

Es sind also nur einzelne ways und das doofe daran, dass OL diese als Polygon automatisch schließt.

Ich weiss nicht wie das bei JSON ist, aber wenn man die Grenze als OSM XML abfragt, z.B. mit


[timeout:25]; relation["de:amtlicher_gemeindeschluessel"="09775"];(._;>;);out body asc

dann enthält das XML die Knoten, die Wege und die Relation. Extrahiert man dann die Wege in einen Openlayers-Layer, dann wird da nichts geschlossen.

lorissa · 2018-12-22T20:20:06.000Z

Zwischenergebnis: Mit if else und Kram lassen sich die einzelnen ways aus dem JSON zu einem Polygon zusammenfügen (zwecks fill der Fläche nicht nur einzelne ways als Linien anzeigen).

@rainerU, ob XML oder JSON ist egal. Das ist nur ein anderes Format, die Daten sind gleich. Es werden alle nodes mit id aufgelistet und einzelne ways mit id sowie den zugehörigen node-ids, über die dann die coords zugewiesen werden. Das kann man sich wie zwei Tabellen in einer Datenbank vorstellen. Man macht einen INNER JOIN, ähnlich wie bei SQL.
https://www.w3schools.com/sql/sql_join.asp

Mit JSON tue ich mich in Javascript leichter. In JSON sehen die Daten so aus (URL komplett kopieren, dass funktioniert hier nicht mit anklicken): https://overpass-api.de/api/interpreter?data=[out:json];is_in(52.305130,13.813316);rel[boundary=administrative]admin_level=9;%3E;out;

Wie ich das gemacht habe ist schwer zu erklären, da sehr verschachtelt. Man muss beim ersten way anfangen, von dem dann das letzte value merken und in den restlich verbliebenen ways suchen und da dann weitermachen, aber, es kann sein, dass der folgende way rückwärts läuft, also vorher umkehren. Einen durchgelaufenen way-array anschließend leeren, damits nicht endlos läuft.
Und dann alles per Schleifen und in einer Schleife die way-nodes in den node-arrays suchen und die values (lat/lon) von da ins neue GeoJSON pushen. Ich hatte vorher alles gesammelt in neue arrays gepackt.

Da ich iwo gelesen habe, dass es auch borders mit way-Lücken gibt, wird mein Script nicht sicher sein.

@ikonor, Von dem osmtogeojson Script habe ich auch schon erfahren. Das soll wohl auch way-Lücken füllen. Werde ich evtl. mal antesten.

axelr · 2018-12-23T01:22:40.000Z

Deine Sortierung müsste dem relation Analyser http://ra.osmsurround.org/analyzeRelation?relationId=1424311 auch zugrunde liegen.
Wenn du auf weitere Grenzpolygone abzielst solltest du Superrelationen mit einbeziehen. Derzeit ist Bayern als einfache Relation (rel2145268) via overpass nur gelegentlich (wegen der Größe) ladbar.

mmd · 2018-12-23T09:01:11.000Z

axelr:

Derzeit ist Bayern als einfache Relation (rel2145268) via overpass nur gelegentlich (wegen der Größe) ladbar.

Also 10MB sind wirklich ein Piece of Cake, das dauert hier 6 Sekunden zum Laden. Wie sieht denn deine Query aus, und auf welchem Server bist du unterwegs?

lorissa · 2018-12-23T12:11:56.000Z

Relation Analyse, interessant. So als Script zum einbinden wäre nicht schlecht. Wobei in meinem Script bereits sowas ähnliches besteht. Also ich könnte checken, ob eine Grenze ein geschlossenes Polygon ergibt und wenn nicht, dann könnt ich die einzelnen ways alternativ nur als Linien anzeigen lassen. Aber, mal sehen. Ich brauch das Script vorerst nur für einen meiner Zwecke, auf maximal hohem AL. Und wenn mir da ein Fehler auftaucht, dann hab ich einen Grund ihn zu fixen. Für was ofizielles würde ich wohl osmtogeojson verwenden.