Vector Tiles

Interaktive, moderne und konfigurierbare Vektorkarten für Web und Mobil

Bereitgestellt vom Team Basisvisualisierung des Landesamtes für Geoinformation und Landesvermessung Niedersachsen

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.

01.02.2022 +++ Integrierte Darstellung Niedersachsen und Bremen +++
Mehr dazu im Abschnitt Styles

26.01.2022 +++ Bitte QGIS-Version ab 3.22.2 verwenden +++
Mehr dazu im Abschnitt Daten

20.01.2022 +++ QGIS Readme +++
Mehr dazu im Abschnitt Daten

19.11.2021 +++ Microfrontend +++
Mehr dazu im Abschnitt Microfrontend

19.11.2021 +++ QGIS Einbindung +++
Mehr dazu im Abschnitt Daten

01.07.2021 +++ Live-Gang des Dienstes +++
Mehr dazu im Abschnitt Daten

Wir freuen uns über Feedback!
Sie nutzen unseren Dienst, haben Fragen zum Microfrontend oder zum Style?
Schreiben Sie gerne eine Mail an das Team Basisvisualisierung!

Styles

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 unsere fünf 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.

                            
<!DOCTYPE html>
<html>
<head>
    <title>Vector Tiles - MapLibre GL JS Demo</title>
    <script src="https://unpkg.com/[email protected]/dist/maplibre-gl.js"></script>
    <link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/maplibre-gl.css">
    <style>
        body { margin:0; padding:0; }
        #map { position:absolute; top:0; bottom:0; width:100%; }
    </style>
</head>
<body>
    <div id="map" class="map"></div>
    <script>
        var map = new maplibregl.Map({
            container: 'map',
            style: 'https://basisvisualisierung.niedersachsen.de/services/basiskarte/styles/vt-style-color.json',
            center: [9.8, 52.4],
            zoom: 13,
        });
    </script>
</body>
</html>
                    
                    
<!DOCTYPE html>
<html>
<head>
    <title>Vector Tiles - Mapbox GL JS Demo</title>
    <script src="https://api.mapbox.com/mapbox-gl-js/v2.3.0/mapbox-gl.js"></script>
    <link rel="stylesheet" href="https://api.mapbox.com/mapbox-gl-js/v2.3.0/mapbox-gl.css">
    <style>
        body { margin:0; padding:0; }
        #map { position:absolute; top:0; bottom:0; width:100%; }
    </style>
</head>
<body>
    <div id="map" class="map"></div>
    <script>
        // For Mapbox GL JS > Version 2 you need an access token to make the map appear
        mapboxgl.accessToken = '<your access token here>';
        var map = new mapboxgl.Map({
            container: 'map',
            style: 'https://basisvisualisierung.niedersachsen.de/services/basiskarte/styles/vt-style-color.json',
            center: [9.8, 52.4],
            zoom: 13,
        });
    </script>
</body>
</html>
                
                    
<!DOCTYPE html>
<html>
<head>
    <title>Vector Tiles - Leaflet Demo</title>
    <link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css"/>
    <style>
        body { margin:0; padding:0; }
        #map { position:absolute; top:0; bottom:0; width:100%; }
    </style>
</head>
<body>
    <div id="map"></div>
    <script src="https://api.tiles.mapbox.com/mapbox-gl-js/v1.13.0/mapbox-gl.js"></script>
    <script src="https://unpkg.com/[email protected]/dist/leaflet.js"></script>
    <script src="https://unpkg.com/mapbox-gl-leaflet/leaflet-mapbox-gl.js"></script>
    <script>
        var map = L.map('map', {
            minZoom: 6,
            maxZoom: 18,
        });
        var gl = L.mapboxGL({
            style: 'https://basisvisualisierung.niedersachsen.de/services/basiskarte/styles/vt-style-color.json',
        }).addTo(map);
        map.setView([ 52.4, 9.8 ], 13);
    </script>
</body>
</html>
                    
                        
<!DOCTYPE html>
<html>
<head>
    <title>Vector Tiles - OpenLayers Demo</title>
    <script src="https://api.tiles.mapbox.com/mapbox-gl-js/v1.13.0/mapbox-gl.js"></script>
    <link rel="stylesheet" href="https://api.tiles.mapbox.com/mapbox-gl-js/v1.13.0/mapbox-gl.css">
    <script src="https://cdn.jsdelivr.net/gh/openlayers/[email protected]/en/v6.5.0/build/ol.js"></script>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/openlayers/[email protected]/en/v6.5.0/css/ol.css" type=text/css>
    <style>
        body { margin:0; padding:0; }
        #map { position:absolute; top:0; bottom:0; width:100%; }
    </style>
</head>
<body>
    <div id="map" class="map"></div>
    <script>
        var center = [9.8, 52.4];
        var mbMap = new mapboxgl.Map({
            style: 'https://basisvisualisierung.niedersachsen.de/services/basiskarte/styles/vt-style-color.json',
            center: center,
            container: 'map',
        });
        var mbLayer = new ol.layer.Layer({
            render: function(frameState) {
                var canvas = mbMap.getCanvas();
                var viewState = frameState.viewState;
                mbMap.jumpTo({
                    center: ol.proj.toLonLat(viewState.center),
                    zoom: viewState.zoom - 1,
                    animate: false
                });
                return canvas;
            }
        });
        var map = new ol.Map({
            layers: [mbLayer],
            target: 'map',
            view: new ol.View({
                center: ol.proj.fromLonLat(center),
                zoom: 13
            })
        });
    </script>
</body>
</html>
                    
Beta

Microfrontend

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 Microfrontends sind, dass keine JavaScript-Kenntnisse benötigt werden und verwendete Bibliotheken nicht mehr selbst verwaltet werden müssen.

Das Microfrontend 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="https://dev.basisvisualisierung.niedersachsen.dev/apps/standortkarte/data/geojson/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
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

Weitere Informationen, der Source-Code und eine erweiterte Dokumentation sind unter folgender URL zu finden:

GitHub-URL:
https://github.com/Basisvisualisierung/vt-microfrontend

Daten

Die Datengrundlage für diesen Dienst sind die Vector Tiles der AdV-Arbeitsgruppe Smart Mapping. Ü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/v1/tiles/basiskarte.json

XYZ-URL:
https://basisvisualisierung.niedersachsen.de/services/basiskarte/v1/tiles/{z}/{x}/{y}.pbf

Einbindung in QGIS:

QGIS-ProjektIcon: Box mit einem Pfeil nach unten ReadmeIcon: Box mit einem Pfeil nach unten

Weitere Informationen zur Einbindung von Vector Tiles und dem zugrundeliegenden Datenmodell finden Sie in der Dokumentation von Smart Mapping.

Smart Mapping Icon: Box mit einem Pfeil nach rechts oben

Nutzungsbedingungen

Styles

Die Styles sind als Dienst kostenfrei nutzbar. Bei öffentlichen Bereitstellungen ist die Angabe eines Quellenvermerks für die Daten anzubringen:

Der Quellcode der Styles ist unter der MIT-Lizenz veröffentlicht. Mehr Informationen dazu finden Sie in unserem GitHub-Repository.

Daten

Der Vector-Tiles-Dienst darf kostenfrei in Kartenanwendungen eingebunden werden. Bei öffentlichen Bereitstellungen ist die Angabe eines Quellenvermerks anzubringen:

Eine über die temporäre Speicherung (Caching) hinausgehende dauerhafte Speicherung und Weiterverbreitung der Daten ist untersagt.

FAQ - Häufig gestellte Fragen

Die auf dieser Seite verfügbaren Vector Tiles decken seit dem 01.02.2022 das Gebiet des Landes Niedersachsen und Bremen ab. Sprechen Sie uns gerne an, wenn Sie nur die Vector Tiles für Niedersachsen benötigen. Für deutschlandweite Vector Tiles kann Smart Mapping zu Testzwecken genutzt werden.

Die Vector Tiles sind ein kostenfreier Dienst.

Nein, eine dauerhafte Speicherung und Weiterverbreitung der Daten ist untersagt.

Die Daten sind ein Auszug aus den Vector Tiles von Smart Mapping. Die Grundlage des Datensatzes sind hauptsächlich amtliche Geodaten des Landes Niedersachsen, wie z. B. das Basis-DLM und LoD1-Gebäudemodelle.

Die Daten stammen größtenteils aus Dezember 2021. Die Gebäudedaten können in der Aktualität abweichen.

Die Nutzung der Vector Tiles wird im Abschnitt Nutzung beschrieben.

Der Dienst unterstützt die Web-Mercator-Projektion (EPSG:3857).

Sie finden Code-Beispiele im Abschnitt Nutzung, in der Dokumentation von Smart Mapping und in der API-Referenz von Mapbox GL JS.
Landesamt für Geoinformation und Landesvermessung Niedersachsen (LGLN)
- Landesvermessung und Geobasisinformation - Landesbetrieb -
Podbielskistraße 331
30659 Hannover
Telefon: 0511 64609-0
Basisvisualisierung
Fachgebiet 241 - ATKIS® Anwendungsentwicklung, DTK50/100
E-Mail
Anbieter gem. § 5 Telemediengesetz und § 18 Abs. 1 des Medienstaatsvertrages (MStV):

Landesamt für Geoinformation und Landesvermessung Niedersachsen (LGLN)
Podbielskistraße 331
30659 Hannover
Telefon: +49 511 64609-0
Telefax: +49 511 64609-160
E-Mail: [email protected]

Rechtsform:
Landesamt
Umsatzsteuer-Identifikationsnummer gemäß § 27 a Umsatzsteuergesetz:
DE 275 115 401

Vertretungsberechtigt:
Michel Golibrzuch (Präsident des LGLN)
Verantwortlich:
Fachgebiet 241, Thorsten Jakob
Technischer Betrieb:
IBM Deutschland GmbH

Haftungsausschluss:

1. Inhalt des Onlineangebotes
Der Autor übernimmt keinerlei Gewähr für die Aktualität, Korrektheit, Vollständigkeit oder Qualität der bereitgestellten Informationen. Haftungsansprüche gegen den Autor, welche sich auf Schäden materieller oder ideeller Art beziehen, die durch die Nutzung oder Nichtnutzung der dargebotenen Informationen bzw. durch die Nutzung fehlerhafter und unvollständiger Informationen verursacht wurden, sind grundsätzlich ausgeschlossen, sofern seitens des Autors kein nachweislich vorsätzliches oder grob fahrlässiges Verschulden vorliegt. Alle Angebote sind freibleibend und unverbindlich. Der Autor behält es sich ausdrücklich vor, Teile der Seiten oder das gesamte Angebot ohne gesonderte Ankündigung zu verändern, zu ergänzen, zu löschen oder die Veröffentlichung zeitweise oder endgültig einzustellen.

2. Verweise und Links
Bei direkten oder indirekten Verweisen auf fremde Internetseiten ("Links"), die außerhalb des Verantwortungsbereiches des Autors liegen, würde eine Haftungsverpflichtung ausschließlich in dem Fall in Kraft treten, in dem der Autor von den Inhalten Kenntnis hat und es ihm technisch möglich und zumutbar wäre, die Nutzung im Falle rechtswidriger Inhalte zu verhindern. Der Autor erklärt hiermit ausdrücklich, dass zum Zeitpunkt der Linksetzung keine illegalen Inhalte auf den zu verlinkenden Seiten erkennbar waren. Auf die aktuelle und zukünftige Gestaltung, die Inhalte oder die Urheberschaft der gelinkten/verknüpften Seiten hat der Autor keinerlei Einfluss. Deshalb distanziert er sich hiermit ausdrücklich von allen Inhalten aller gelinkten /verknüpften Seiten, die nach der Linksetzung verändert wurden. Diese Feststellung gilt für alle innerhalb des eigenen Internetangebotes gesetzten Links und Verweise sowie für Fremdeinträge in vom Autor eingerichteten Gästebüchern, Diskussionsforen und Mailinglisten. Für illegale, fehlerhafte oder unvollständige Inhalte und insbesondere für Schäden, die aus der Nutzung oder Nichtnutzung solcherart dargebotener Informationen entstehen, haftet allein der Anbieter der Seite, auf welche verwiesen wurde, nicht derjenige, der über Links auf die jeweilige Veröffentlichung lediglich verweist.

3. Urheber- und Kennzeichenrecht
Der Autor ist bestrebt, in allen Publikationen die Urheberrechte der verwendeten Grafiken, Tondokumente, Videosequenzen und Texte zu beachten, von ihm selbst erstellte Grafiken, Tondokumente, Videosequenzen und Texte zu nutzen oder auf lizenzfreie Grafiken, Tondokumente, Videosequenzen und Texte zurückzugreifen. Alle innerhalb des Internetangebotes genannten und ggf. durch Dritte geschützten Marken- und Warenzeichen unterliegen uneingeschränkt den Bestimmungen des jeweils gültigen Kennzeichenrechts und den Besitzrechten der jeweiligen eingetragenen Eigentümer. Allein aufgrund der bloßen Nennung ist nicht der Schluß zu ziehen, dass Markenzeichen nicht durch Rechte Dritter geschützt sind! Das Copyright für veröffentlichte, vom Autor selbst erstellte Objekte bleibt allein beim Autor der Seiten. Eine Vervielfältigung oder Verwendung solcher Grafiken, Tondokumente, Videosequenzen und Texte in anderen elektronischen oder gedruckten Publikationen ist ohne ausdrückliche Zustimmung des Autors nicht gestattet.

4. Rechtswirksamkeit dieses Haftungsausschlusses
Dieser Haftungsausschluss ist als Teil des Internetangebotes zu betrachten, von dem aus auf diese Seite verwiesen wurde. Sofern Teile oder einzelne Formulierungen dieses Textes der geltenden Rechtslage nicht, nicht mehr oder nicht vollständig entsprechen sollten, bleiben die übrigen Teile des Dokumentes in ihrem Inhalt und ihrer Gültigkeit davon unberührt.