Vector Tiles sind gekachelte Vektordaten, die für eine hohe Performance im Web ausgelegt sind. Unsere amtlichen Geodaten liegen bereits vorberechnet als Vektorkacheln auf einem Server. Kartenanwendungen müssen sich immer nur die Kacheln vom Server laden, die im aktuellen Kartenausschnitt benötigt werden. Dadurch wird die übertragene Datenmenge optimiert.
Ein großer Vorteil von Vector Tiles ist ihre Flexibilität. Die Karten werden mit Hilfe eines Styles (JSON) erst auf dem Endgerät gerendert. Durch die Erstellung individueller Basiskarten lassen sich auch Geofachdaten einfach mit den Vector Tiles kombinieren. Anders als ein Rasterformat, kann in den Vektorkarten ohne Verlust der Auflösung zwischen den Zoomstufen rein- und rausgezoomt werden. Dies ist vor allem für die effektive Nutzung auf hochauflösenden Bildschirmen wichtig.
Somit stellen die Vector Tiles eine gute Möglichkeit dar, um unsere Geodaten an neue technologische Herausforderungen anzupassen.
Die Basisvisualisierung liefert Werkzeuge mit denen individuelle Karten erstellt werden können. Unsere vorgefertigten Styles inklusive URL zur Einbindung sind unter Styles zu finden. Mit dem Bavi Frontend können individuelle Karten einfach auf der Webseite eingebunden werden.
Der Vector-Tiles-Dienst bietet verschiedene Kartenstyles zur Nutzung an, die über eine URL eingebunden werden können. Vector Tiles werden von vielen JavaScript-Bibliotheken wie z.B. MapLibre GL JS, Mapbox GL JS, OpenLayers oder Leaflet unterstützt.
Nachfolgend sind sieben vorgefertigten Styles sowie deren URLs zur Einbindung zu finden. Die Styles Farbe und Klassisch beinhalten mehr Objektarten als die reduzierten Styles Graustufen, Hell und Nacht. Die OSM-Kombi Styles bestehen aus ATKIS-Daten innerhalb und OSM-Daten außerhalb von Niedersachsen.
Für die eigenständige Einbindung von Vector Tiles mit JavaScript-Bibliotheken sind in unserem GitHub-Repository Code-Beispiele zu finden.
Für den Vector-Tiles-Dienst besteht zusätzlich die Möglichkeit, diesen als Microfrontend zu verwenden. Die Einbindung erfolgt durch den Import einer Javascript-Datei im Header einer Web-Anwendung. Durch die Verwendung der unten aufgeführten Komponenten kann eine Hintergrundkarte deklarativ in HTML beschrieben werden. Die Vorteile des Bavi Frontends sind, dass keine JavaScript-Kenntnisse benötigt werden und verwendete Bibliotheken nicht mehr selbst verwaltet werden müssen.
Das Bavi Frontend befindet sich derzeit in aktiver Entwicklung. Die Komponenten, Attribute und Funktionen können sich jederzeit ändern.
<!DOCTYPE html>
<html>
<head>
<title>Standard Beispiel</title>
<style>body { margin:0; padding:0; }</style>
<script src="https://basisvisualisierung.niedersachsen.de/services/microfrontend/vt-microfrontend.min.js"></script>
</head>
<body>
<vt-map></vt-map>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<title>Markierungen Beispiel</title>
<style>body { margin:0; padding:0; }</style>
<script src="https://basisvisualisierung.niedersachsen.de/services/microfrontend/vt-microfrontend.min.js"></script>
</head>
<body>
<vt-map map-style="light" zoom="8.3" lon="10" lat="52.2">
<vt-control type="navigation" position="top-left"></vt-control>
<vt-control type="fullscreen" position="top-right"></vt-control>
<vt-control type="scale" position="bottom-left"></vt-control>
<vt-marker lon="9.8" lat="52.0"></vt-marker>
<vt-marker lon="9.80205" lat="52.40729">
<vt-popup title="Landesvermessung und Geobasisinformation" text="Podbielskistraße 331, 30659 Hannover"></vt-popup>
</vt-marker>
</vt-map>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<title>Interaktion Beispiel</title>
<style>body { margin:0; padding:0; }</style>
<script src="https://basisvisualisierung.niedersachsen.de/services/microfrontend/vt-microfrontend.min.js"></script>
</head>
<body>
<script>
function mapClick(position, features) {
console.log(position.lon)
console.log(position.lat)
console.log(features)
}
</script>
<vt-map map-click="mapClick" map-style="night"></vt-map>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<title>Externe Quelle Beispiel</title>
<style>body { margin:0; padding:0; }</style>
<script src="https://basisvisualisierung.niedersachsen.de/services/microfrontend/vt-microfrontend.min.js"></script>
</head>
<body>
<vt-map map-style="light" zoom="7">
<vt-source type="geojson" src="./data/regionaldirektionen.min.geojson">
<vt-layer id="fill" type="fill" color="#ED6A61" opacity="0.1"></vt-layer>
<vt-layer id="outline" type="line" color="#ED6A61" opacity="0.8" line-width="4"></vt-layer>
</vt-source>
</vt-map>
</body>
</html>
Name | Benötigt | Typ | Standardwert | Reaktiv | Beschreibung/Werte |
---|---|---|---|---|---|
lon | Nein | Zahl | 9.73 | Ja | Kartenzentrum |
lat | Nein | Zahl | 52.37 | Ja | Kartenzentrum |
zoom | Nein | Zahl | 12 | Ja | Zoomlevel |
map-style | Nein | String/URL | classic | Ja | classic, color, grayscale, light, night, URL zu externem Style |
map-click | Nein | String | Ja | Callback-Funktion | |
map-height | Nein | String | 100vh | Ja | CSS-Wert für Kartenhöhe |
map-width | Nein | String | 100% | Ja | CSS-Wert für Kartenbreite |
Name | Benötigt | Typ | Standardwert | Reaktiv | Beschreibung/Werte |
---|---|---|---|---|---|
type | Ja | String | Ja | navigation, scale, geolocate, fullscreen | |
position | Ja | String | Ja | top-left, top-right, bottom-left, bottom-right |
Name | Benötigt | Typ | Standardwert | Reaktiv | Beschreibung/Werte |
---|---|---|---|---|---|
lon | Ja | Zahl | Ja | Positionswert | |
lat | Ja | Zahl | Ja | Positionswert |
Name | Benötigt | Typ | Standardwert | Reaktiv | Beschreibung/Werte |
---|---|---|---|---|---|
title | Nein | String | Ja | Titel des Popups | |
text | Nein | String | Ja | Text des Popups |
Name | Benötigt | Typ | Standardwert | Reaktiv | Beschreibung/Werte |
---|---|---|---|---|---|
type | Ja | String | Nein | vector, raster, geojson | |
src | Ja | URL | Nein | URL zu externem Dienst |
Name | Benötigt | Typ | Standardwert | Reaktiv | Beschreibung/Werte |
---|---|---|---|---|---|
id | Ja | String | Ja | ID des Layers aus externem Dienst | |
type | Ja | String | Ja | line, fill, circle, raster | |
minzoom | Nein | Zahl | Undefiniert | Ja | Zoomstufe, ab der Layer sichtbar ist |
maxzoom | Nein | Zahl | Undefiniert | Ja | Zoomstufe, bis zu der Layer sichtbar ist |
color | Nein | String | #000000 | Ja | Farbe, in der Layer dargestellt wird |
opacity | Nein | Zahl | 1.0 | Ja | Undurchsichtigkeits-Level |
line-width | Nein | Zahl | 1 | Ja | Legt Linienbreite fest, wenn type "line" ist |
circle-radius | Nein | Zahl | 5 | Ja | Legt Größe des Punktes fest, wenn type "circle" ist |
background | Nein | Boolean | false | Ja | Setzt die Position des Layers in den Hintergrund oder in den Vordergrund |
Weitere Informationen, der Source-Code und eine erweiterte Dokumentation sind unter folgender URL zu finden:
GitHub-URL:
https://github.com/Basisvisualisierung/bavi-frontend
Die Basisvisualisierung liefert Daten mit denen individuelle Karten erstellt werden können. Hierfür benötigte URLs und weitere Informationen sind unter Daten zu finden. Unsere Daten können als Vector Tiles in GIS-Systemen, wie z.B. QGIS eingebunden werden. Im GIS können die Vector Tiles als Hintergrundkarte mit z.B. Fachdaten kombiniert werden. Mehr dazu im Abschnitt QGIS-Einbindung.
Die Datengrundlage für diesen Dienst sind die Vector Tiles von basemap.de. Über folgende Links können die Daten für den Bereich von Niedersachsen in Kartenanwendungen direkt eingebunden werden.
TileJSON-URL:
https://basisvisualisierung.niedersachsen.de/services/basiskarte/v3/tiles/basiskarte.json
XYZ-URL:
https://basisvisualisierung.niedersachsen.de/services/basiskarte/v3/tiles/{z}/{x}/{y}.pbf
Beispiel Style-URL (mehr Styles im Abschnitt Styles):
https://basisvisualisierung.niedersachsen.de/services/basiskarte/styles/vt-style-color.json
Weitere Informationen zur Einbindung von Vector Tiles und dem zugrundeliegenden Datenmodell finden Sie in der Dokumentation von basemap.de.
Mit Einführung der Version 3 erfolgt der Kachelprozess mit dem Werkzeug ogr2ogr von GDAL. Das zugrunde liegende Datenmodell hat sich mit dem Umstieg auf Version 3 nicht geändert. Version 1 und Version 2 der Vector Tiles werden inhaltlich nicht mehr aktualisiert und wir empfehlen den Umstieg auf Version 3. Die Unterschiede in den Versionen können dem Änderungsprotokoll entnommen werden.
Für Nutzende unserer Styles besteht kein Handlungssbedarf, diese wurden an die neue Version angepasst.
Die Styles sind als Dienst kostenfrei nutzbar. Bei öffentlichen Bereitstellungen ist die Angabe eines Quellenvermerks für die Daten anzubringen:
© GeoBasis-DE / BKG CC BY 4.0
Der Quellcode der Styles ist unter der MIT-Lizenz veröffentlicht. Mehr Informationen dazu finden Sie in unserem GitHub-Repository.
Der Vector-Tiles-Dienst darf kostenfrei in Kartenanwendungen unter Beachtung der Lizenz CC BY 4.0 eingebunden werden. Bei öffentlichen Bereitstellungen ist die Angabe eines Quellenvermerks anzubringen:
© GeoBasis-DE / BKG CC BY 4.0