Deutsch DE English EN

Web Vektor

Beschreibung

Webkarten im Vektorformat (international Vector Tiles) bieten viele Vorteile: Flexibel konfigurierbar, interaktiv, immer scharf, schlank, dreh- und neigbar, häufig aktualisierbar, mit Attributen, flüssiges zoomen.
Erst mit Vector Tiles werden Karten auf Smartphones und hochauflösenden Bildschirmen zum Erlebnis in 2D und 3D.

Der Kartendienst basemap.de Web Vektor ist ein von Bund und Ländern gemeinsam entwickelter Kartendienst für Web und Mobil. Die deutschlandweite Karte wird monatlich aktualisiert, ständig weiterentwickelt und bietet die Qualität und Homogenität amtlicher Geodaten. Als Webkarte ermöglicht der Dienst freies Zoomen von der Deutschlandübersicht bis zu flächendeckenden 3D-Gebäudemodellen und amtlichen Hausnummern in modernem Design.

Die Nutzung des "Mapbox-konformen" Dienstes ist aber auch auf spezielle Software-Bibliotheken angewiesen. Wer nur statische Karten nutzt und auf breite Kompatibilität angewiesen ist, sollte einen Blick auf basemap.de Web Raster werfen.

Bereitstellung

Bereitgestellt wird basemap.de Web Vektor als Vector Tiles Dienst in den Standardkarten-Ausprägungen Farbe, Relief und Grau. Das Einbinden des Dienstes erfolgt über den Aufruf einer Style-JSON URL.

Kartenstile und Dienste-URL:

• Farbe: Die farbige Standardkarte ohne Geländedarstellung https://sgx.geodatenzentrum.de/gdz_basemapde_vektor/styles/bm_web_col.json
• Relief: Wie Farbe, aber mit Schummerung und Höhenlinien https://sgx.geodatenzentrum.de/gdz_basemapde_vektor/styles/bm_web_top.json
• Grau: Als Hintergrundkarte geeignete, graue Variante https://sgx.geodatenzentrum.de/gdz_basemapde_vektor/styles/bm_web_gry.json

Kachelarchive:

Die vektorbasierte Webkarte besteht aus zwei thematisch getrennten Kachelarchiven: Das Basis-Kachelarchiv, welches für alle Kartenstile verwendet wird und das Höhenlinien-Kachelarchiv, welches zusätzlich im Kartenstil „Relief“ Verwendung findet.

• Basis-Kachelarchiv:
https://sgx.geodatenzentrum.de/gdz_basemapde_vektor/tiles/v1/bm_web_de_3857/bm_web_de_3857.json
Zur Einbindung des Basis-Kachelarchivs in QGIS nutzen Sie die XYZ-Nomenklatur: https://sgx.geodatenzentrum.de/gdz_basemapde_vektor/tiles/v1/bm_web_de_3857/{z}/{x}/{y}.pbf

• Höhenlinien-Kachelarchiv:
https://sgx.geodatenzentrum.de/gdz_basemapde_vektor/tiles/v1/bm_web_hl_de_3857/bm_web_hl_de_3857.json
Zur Einbindung des Höhenlinien-Kachelarchivs in QGIS nutzen Sie die XYZ-Nomenklatur: https://sgx.geodatenzentrum.de/gdz_basemapde_vektor/tiles/v1/bm_web_hl_de_3857/{z}/{x}/{y}.pbf

Nutzung

Anschauen, mobil nutzen, ausdrucken:
Die Standardkarten-Stile von basemap.de Web Vektor können über den basemap.de Viewer aufgerufen und genutzt werden. 
https://basemap.de/viewer/
Die Ausgabe hochauflösender und großformatiger Karten ist damit ebenfalls möglich.

Web-Anwendungen entwickeln:
Der Dienst ist so konfiguriert, dass er mit folgenden Software-Bibliotheken uneingeschränkt verwendbar ist:
• Mapbox GL JS: https://github.com/mapbox/mapbox-gl-js
• MapLibre GL JS: https://github.com/maplibre/maplibre-gl-js
Der Dienst kann beispielsweise in weiteren Web-Clients eingebunden werden, wobei teilweise Einschränkungen bei der Kartendarstellung und Performanz in Kauf genommen werden müssen: OpenLayers, Leaflet.
MapLibre GL
Mapbox GL
Leaflet
Open Layers
<!DOCTYPE html>
<html>

<head>
   <title>basemap.de Web Vektor - MapLibre GL JS Demo</title>
   <script src='https://unpkg.com/maplibre-gl@2.4.0/dist/maplibre-gl.js'></script>
   <link href='https://unpkg.com/maplibre-gl@2.4.0/dist/maplibre-gl.css' rel='stylesheet'/>
   <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://sgx.geodatenzentrum.de/gdz_basemapde_vektor/styles/bm_web_col.json',
         center: [10, 51],
         zoom: 6,
      });
   </script>
</body>

</html>
<!DOCTYPE html>
<html>

<head>
   <title>basemap.de Web Vektor - Mapbox GL JS Demo</title>
   <script src="https://api.mapbox.com/mapbox-gl-js/v1.13.2/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://sgx.geodatenzentrum.de/gdz_basemapde_vektor/styles/bm_web_col.json',
         center: [10, 51],
         zoom: 6,
      });
   </script>
</body>

</html>
<!DOCTYPE html>
<html>

<head>
   <title>basemap.de Web Vektor - Leaflet Demo</title>
   <link rel="stylesheet" href="https://unpkg.com/leaflet@1.7.1/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/leaflet@1.7.1/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://sgx.geodatenzentrum.de/gdz_basemapde_vektor/styles/bm_web_col.json',
      }).addTo(map);
      map.setView([51, 10], 6);
   </script>
</body>

</html>
<!DOCTYPE html>
<html>

<head>
   <title>basemap.de Web Vektor - 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/openlayers.github.io@master/en/v6.5.0/build/ol.js"></script>
   <link rel="stylesheet"
      href="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/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 = [10, 51];
      var mbMap = new mapboxgl.Map({
         style: 'https://sgx.geodatenzentrum.de/gdz_basemapde_vektor/styles/bm_web_col.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: 6
         })
      });
   </script>
</body>

</html>
Im GIS einbinden:
Beispielsweise QGIS unterstützt Vector Tiles Dienste ab Version 3.16 nativ, allerdings noch mit Einschränkungen. Ausgewählte Vorteile: Nutzung beliebiger Projektionen, Ausgabe als Vektor-Pdf, Überlagerung eigener GIS-Daten.

Kreativ werden:
Für eine Anpassung der Kartenstile kann beispielsweise der Online-Editor Maputnik genutzt werden. Beispiel-URL für den Farb-Stil:
https://maputnik.github.io/editor/?style=https://sgx.geodatenzentrum.de/gdz_basemapde_vektor/styles/bm_web_col.json#6/51/10

Anregungen für thematische Webkarten finden Sie im nachfolgenden Kapitel.

Anwendungsbeispiele

Windrad-Dichte in Deutschland

Die Anzeige der Windräder-Dichte erfolgt in einer sogenannten Heatmap.
Jedes Windrad besitzt einen blauen Radius mit Verlauf. Wenn Windräder gehäuft vorhanden sind und die Radien sich überschneiden, färben sich diese in "wärmere" Farben – ähnlich einer Farbskala, wie man sie von Wärmebildkameras kennt. Blau (kalt), Grün (kühl), Gelb (warm), Orange (mittel), Rot (heiß).

Für die Hintergrundkarte wurde eine angepasste Form des Kartenstils "Grau" verwendet.

Grundsätzlich lässt sich solch eine Heatmap mit allen Punktobjekten erstellen. Als Beispiel wurden hier die Windräder aus dem ATKIS® Basis-DLM verwendet worden. Diese wurden in GeoJSON umgewandelt und als Heatmap visualisiert.

Verwendete Werkzeuge: QGIS zum Ausspielen der GeoJSON-Datei, Maputnik zur Gestaltung des Kartenstils, ein Code-Editor zum Anpassen der Html-Datei. Nähere Erläuterungen finden Sie dazu in der API-Dokumentation oder den Videos.

Baudenkmale in Brandenburg

Exemplarisch wurden einige ausgewählte Baudenkmale des Landes Brandenburg als GeoJSON eingebunden.
Quelle: Brandenburgisches Landesamt für Denkmalpflege (https://gis-bldam-brandenburg.de/index.php?page=dienste.php)

Für die Baudenkmale wurde eine dreidimensionale, rote Darstellung gewählt, um sie auf der grauen Hintergrundkarte hervorzuheben.

Mit einem Mausklick erscheinen Informationen über das gewählte Baudenkmal in einem Popup-Fenster.

Wie auch bei allen anderen hier aufgeführten Anwendungsbeispielen wird die Java-Script-Bibliothek Mapbox GL JS für die Kartendarstellung verwendet. Damit kann die Mausklick-Funktion und das Popup-Fenster konfiguriert werden.

Rettungstreffpunkte in Deutschland

Die Rettungspunkte (als GeoJSON eingebunden) werden durch ein separat eingebundenes Symbol visualisiert, da es nicht in der Standard-Symbol-Bibliothek ("Sprites") enthalten ist.

Per Mausklick sind Informationen in einem Popup-Fenster verfügbar.

Quelldaten: © KWF-Rettungspunkte v2.8, www.rettungspunkte-forst.de (Stand 2020)

Straßen breiter als 5.5m

Basierend auf dem Kartenstil "Grau" (inhaltlich vereinfacht und reduziert) werden alle Straßen mit einer Breite von 5,5m bis 6m in Orange und über 6m in Grün dargestellt, um beispielsweise die Befahrbarkeit mit überbreiten Fahrzeugen zu planen.

Zur Beschriftung von Straßen werden die im Kachelarchiv vorhandenen Informationen über die Breite von Straßen verwendet, welche im ATKIS® Basis-DLM gepflegt werden.

Stadtkarte mit Baumkataster

Hinweis: Bitte haben Sie Geduld beim Laden der Bäume, was in dieser prototypischen Anwendung 10-20 Sekunden dauern kann.

Die Baumstandorte aus dem Baumkataster als GeoJSON und die Verwendung zusätzlicher JavaScript-Bibliotheken (deck.gl, luma.gl, turf.js) ermöglichen eine Darstellung von dreidimensionalen Bäumen in einer Stadtkarte von Hamburg. Quelldaten: Transparenzportal Hamburg (Stand 2019)

Durch Drücken und Halten der rechten Maustaste kann die Szene frei gedreht werden. Durch Anklicken eines Baumes können Informationen über die Gattung, Stammumfang und Kronendurchmesser abgerufen werden.Die Höhe der Bäume ist in diesem Beispiel nicht bekannt, sie wird aus dem Kronendurchmesser abgeleitet.

Alternativ wird in folgender Anwendung das Baumkataster auch in einer zweidimensionalen Karte verwendet, hier ausschließlich mit der Funktionalität der Mapbox-Bibliothek.

Anfahrtssizze oder Wegbeschreibung

In diesem Beispiel wird eine Anfahrtsskizze bzw. Wegbeschreibung in Berlin mit individuellen Markern und der Grauvariante der Smart Mapping Webkarte als Hintergrund, dargestellt.

Die Wegbeschreibung wird entweder durch eigene Digitalisierung in einem GIS oder über den Open Route Service als GeoJSON erstellt und in die Webkarte integriert.

Die Marker zeigen mit einem Mausklick Informationen in einem Popup Fenster.

3D-Modelle aus Drohnenbefliegungen in der Karte

Hinweis: Das Laden der 140MB großen 3D-Datei kann über 20 Sekunden dauern.

Das texturierte 3D-Modell der "Kappl", einer Wallfahrtskirche bei Waldsassen ist im glb-Format auf dem Webserver abgelegt.

Die glb-Datei wird mittels three.js in Mapbox GL JS integriert und direkt in der Karte dargestellt

Karten vergleichen

Mit dem Swipe-Tool in Mapbox GL JS können Kartendienste verglichen werden.

Der blaue Swipe-Button ermöglicht ein Verschieben der Ansicht zweier zeitgleich dargestellter Vector Tiles Dienste.

In dem Beispiel werden die AdV-Smart Mapping Kartenstile "Relief" und "Luftbild" verglichen.

Animierte Gebäudehöhenkarte

In der Karte werden die Gebäude entsprechend einer Höhenklassifikation eingefärbt. Der reduzierte Hintergrund ist in einem dunklen Kartenstil gehalten.

Mit Mapbox GL JS wird eine Rotation der Karte ermöglicht. Durch die Festlegung eines Centers wird festgelegt, worauf die Kamerafahrt den Blick richtet. Trotzdem kann die Karte weiterhin verschoben sowie gezoomt werden.

Weitere Beispiele zur Kamera-Steuerung in Mapbox GL: https://docs.mapbox.com/mapbox-gl-js/examples/#camera

Kombination zweier Vector-Tile-Dienste in OpenLayers

In OpenLayers können zwei Vector-Tile-Dienste in einer Kartenanwendung dargestellt werden, wie in diesem Beispiel, die amtlichen Dienste der Länder Schweiz und Deutschland.

Weitere Informationen zum Swisstopo-Dienst "Light Base Map": https://www.swisstopo.admin.ch/de/geodata/maps/smw/smw_lightbase.html

Flurstücke in Brandenburg

Exemplarisch wurden die Flurstücke, Fluren und Gemarkungen des Landes Brandenburg (OpenData: https://geobroker.geobasis-bb.de/gbss.php?MODE=GetProductInformation&PRODUCTID=6de36219-3e68-489e-8ebc-632e5ffb6dc9) in die Smart-Mapping-Webkarte eingebunden.

Für die Hintergrundkarte wurde der Kartenstil "Relief" verwendet.

Die Beispiele zeigen, dass auch ALKIS-Informationen performant und in der Darstellung flexibel änderbar als Vector-Tiles-Webkarte präsentiert werden können und Potential für diverse Anwendungsfälle bieten.

LoD2-Gebäude

In der Kartenanwendung werden alle 3D-Gebäude und Bauwerke Deutschlands im Level of Detail 2 (LoD2) dargestellt.

Sie basieren auf dem deutschlandweiten, amtlichen 3D-Gebäudemodell (LoD2-DE), in welchem die Gebäude und Bauwerke mit standardisierten Dachformen entsprechend der tatsächlichen Firstverläufe modelliert werden.
Die Gebäudegrundrisse werden in der Regel der amtlichen Liegenschaftskarte entnommen. Nähere Informationen zu den Daten sind hier zu finden: http://www.adv-online.de/AdV-Produkte/Weitere-Produkte/3D-Gebaeudemodelle-LoD/

Zur Visualisierung wurden die im CityGML vorliegenden Daten in ein OGC-konformes 3D-Kachelarchiv (3D Tiles) überführt und mithilfe von Mapbox GL JS und weiteren Bibliotheken in die Kartenanwendung eingebunden. Im Hintergrund ist die farbige Webkarte dargestellt, welche mit dem Map Editor für die 3D-Visualisierung angepasst wurde.

Hinweis: Die 3D-Gebäude werden erst ab einer gewissen Distanz (Zoomstufe > 16) geladen.

Wer es genau wissen will ...

Die Kachelarchive von basemap.de Web Vektor werden monatlich aktualisiert. Der jeweilige Aktualitätsstand der zugrundeliegenden Datenquellen ist hier ersichtlich:

• Datenaktualität basemap.de Web Vektor


Das zugrundeliegende Datenmodell ist für Sie dann relevant, wenn Sie Anpassungen an den Kartenstilen vornehmen und zusätzliche Attribute visualisieren wollen:

• Datenmodell basemap.de Web Vektor


Die Kartenstile werden im json-Form definiert. Einen leichter lesbaren Signaturenkatalog im html-Format mit allen Styling-Layer und –Vorschriften finden Sie hier:

• Signaturenkatalog basemap.de Web Vektor Farbe

• Signaturenkatalog basemap.de Web Vektor Grau


Weiterführende Informationen zum Dienst kann dem Produkt- und Qualitätsstandard entnommen werden, welcher unter adv-online.de veröffentlicht wird.

Häufig gestellte Fragen

Frage 1: Was ist wie wo was mit wem wann genau EPSG Code MapLibre 2022?

A gentleman from New York discovered what he calls an “oversight” on the part of 99.9% of all marketers that allows him to get otherwise paid-for advertising at Google as well as all other search engines that allow sponsored ads.

Frage 2: Was ist wie wo was mit wem wann genau EPSG Code MapLibre 2022?

A gentleman from New York discovered what he calls an “oversight” on the part of 99.9% of all marketers that allows him to get otherwise paid-for advertising at Google as well as all other search engines that allow sponsored ads.

Frage 3: Was ist wie wo was mit wem wann genau EPSG Code MapLibre 2022?

A gentleman from New York discovered what he calls an “oversight” on the part of 99.9% of all marketers that allows him to get otherwise paid-for advertising at Google as well as all other search engines that allow sponsored ads.

Frage 4: Was ist wie wo was mit wem wann genau EPSG Code MapLibre 2022?

A gentleman from New York discovered what he calls an “oversight” on the part of 99.9% of all marketers that allows him to get otherwise paid-for advertising at Google as well as all other search engines that allow sponsored ads.

Frage 5: Was ist wie wo was mit wem wann genau EPSG Code MapLibre 2022?

A gentleman from New York discovered what he calls an “oversight” on the part of 99.9% of all marketers that allows him to get otherwise paid-for advertising at Google as well as all other search engines that allow sponsored ads.

Lizenz- und Nutzungsbedingungen


Es gelten folgende Lizenz- und Nutzungsbedingungen:
Copyright © 2022 basemap.de
basemap.de
menu