Vektor-MBTiles-Viewer: Vektorkacheln kostenlos online öffnen

Ein Vektor-MBTiles-Viewer, der im Browser läuft

Eine MBTiles-Datei ist eine ganze gekachelte Karte in einer einzigen Datei. Darin steckt eine kleine SQLite-Datenbank: eine Tabelle mit den Kacheln und eine mit Angaben dazu. Vektor-MBTiles enthalten Mapbox Vector Tiles, kompakte binäre Kacheln mit Straßen, Gebäuden, Flüssen, Grenzen und ihren Attributen, die eine Karten-App frei gestalten kann. Sie entstehen mit Werkzeugen wie tippecanoe, Planetiler, OpenMapTiles und QGIS und stecken hinter vielen Offline- und selbst gehosteten MBTiles-Karten.

Schwierig wird es, wenn Sie hineinsehen wollen. Ihr Computer kann die Datei nicht öffnen, Bildbetrachter sehen nichts, und die meisten Online-Viewer zeigen nur Rasterkacheln. Für eine Vektor-MBTiles-Datei brauchen Sie normalerweise einen Kachelserver, einen Stil und etwas JavaScript oder ein vollständiges GIS-Programm. Dieser Vektor-MBTiles-Viewer online spart all das: Datei hineinziehen, und er liest die Datenbank, dekodiert die Vektorkacheln im Browser und zeichnet jeden Layer in einer eigenen Farbe auf die Karte.

Er ist als Prüfwerkzeug ebenso gebaut wie als Viewer. Sie können jedes Objekt anklicken und seine Attribute lesen, Layer ein- und ausschalten, sehen, wie groß die Kacheln in jeder Zoomstufe sind und welche am größten sind, und die Datei gegen die Spezifikationen von MBTiles und Vektorkacheln prüfen. Danach exportieren Sie die Objekte der Ansicht als GeoJSON, speichern ein PNG der Karte oder laden einen technischen Bericht für Kollegen oder Kunden. Meine Meinung: Lassen Sie die Prüfungen laufen, bevor Sie ein Tileset auf einen Server stellen. Die meisten „meine Karte ist leer“-Probleme sind eine fehlende Metadatenzeile oder ein falscher Zoombereich, und die lassen sich vorher viel leichter beheben.

Was der Vektor-MBTiles-Viewer kann

Hier ist alles, was das Tool macht, in der Reihenfolge, in der Sie darauf stoßen.

1. Datei öffnen. Ziehen Sie eine .mbtiles-Datei auf die Karte oder klicken Sie auf „MBTiles öffnen“. Dateien bis 300 MB öffnen sich im Browser mit der SQLite-Engine sql.js. „Beispiel laden“ lädt ein kleines Welt-Tileset mit Ländern, Seen, Flüssen und Städten, damit Sie das Tool sofort in Aktion sehen.
2. Sofort die Karte sehen. Das Tool liest Ausdehnung und Mittelpunkt aus den Metadaten und zoomt zu den Daten. Jeder Layer wird in einer eigenen Farbe auf eine Canvas gezeichnet: Polygone als helle Flächen, Linien als Striche, Punkte als Punkte. Übliche Layernamen wie water, landuse, building, transportation und place bekommen natürliche Farben.
3. Mit den Layern arbeiten. Der Reiter Layer listet jeden Layer aus den Metadaten und aus den Kacheln mit seinen Geometrietypen, der Zahl der Objekte in einer Stichprobe und allen Feldern samt Beispielwert. Schalten Sie Layer ein und aus, drücken Sie „Nur“, um einen Layer allein zu sehen, oder klicken Sie auf das Farbquadrat, um eine eigene Farbe zu wählen.
4. Objekte per Klick prüfen. Klicken Sie in die Karte, und eine Karte zeigt jedes Objekt an dieser Stelle in den sichtbaren Layern: Layer, Geometrietyp, ID und alle Attribute. Das Objekt wird auf der Karte hervorgehoben, und Sie können es als GeoJSON kopieren oder die ganze Kachel als rohe .pbf-Datei laden.
5. Datei-Info lesen. Der Reiter Datei-Info zeigt die Metadaten in verständlichen Worten: Name, Beschreibung, Quellenangabe, Version, Format, Kompression, Zoombereich, Ausdehnung, Mittelpunkt, das erzeugende Werkzeug (zum Beispiel tippecanoe) und die Größe der Datei und der Kacheldaten.
6. Kacheln prüfen. Der Reiter Kacheln nennt die Zahl der Kacheln, die Gesamt-, Durchschnitts- und Maximalgröße je Zoomstufe und die zehn größten Kacheln der Datei. „Zeigen“ springt zu einer Kachel. Das Kachelraster zeichnet jede Kachelgrenze mit z/x/y und Größe.
7. Prüfungen laufen lassen. Der Reiter Prüfungen testet die Datei: Tabelle tiles, Metadaten, Format, Kompression, die Liste vector_layers in json, Layer ohne Eintrag in den Metadaten, Ausdehnung, Mittelpunkt, den Zoombereich gegenüber den echten Kacheln, Kacheln über 500 KB und die Quellenangabe. Jede Prüfung ist als OK, Warnung oder Fehler markiert und verständlich erklärt.
8. Über die Daten hinaus zoomen. Vektorkacheln bleiben scharf, wenn Sie über die letzte Zoomstufe hinaus zoomen. Der Viewer zeichnet deshalb die tiefsten Kacheln vergrößert weiter („Overzoom“). Unterhalb der ersten Zoomstufe sagt ein Hinweis, dass Sie hineinzoomen sollen.
9. Darstellung anpassen. Ändern Sie Flächendeckkraft und Linienbreite, schalten Sie die Ortsbeschriftung ein oder aus und fügen Sie zur Orientierung eine Straßen- oder Satellitenkarte hinzu. Ohne Hintergrundkarte wird gar nichts von fremden Servern geladen.
10. Exportieren. Laden Sie die sichtbaren Objekte als GeoJSON, die Kartenansicht als PNG, die Metadaten als JSON oder einen technischen Bericht mit Prüfungen, Layern, Feldern, Kachelstatistik und Empfehlungen herunter.

Die Datei wird mit JavaScript und WebAssembly in Ihrem Browser-Tab gelesen. Sie wird nie hochgeladen, daher ist der Viewer auch für vertrauliche oder lizenzierte Daten sicher.

So sehen Sie eine Vektor-MBTiles-Datei an, Schritt für Schritt

Ein echtes Beispiel mit dem Welt-Beispiel-Tileset (Natural-Earth-Daten, Zoom 0 bis 5).

1

Schritt 1: Vektor-MBTiles-Viewer öffnen

Das Tool öffnet sich mit einer leeren Karte und einem Ablagebereich. Ziehen Sie Ihre .mbtiles-Datei darauf, klicken Sie, um eine Datei zu wählen, oder drücken Sie „Beispiel laden“.

2

Schritt 2: Datei laden

Der Viewer liest die SQLite-Datenbank, zoomt zur Ausdehnung und zeichnet alle vier Layer: Länder als graue Flächen, Seen in Blau, Flüsse als blaue Linien und Städte als rote Punkte mit Beschriftung.

3

Schritt 3: Layer erkunden

Der Reiter Layer listet jeden Layer mit Geometrie, den Objekten aus einer Stichprobe und jedem Feld samt Beispielwert. Hier sind nur Flüsse und Städte eingeschaltet, mit Blick auf Europa.

4

Schritt 4: Ein Objekt anklicken

Klicken Sie auf eine Stadt. Die Karte zeigt Layer, Geometrietyp, ID und alle Attribute, und das Objekt wird hervorgehoben. Sie können es als GeoJSON kopieren oder die Kachel laden, aus der es stammt.

5

Schritt 5: Datei-Info lesen

Der Reiter Datei-Info macht aus der Tabelle metadata verständliche Angaben: Name, Quellenangabe, Format, gzip-Kompression, Zoom 0 bis 5, Ausdehnung, Mittelpunkt und Dateigröße.

6

Schritt 6: Kacheln prüfen

Der Reiter Kacheln zeigt Kacheln und Größen je Zoomstufe und die größten Kacheln. Mit eingeschaltetem Kachelraster wird jede Kachelgrenze mit z/x/y und gespeicherter Größe gezeichnet.

7

Schritt 7: Prüfungen laufen lassen

Der Reiter Prüfungen testet die Datei gegen die Regeln von MBTiles und Vektorkacheln. Das Beispiel besteht jede Prüfung; eine echte Datei zeigt oft eine oder zwei Warnungen, jede mit Erklärung.

8

Schritt 8: Bericht herunterladen

Der technische Bericht fasst Übersicht, Kartenvorschau, Prüfungen, Metadaten, alle Layer und Felder, die Kachelstatistik und Empfehlungen auf einer Seite zusammen. Drucken Sie ihn oder speichern Sie ihn als PDF.

Wie öffnet man eine MBTiles-Datei? Ihre Möglichkeiten

Es gibt mehrere Wege, eine MBTiles-Datei zu öffnen. Welcher passt, hängt davon ab, ob Sie nur hineinsehen, sie prüfen oder in einem Projekt nutzen wollen.

1. Im Browser, mit diesem Viewer. Der schnellste Weg, den Inhalt einer Vektordatei zu sehen: keine Installation, kein Server, läuft unter Windows, Mac, Linux und auf Tablets. Ideal, um ein Tileset zu prüfen, Attribute zu lesen und einen Bericht zu teilen. Für Raster-MBTiles (PNG-, JPEG-, WebP-Kacheln) nutzen Sie den MBTiles-Viewer auf dieser Website.
2. In QGIS. QGIS 3.14 und neuer öffnet Vektor-MBTiles direkt: Ziehen Sie die Datei auf die Karte oder nutzen Sie Layer → Layer hinzufügen → Vektorkachel-Layer hinzufügen. Raster-MBTiles öffnen Sie über Layer → Layer hinzufügen → Rasterlayer hinzufügen. Gut, wenn Sie die Kacheln mit anderen GIS-Daten kombinieren wollen.
3. Mit einem Kachelserver. TileServer GL, Martin und mbtileserver lesen eine MBTiles-Datei und liefern ihre Kacheln über HTTP aus, sodass eine Webkarte in MapLibre GL JS, Mapbox GL JS oder Leaflet sie nutzen kann. So werden MBTiles-Karten meist veröffentlicht.
4. Als PMTiles. Wandeln Sie die Datei in PMTiles um (auf dieser Website gibt es einen kostenlosen Konverter) und legen Sie diese eine Datei auf einen beliebigen statischen Speicher. MapLibre kann sie direkt lesen, ohne Kachelserver.
5. Auf Smartphone oder GPS-Gerät. Viele Offline-Karten-Apps laden MBTiles-Dateien für die Nutzung ohne Verbindung. Prüfen Sie, welches Kachelformat die App erwartet: Manche akzeptieren nur Rasterkacheln.
6. Als Datenbank. Da MBTiles SQLite ist, öffnen auch DB Browser for SQLite oder die Kommandozeile sqlite3 die Datei. Sie sehen Tabellen und binäre Blobs, nicht die Karte, aber das ist praktisch, um eine Metadatenzeile zu korrigieren.

Eines ist überall gleich: Eine MBTiles-Datei trägt Daten, keinen Stil. Jede App entscheidet selbst, wie sie die Layer einfärbt. Dieser Viewer wählt die Farben automatisch, damit Sie den Aufbau sehen, ohne vorher einen Stil zu schreiben.

Wie der Viewer Vektorkacheln liest und zeichnet

Eine Vektor-MBTiles-Datei zu öffnen braucht vier Schritte: die SQLite-Datenbank lesen, die richtige Kachel finden, sie entpacken und dekodieren und sie zeichnen. Hier steht genau, was dabei passiert, mit den Formeln.

CREATE TABLE metadata (name text, value text);
CREATE TABLE tiles (zoom_level integer, tile_column integer,
                    tile_row integer, tile_data blob);

Zeilen in metadata:  name, format = pbf, minzoom, maxzoom, bounds,
                     center, attribution, description, json, …
Statistik:           SELECT zoom_level, COUNT(*), SUM(LENGTH(tile_data)),
                     MAX(LENGTH(tile_data)) FROM tiles GROUP BY zoom_level

n = 2^z                                   Kacheln je Seite bei Zoom z
x = ⌊(λ + 180) / 360 × n⌋
y = ⌊(1 − ln(tan φ + sec φ) / π) / 2 × n⌋   Zeile der Webkarte (von Norden)

tile_row = n − 1 − y                        Zeile in MBTiles (von Süden)

Beispiel  z = 5, x = 16, y = 10  →  tile_row = 32 − 1 − 10 = 21

1F 8B …        gzip       (die meisten Dateien: tippecanoe, Planetiler, OpenMapTiles)
78 01/5E/9C/DA zlib       (manche ältere Werkzeuge)
alles andere   nicht komprimiert

89 50 4E 47    PNG  ┐
FF D8          JPEG ├  Rasterkacheln: keine Vektordatei
52 49 46 46    WebP ┘

Varint   300 = 1010 1100  0000 0010  → 0101100 + 0000010 × 128 = 300
Zigzag   0 → 0,  −1 → 1,  1 → 2,  −2 → 3,  2 → 4
         dekodieren: n = (z >>> 1) ^ −(z & 1)

Tile     { layers = 3 }
Layer    { name = 1, features = 2, keys = 3, values = 4, extent = 5, version = 15 }
Feature  { id = 1, tags = 2, type = 3, geometry = 4 }
tags     [Schlüsselindex, Wertindex, Schlüsselindex, Wertindex, …]

Befehl = (Anzahl << 3) | ID     MoveTo = 1, LineTo = 2, ClosePath = 7

9  = (1 << 3) | 1   MoveTo, 1 Punkt
     Parameter 50, 34  →  +25, +17   Cursor (25, 17)
18 = (2 << 3) | 2   LineTo, 2 Punkte
     Parameter 0, 18, 18, 0  →  (25, 26), (34, 26)
15 = (1 << 3) | 7   ClosePath

Polygonringe: Fläche > 0  Außenring (auf dem Bildschirm im Uhrzeigersinn)
              Fläche < 0  Loch
Fläche = ½ Σ (x_j·y_i − x_i·y_j)       Gaußsche Trapezformel, y nach unten

Maßstab = 256 × f / extent          f = 2^(z_Karte − z_Daten)
Versatz = (x mod f, y mod f) × 256  Teil der übergeordneten Kachel

Beispiel  Daten bis z 14, Karte bei z 16
  f = 4, Maßstab = 256 × 4 / 4096 = 0.25 px je Einheit
  Kartenkachel (x, y) nutzt Datenkachel (⌊x/4⌋, ⌊y/4⌋)

Einheiten je Pixel = extent / (256 × 2^(z_Karte − z_Daten))

Punkt     Treffer bei Abstand ≤ 7 px
Linie     Treffer bei Abstand zu einem Segment ≤ 5 px
          d² = |p − a − t(b − a)|²,  t = clamp(((p − a)·(b − a)) / |b − a|², 0, 1)
Polygon   Treffer, wenn ein Strahl vom Punkt die Ringe ungerade oft kreuzt

gespeicherte Größe = LENGTH(tile_data)          Bytes, noch komprimiert
mittlere Größe     = SUM(Größe) / COUNT(*)       je Zoomstufe
Abdeckung          = Kacheln / 4^z               Anteil am Weltraster

Richtwert          größte Kachel < 500 KB  (512.000 Bytes)

MBTiles und die Exportformate im Detail

Was in einer MBTiles-Datei steckt, wie sich Vektor- und Raster-MBTiles unterscheiden und was jeder Download aus diesem Viewer enthält.

metadata.json = {
  "vector_layers": [
    { "id": "cities", "minzoom": 0, "maxzoom": 5,
      "fields": { "name": "String", "pop_max": "Number" } } ],
  "tilestats": { "layerCount": 1, "layers": [ … ] }
}

{ "type": "Feature", "id": 812,
  "properties": { "name": "Lyon", "pop_max": 1423000,
                  "_layer": "cities", "_tile": "5/16/11" },
  "geometry": { "type": "Point", "coordinates": [4.8320114, 45.7578137] } }

Alle Exporte entstehen in Ihrem Browser aus der geöffneten Datei. Nichts wird an einen Server geschickt.

Wer einen Vektor-MBTiles-Viewer braucht

Vektorkacheln liegen zwischen Daten und Karte, deshalb müssen ganz unterschiedliche Menschen hineinsehen.

1. Webkarten-Entwickler. Prüfen Sie ein Tileset, bevor Sie einen MapLibre- oder Mapbox-GL-Stil schreiben: welche Layer es gibt, wie die Felder heißen, ab welcher Zoomstufe Daten erscheinen. Feldliste und Beispielwerte ersparen viel Raten.
2. GIS-Analysten. Bestätigen Sie, dass ein Export aus tippecanoe, Planetiler oder QGIS enthält, was Sie erwarten, mit den richtigen Attributen und dem richtigen Zoombereich, bevor Sie ihn weitergeben.
3. DevOps und Kachelserver-Admins. Finden Sie zu große Kacheln, fehlende Metadaten und falsche Zoombereiche, bevor Sie auf TileServer GL, Martin oder ein CDN ausrollen, und bewahren Sie den Bericht als Nachweis auf.
4. Offline- und Feldkartierung. Prüfen Sie, ob die MBTiles-Karten auf Tablets oder robusten Geräten das richtige Gebiet und die richtigen Zoomstufen abdecken, bevor Sie das Netz verlassen.
5. Datenkäufer und Prüfer. Sehen Sie sich ein Vektor-Tileset eines Lieferanten ohne Installation an, klicken Sie sich durch die Attribute und schicken Sie den Bericht zurück.
6. Studierende und Lehrkräfte. Sehen Sie, wie Vektorkacheln wirklich funktionieren: Kachelraster einschalten, Kachelgrößen über die Zoomstufen vergleichen und beobachten, wie Overzoom die Linien scharf hält.
7. Herausgeber offener Daten. Prüfen Sie Quellenangabe, Ausdehnung und Beschreibung in den Metadaten, bevor Sie ein Tileset veröffentlichen, damit Nutzer einen korrekten Nachweis und eine richtige Startansicht bekommen.
8. Support und Fehlerberichte. Wenn eine Karte eine Lücke oder ein kaputtes Objekt zeigt, finden Sie die Kachel, laden Sie sie als .pbf und hängen Sie sie mit dem Bericht an das Ticket.

Häufige Fragen zu MBTiles und Vektorkacheln

Die 20 häufigsten Fragen zu MBTiles-Dateien und diesem Viewer.

Spezifikationen, Software und Datennachweis

Der Viewer baut auf offenen Spezifikationen und offener Software auf:

• MBTiles Specification (Mapbox) · Specification
  MBTiles-Spezifikation von Mapbox: der SQLite-Aufbau der Datei, die TMS-Zeilenfolge und die Metadatenzeilen, die der Viewer prüft.
• Mapbox Vector Tile Specification · Specification
  Mapbox-Vector-Tile-Spezifikation: der Protobuf-Aufbau, die Geometriebefehle und die Umlaufregeln, denen der Dekoder folgt.
• sql.js · MIT
  Nach WebAssembly übersetztes SQLite, mit dem die .mbtiles-Datenbank im Browser geöffnet wird.
• Leaflet 1.9 · BSD-2-Clause
  Interaktive Karte und der Canvas-Gitterlayer, der die Kacheln zeichnet.
• Natural Earth · Public domain
  Gemeinfreie Daten, aus denen das Beispiel-Tileset erstellt wurde (Länder, Seen, Flüsse und Städte im Maßstab 1:50m).
• Protomaps (hosted by KONAKTIVE), CARTO, OpenStreetMap, Esri World Imagery · ODbL and provider terms
  Optionale Hintergrundkarten: eigene Vektorkacheln, bereitgestellt von KONAKTIVE, mit CARTO und OpenStreetMap als Ersatz, sowie Esri World Imagery.

Der Vektorkachel-Dekoder, der Renderer, die Prüfungen und alle Exporte wurden für diese Website geschrieben und laufen vollständig in Ihrem Browser.

Verwandte Kachel- und GIS-Dateiwerkzeuge