Der Web-Editor soll dem Nutzer die Möglichkeit bieten historische Karten, die schon digitalisiert wurden und als Bilddatei vorliegen, in das OHDM-Projekt einzupflegen. Die aufgezeichneten Daten sollen als GeoJSON gespeichert und anschließend per API-Schnittstelle in die Datenbank eingefügt werden.
Der Editor bietet eine Schnittstelle nach außen, mit der er die aufgezeichneten Daten an den Server schickt.
Das verwendete Framework OpenLayer’s lädt das Kartenmaterial vom Geo-Server und erzeugt damit eine Karte. Mithilfe des Editors wird eine historische Karte hochgeladen und in die Karte eingefügt. Diese kann man anschließend skalieren und verschieben. Der Nutzer hat die Möglichkeit eine Strecke oder ein Gebiet aufzuzeichnen und abzuspeichern. Des Weiteren wird ein Zeitstempel und ein Name angegeben um Historische Orte zu dokumentieren. Diese Informationen liegen am Ende des Prozesses als GeoJSOn vor und kann an eine Schnittstelle gesendet werden.
Per "Post"-Methode werden GeoJSON-Daten an den Server gesendet
Momentan wird Openlayers's verwendet um die OHDM-Karte darzustellen. Außerdem werden die jQuery und Bootstrap Bibliotheken verwendet.
Um die Übersicht des Codes zu verbessern wurde er in mehrere „Activities“ geteilt:
Hier wird unter Verwendung von aus dem hoch geladenem Bild ein HTML Objekt mit dem Tag „img“ erstellt. Anschließend wird das Objekt an die nächste Activity weitergegeben: adjust_activity
Hier wird eine neue „ol.layer“ erstellt, diese enthält ein Objekt der Klasse ol.source. Das Objekt der Klasse ol.source dient in diesem Fall als Container für ein Feature (ol.feature). Ein Feature kann ein Point, LineString oder Polygon sein. Um nun ein Bild auf der Karte anzuzeigen benutze ich als Geometrie einen Punkt, dem ich das Bild als Style-Objekt (ol.style.Icon)zugewiesen habe.
Um das Feature (der Punkt samt seinem Bild als Style) auf der Karte zu bewegen und zu skalieren, wurden die Interactions Select und Translate (ol.interaction.Select, ol.interaction.Translate) zur Karte hinzugefügt.
Falls in die Karte hineingezoomt wird sollte das Bild im selben Verhältnis bleiben. Das war ganz schön tricky da die Zoomstufe der Karte (map.getView().getResolution())von annähernd 0 bis zu einer hohen positiven Zahl geht. Wobei kleine Zahlen nah an der Erde und hohe Zahlen weiter weg sind. Bei der Zoomstufe des Bildes (style.getImage().getScale()) ist es andersrum.
Um trotzdem das ungefähr selbe Verhältnis beizubehalten (bei mehrmaligen raus und reinzoomen sieht man das es sich verändert), wurde die initiale Zoomstufe der Karte erfasst. Diese wird beim zoomen dazu verwendet die Differenz der Zoomstufe zu bestimmten. Dieser Wert wird mit dem Verhältnis (Kartenzoom / Bildzoom) multipliziert. Der daraus resultierende Wert wiederum mit dem Bildzoom addiert und das Ergebnis als neuer Bildzoom festgelegt. (siehe adjust_activity.js Line 47-53).
Ist nun ein Bild in der Karte vorhanden kann man damit beginnen Geometrien einzuzeichnen. Dazu wird ein Layer-Objekt (ol.layer) erzeugt, dass die eingezeichneten Geometrien aufnehmen soll. In der Theorie werden diese aber in eine Source (ol.source) gemalt, die der Layer als Datenhaltung dient. Die Geometrien werden per Draw-Interaction (ol.interaction.Draw) in der Source sowie der Collection (ol.collection) gespeichert. Die Collection dient später zum auslesen der Daten. Per setProperties() werden Attribute zu den gezeichneten Geometrien -> Features hinzugefügt.
Hier werden die Daten gesammelt und entweder an die Import-Schnittstelle per AJAX-Post gesendet oder per Button heruntergeladen.
Man sollte die Daten aus den Textfeldern auf Code überprüfen und ggf. Escape-Characters einsetzen. Um SQL-Injection und Cross-Site-Scripting zu verhindern.
Es wär schön wenn man auf der Karte zunächst zwei Punkte von markanten Orten markieren könnte und nach dem Upload des Bildes anschließend dort. So könnte man das Bild programmatisch skalieren in dem diese Punkte übereinander gelegt werden.
Drag'n'Drop-Importer für GeoJSON um vorher gespeicherte Daten wieder zu importieren und weiter zu bearbeiten. Link
Karte verschwindet sobald der Punkt, der mit dem Bild über das Feature verknüpft ist, aus dem Viewport ist. Vorschlag: Bild mit Polygon umranden und Bild als Feature fürs Polygon benutzen.
- Super User!
sudo bash- Apache Server installieren
apt install apache2- Dieses Verzeichnis von GitHub klonen
Document Root's von Apache-Seiten liegen normalerweise in /var/www/.
also ...
cd /var/www/und anschließend klonen und Rechte an den User des Webservers geben
git clone https://github.com/OpenHistoricalDataMap/WebUndEditor.git
chown -R www-data:www-data WebUndEditor- Apache konfigurieren
Danach erstellt ihr mit dem Editor eurer Wahl eine .conf-Datei in /etc/apache2/sites-available.
vim OHDM_Editor.confDie Datei sollte in etwa so aussehen:
<VirtualHost *:80>
ServerName "<URL>"
ServerAdmin webmaster@<URL>
DocumentRoot /var/www/WebUndEditor
ErrorLog ${APACHE_LOG_DIR}/WebUndEditor_error.log
CustomLog ${APACHE_LOG_DIR}/WebUndEditor_access.log combined
<Directory /var/www/WebUndEditor/>
Options +FollowSymlinks
AllowOverride All
<IfModule mod_dav.c>
Dav off
</IfModule>
</Directory>
</VirtualHost>
- Seite online stellen
a2ensite OHDM_Editor.conf
service apache2 reload
# Super user out
exitphp -S localhost:8080 -t ./