OpenLayers vs Leaflet vs ArcGIS API for JavaScript: Bounding Box erstellen
Folgende Aufgabe wollte ich letztens lösen:
Auf einer Karte soll ein Benutzer eine Boundig-Box aufziehen können. Also ein Rechteck um einen Bereich abzugrenzen. Die geographischen Koordinaten (Länge, Breite) der Boundig-Box sollen auf der Seite in einer bestimmten Formatierung ausgegeben werden. Die Benutzung soll auf Smartphones mit Gesten ebenso wie auf einem Desktop-PC möglich sein.
Ich habe dies in OpenLayers, Leaflet und ArcGIS API for JavaScript umgesetzt und verglichen.
Hier meine Erfahrungen
OpenLayers
Ich habe schon länger nichts mehr mit OpenLayers gemacht. Hier hat sich einiges geändert. Bei OpenLayers kann man nicht mehr einfach JavaScript zusammenschrauben, man muss nun mit NPM und Parcel ein eigenes JavaScript Bundle bauen. Mit der Anleitung und den Beispielen klappt es ganz gut. Allerdings kann der Build-Prozess auch etwas komplex sein, um mal schnell was auszuprobieren. Folgendes Beispiel bietet eigentlich einen guten Anhaltspunkt für mein Vorhaben. Das gesamte JavaScript hier.
Das Problem ist aber: Es ist mobile nicht bedienbar. Vielleicht geht es über einen anderen Weg in OpenLayers, aber ich habe mit daraufhin Leaflet angesehen.
Leaflet
Out-Of-The-Box lässt sich mein Vorhaben mit Leaflet nicht umsetzen. Aber es gibt ein recht gut dokumentiertes Plug-In Leaflet-Draw. Generell baut Leaflet eher auf ein schlankes Basissystem, dass mit Plug-Ins erweitert werden kann. Die Umsetzung geht recht schnell, aber beim Test auf dem Mobilgerät raucht der Kopf wieder: Unter Firefox auf Android funktioniert alles, bei Chrome nicht. Es gibt auch einen dokumentierten Bug. Der ist eigentlich geschlossen, aber wohl doch nicht erledigt.
ArcGIS API for JavaScript
Durch die Umstellung von 3.x auf 4.x, hinkt die Doku noch etwas. So kann man sich schon mal die Zähne ausbeißen, wenn man die ESRI-Hintergrundkarte mit geographischen Koordinaten haben will. Schlussendlich ging es nur über eine ArcGIS-Portal Karte. Bei der Funktionalität selbst bietet eigentlich das neue Sketch Widget alles was man braucht und funktioniert auch mobile recht gut. Aber ich will die Zeichenfunktion nur auf Rechtecke begrenzen. Was bei Leaflet einfach zu konfigurieren ist, lässt einen hier verzweifeln. Wenn man nicht das Widget selbst angepasst builden will (die Doku hierzu ist auch mangelhaft), bleibt einem nichts anders als per CSS die Schaltflächen auszublenden, die man nicht benötigt. Alles in allem funktioniert es aber dann gut und intuitiv. Fun-Fact: Die Klasse für „Rechteck zeichnen“ lautet esri-icon-checkbox-unchecked. Da hat mal wohl einfach mal das leere Checkbox-Icon wiederverwendet ?
Die drei Umsetzungen könnt Ihr hier anschauen:
Als erster einen Kommentar schreiben.
Schreibe einen Kommentar