|
|
|
# 4.3 Leaflet Web-Map mit eingebundenen Diensten
|
|
|
|
|
|
|
|
## 4.3.1 Allgemeine Funktionsweise
|
|
|
|
|
|
|
|
*Autor: Isaak Lenth*
|
|
|
|
|
|
|
|
Für die Umsetzung der Karte innerhalb des GI-Projektes, haben wir uns Leaflet und seine Möglichkeiten angeschaut. Die kompakte Einrichtung der Webmap kommt uns hierbei zugute, als auch die vielen Möglichkeiten welche die Bibliothek selbst bietet, sowie die vielen zusätzlichen Erweiterungen welche bereits existieren. Die Erstellung einer einfachen Karte bietet keinerlei Probleme, da für eine simple Darstellung einer Hintergrundkarte lediglich ein WMS Dienst eingebunden werden muss. Dafür eignen sich freie [Open Street Maps Anbieter](https://wiki.openstreetmap.org/wiki/DE:WMS), als auch teils Kostenlose oder Kostenpflichtige Anbieter wie zum Beispiel [Mapbox](https://www.mapbox.com/). In unserer Umsetzung haben wir verschiedene WMS Dienste des Geodatenzentrums eingebunden.
|
|
|
|
Für die Umsetzung der interaktiven Karten wurde für das Projekt die JavaScrupt-Bibliothek Leaflet (https://leafletjs.com/) gewählt. Die kompakte Einrichtung der Webmap kommt uns hierbei zugute, als auch die vielen Möglichkeiten welche die Bibliothek selbst bietet, sowie die vielen zusätzlichen Erweiterungen welche bereits existieren. Die Erstellung einer einfachen Karte bietet keinerlei Probleme, da für eine simple Darstellung einer Hintergrundkarte lediglich ein WMS Dienst eingebunden werden muss. Dafür eignen sich freie [Open Street Maps Anbieter](https://wiki.openstreetmap.org/wiki/DE:WMS), als auch teils kostenlose oder kostenpflichtige Anbieter wie zum Beispiel [Mapbox](https://www.mapbox.com/). In unserer Umsetzung haben wir verschiedene WMS-Dienste des Geodatenzentrums eingebunden.
|
|
|
|
|
|
|
|
Um innerhalb der Karte auch auch die Punkte der Handstücke und Bohrungen anzeigen zu können, müssen wir einen WFS-Dienst einbinden. Dieser WFS-Dienst wurde von der HSBO gehostet und liefert aktuell Beispiel-Handstücke zurück. Dieser Dienst wird innerhalb der Umsetzung aufgerufen und liefert der Leaflet Karte die Handstücke im JSON-Format. Diese werden anschließend als Marker in der Karte eingebunden. Die gespeicherten Attribute der Handstücke werden außerdem innerhalb der Karte als Features in Popups Dargestellt.
|
|
|
|
|
|
|
|
## 4.3.2 Allgemeine Funktionsweise
|
|
|
|
|
|
|
|
*Autor: Benno Schmidt*
|
|
|
|
|
|
|
|
#### Konfiguration der in die Leaflet-Map eingebundenen WMS-Dienste
|
|
|
|
|
|
|
|
Um innerhalb der Karte auch auch die Punkte der Handstücke und Bohrungen anzeigen zu können, müssen wir einen WFS Dienst einbinden. Dieser WFS Dienst wurde von der HSBO gehostet und liefert aktuell Beispiel-Handstücke zurück. Dieser Dienst wird innerhalb der Umsetzung aufgerufen und liefert der Leaflet Karte die Handstücke im JSON-Format. Diese werden anschließend als Marker in der Karte eingebunden. Die gespeicherten Attribute der Handstücke werden außerdem innerhalb der Karte als Features in Popups Dargestellt.
|
|
|
|
Dies geschieht durch entsprechende Einträge in der Quelldatei
|
|
|
|
https://github.com/bogeo/web3dscan/blob/master/js/app.js.
|
|
|
|
|
|
|
|
Neben den WMS-URLs und den anzuzeigenden WMS-Layern lässt sich dort auch die Darstellungsreihenfolge der Dienste bzw. Layer festlegen. Beispiel: Folgender Eintrag bewirkt, dass die Geologische Karte zuunterst, die Grenzen der Regierungsbezirke und des Landes Hessens darüber "gezeichnet" werden.
|
|
|
|
|
|
|
|
<code>
|
|
|
|
var overlays = {
|
|
|
|
"Landesgrenze Hessen": hessen_umring_wms,
|
|
|
|
"Regierungsbezirke Hessen": hessen_rbz_wms,
|
|
|
|
"Geologische Karte": wms_geologie
|
|
|
|
};
|
|
|
|
</code>
|
|
|
|
|
|
|
|
|
|
|
|
Darstellung der Programmierten Testkarte
|
|
|
|
|
|
|
|
[(Zurück zum Inhalt des Endberichts)](https://gitlab.fbg-hsbo.de/web3dscans/web3dscans1/wikis/Endbericht) |
|
|
\ No newline at end of file |
