Vektor-Tiles vs. Raster-Tiles: Was sollte Ihre Web-App 2026 verwenden?

Wenn Sie eine Karte in eine Web-App integrieren, prägt eine Architektur-Entscheidung alles, was folgt: Raster-Tiles oder Vector-Tiles. Machen Sie es richtig und Ihre Karte ist schnell, schön und anpassbar. Machen Sie es falsch und verschiffen Sie ein pixeliges, träges Hintergrundbild, das sich an jedem Punkt mit Ihrem Designsystem widersetzt.

Dieser Leitfaden erklärt den technischen Unterschied zwischen den beiden Formaten, durchläuft die echten Trade-offs, die einem Frontend-Entwickler tatsächlich wichtig sind, und gibt Ihnen einen klaren Entscheidungsrahmen. Am Ende werden Sie genau wissen, welches Format Sie für Ihr Projekt wählen sollten und wie Sie mit Vector-Tiles auf MapAtlas beginnen.

Die Tile-Format-Frage tritt früh in fast jedem Kartierungsprojekt auf, und das Internet ist voller oberflächlicher Antworten, die bei "Vector-Tiles sind neuere" stoppen. Dieser Leitfaden geht tiefer, abdeckend Rendering-Pipelines, Payload-Größen, Browser-Kompatibilität, Styling-Kontrolle und die spezifischen Szenarien, in denen Raster-Tiles der richtige Aufruf bleiben.

Wenn Sie bereits bauen und nur den Code benötigen, springen Sie zum Abschnitt Quick Start.

Was sind Raster-Tiles?

Ein Raster-Tile ist ein vorgerenderes PNG- oder JPEG-Bild, typischerweise 256x256 oder 512x512 Pixel, das einen fixen Weltschnitt auf einer bestimmten Zoomstufe darstellt. Wenn ein Benutzer schwenkt oder zoomt, fordert der Browser benachbarte oder höher aufgelöste Tiles an, die der Server bereits gerendert und zwischengespeichert hat.

Das Rendering findet vollständig serverseitig statt. Das Tile-Bild, das im Browser ankommt, ist ein fertiges Bild, Pixel sind bereits platziert, Farben sind bereits eingebacken. Die Aufgabe des Browsers ist einfach, es anzuzeigen.

Wie Raster-Tile-Server funktionieren

Ein Raster-Tile-Stack sieht typischerweise so aus:

1. Rohe geografische Daten (OpenStreetMap, Grundstücksdaten, Höhenmodelle) werden in eine Datenbank verarbeitet.
2. Ein Rendering-Engine (Mapnik ist die klassische Wahl) pre-rendert Tiles auf jedem Zoomlevel in einen Tile-Cache.
3. Ein Tile-Server (TileServer GL im Raster-Modus oder ein verwaltetes CDN) dient den zwischengespeicherten Bildern gemäß /{zoom}/{x}/{y}.png URL-Konvention.

Das Ergebnis ist einfach, schnell und zustandslos. Jeder HTTP-Client kann ein Tile anfordern, ein Browser, eine Mobile-App, ein serverseitiger Prozess, der ein Kartenbild generiert, oder eine GIS-Desktop-Anwendung.

Raster-Tile-Stärken

• Null Client-seitiger Rendering-Overhead. Der Browser zeigt einfach ein Bild an. Keine WebGL erforderlich, keine Shader-Kompilation, kein Font-Rendering.
• Universelle Kompatibilität. Funktioniert in jedem Browser, jeder Version, einschließlich Internet Explorer und Headless-Rendering-Umgebungen.
• Vorhersehbares Aussehen. Die Karte sieht genau so aus, wie der Tile-Server sie gerendert hat. Keine Client-seitige Variabilität.
• Einfache serverseitige Bildgenerierung. Perfekt für die Generierung statischer Kartenbilder für E-Mail, PDF-Berichte oder Social-Sharing-Karten.

Raster-Tile-Schwächen

• Große Dateigrößen. Ein typisches 256x256 PNG Tile ist 30-200 KB je nach Content-Dichte. Ein Retina (512x512) Tile hat vier Mal die Pixelzahl.
• Pixelierung auf hochauflösenden Bildschirmen. Ein Tile, das für 1x Display gerendert ist, sieht auf 2x Retina-Bildschirm unscharf aus, es sei denn Sie dienen @2x Tiles, was Ihre Bandbreite verdoppelt.
• Keine Rotation oder Neigung. Wenn Sie eine Raster-Karte rotieren, rotieren die Text-Etiketten mit ihr und werden unlesbar. Daher sind Raster-Karten immer Nord-oben.
• Keine Client-seitige Style-Änderungen. Möchten Sie die Straßenfarbe ändern, POI-Icons verbergen oder in Dark Mode wechseln? Sie benötigen einen neuen Tile-Satz, serverseitig vorgerendert.
• Zoom-Interpolation. Zwischen Zoom-Leveln skaliert der Browser das vorhandene Bild, was es unscharf macht. Das "glatte Zoom"-Gefühl, das Sie mit Vector-Tiles bekommen, existiert nicht mit Raster.

Was sind Vector-Tiles?

Ein Vector-Tile enthält die rohen geografischen Daten für einen Kartenbereich, Straßengeometrien, Gebäudepolygone, Gewässer, Landnutzungsflächen, Label-Platzierungsdaten, kodiert als kompaktes Binär (normalerweise Mapbox Vector Tile Format, .mvt). Das Tile enthält keine Pixel. Es beschreibt was in dieser Region existiert, nicht wie es aussehen sollte.

Das Rendering findet vollständig Client-seitig statt, mit WebGL. Wenn Sie eine Mapbox GL JS-kompatible Karte laden (wie MapAtlas), fordert das SDK Vector-Tiles an, erhält Geometriedaten und nutzt Ihre Style-Spezifikation, um jede Straße, Gebäude und Label auf einem <canvas> Element in Echtzeit zu zeichnen, bei 60 Frames pro Sekunde.

Wie Vector-Tile-Rendering funktioniert

Vector Tile (.mvt) + Style JSON → WebGL Shader → Canvas Pixel

Das Style JSON (eine strukturierte Datei, die Sie kontrollieren) sagt dem Renderer: zeichne Straßen in dieser Farbe, zeichne Gebäude-Extrusionen in dieser Höhe, verwende diese Schrift für Labels, verberge diese Layer-Typen unter Zoom 12. Der Style kann zur Laufzeit geändert werden, ohne neue Tiles zu holen.

Vector-Tile-Stärken

• Kleine Payloads. Binär-kodierte Geometrie ist viel kompakter als ein gerendertes Bild. Ein typisches Vector-Tile für ein dichtes urbanes Gebiet ist 15-50 KB gegenüber 80-200 KB für das äquivalente Raster-Tile.
• Scharf bei jeder Auflösung. Vector-Geometrie skaliert mathematisch. Ein Retina-Display bekommt das gleiche Tile wie ein Standard-Display, der Renderer gibt einfach mehr Pixel aus. Keine @2x Tile-Varianten erforderlich.
• Glatter Zoom und Rotation. Da der Renderer auf roher Geometrie arbeitet, kann Zoom kontinuierlich interpoliert werden (nicht nur bei Integer-Leveln) und die Karte kann geneigt und rotiert werden mit Labels immer aufrecht.
• Vollständige Client-seitige Style-Kontrolle. Ändern Sie jede visuelle Eigenschaft, Straßenfarbe, Label-Schrift, Layer-Sichtbarkeit, Opazität, indem Sie das Style-Objekt aktualisieren. Keine neuen Tile-Anfragen. Dark Mode ist ein Style JSON Swap, kein neuer Tile-Satz.
• 3D-Gebäude-Extrusion. Vector-Tiles enthalten Gebäude-Höhen-Metadaten. Renderer können Polygone in 3D mit WebGL extrudieren. Raster-Tiles haben kein Konzept von Elevation.
• Daten-getriebenes Styling. Farbe Straßen nach Geschwindigkeitsbegrenzung, Schatten Landnutzung nach Kategorie, skaliere Marker nach Bevölkerung, alles getrieben durch Dateneigenschaften im Tile ohne den Server zu berühren.

Vector-Tile-Schwächen

• WebGL erforderlich. Keine WebGL-Unterstützung bedeutet kein Vector-Tile-Rendering. Dies schließt sehr alte Browser (IE11) und bestimmte Headless-Umgebungen aus.
• Client-seitige CPU/GPU-Last. Das Rendering findet auf dem Gerät des Benutzers statt. Auf Low-End Android-Telefonen oder stark belasteten Desktops können komplexe Kartenstile mit vielen Layern Framerate-Drops verursachen.
• Komplexeres Initial-Setup. Sie benötigen eine Rendering-Bibliothek (Mapbox GL JS, MapLibre GL oder das MapAtlas SDK) und ein Style JSON, nicht nur ein <img> Tag.
• Font- und Glyph-Laden. Label-Rendering erfordert, dass Glyph-Dateien separat dienen. Dies fügt ein paar zusätzliche Netzwerkanfragen beim ersten Laden hinzu.

Performance-Vergleich: Echte Zahlen

Um den Trade-off konkret zu machen, hier sind echte Messungen für ein Kartentile des zentralen Amsterdam auf Zoom-Level 14:

In großem Maßstab reduzieren Vector-Tiles kartengebundene Bandbreite um 60-80%. Für eine mittleres Verkehrs-App, die 10 Millionen Tile-Anfragen pro Monat generiert, reduziert diese Differenz CDN-Egress-Kosten bedeutungsvoll.

Wann man Raster-Tiles verwendet

Raster-Tiles sind nicht veraltet. Es gibt klare Szenarien, in denen sie die richtige Wahl bleiben:

Integratio von Legacy-Systemen. Wenn Sie eine Karte in eine .NET WebForms App, eine serverseitig gerenderte Rails-View oder eine Umgebung einbetten, in der Sie nur HTML und grundlegende JavaScript kontrollieren, ist ein Raster-Tile-Layer über Leaflet oder OpenLayers einfacher und zuverlässiger, als einen WebGL-Renderer einzuführen.

Serverseitige Kartenbild-Generierung. Wenn Sie Kartenschnappschüsse auf einem Node.js-Server für E-Mail-Vorlagen, PDF-Exporte oder Open-Graph-Bilder rendern müssen, ist Headless Raster-Rendering Ihr Weg. Tools wie node-canvas plus eine Raster-Tile-Quelle funktionieren, wo WebGL nicht funktioniert.

Satellitenbilder und Luftaufnahmen. Luftfotografie ist von Natur aus Raster-Daten. Auch auf einer Vector-Karte wird die Satellitenbildschicht immer als Raster-Tiles geliefert. Hybrid-Karten mischen beide Formate, Vector für Straßen und Labels, Raster für die fotografische Basis.

Sehr einfache Anwendungsfälle. Eine statische Standortkarte auf einer Kontaktseite einbetten? Ein einfaches Leaflet + OpenStreetMap Raster-Setup dauert 20 Minuten und hat null JavaScript-Komplexität. Das Upgrade auf Vector-Tiles ist nicht gerechtfertigt für eine nicht-interaktive Standortstecknadel.

Wann man Vector-Tiles verwendet

Wählen Sie Vector-Tiles für jede moderne Web-Anwendung, bei der Ihnen wichtig ist:

• Custom Brand-Styling. Wenn Ihr Designsystem spezifische Farben hat, sollte Ihre Karte auch. Vector-Tiles machen dies zu einer JSON-Änderung.
• Dark Mode Unterstützung. Ein Dark Style JSON ist eine Konfigurationsdatei. Ein Wechsel zwischen Licht und Dunkel ist ein map.setStyle() Aufruf.
• Hochauflösungs- / Retina-Schärfe. Besonders wichtig für Mobile-First Apps und jede UI, bei der knackige Rendering ein Design-Priorität ist.
• Glatte Nutzererfahrung. Die kontinuierliche Zoom-Interpolation und 60fps Rendering einer Vector-Karte sind Benutzern sofort auffällig. Raster-Karten fühlen sich im Vergleich in interaktiven Kontexten klunky an.
• Datenvisualisierungs-Layer. Das Hinzufügen einer Heatmap, einer Choropleth oder eines Cluster-Layers zu einer Vector-Karte erfordert nur Client-seitige Konfiguration. Auf einer Raster-Karte würden Sie einen neuen Layer tile-sprengen oder einen Canvas-Overlay-Hack verwenden.
• 3D oder geneigte Perspektiven. Nur erreichbar mit Vector-Tiles und WebGL.

Quick Start: Vector-Tiles mit MapAtlas

MapAtlas dient Vector-Tiles über eine Mapbox GL JS-kompatible API. Wenn Sie Mapbox GL JS vorher verwendet haben, ist Migration eine Style URL Änderung und ein API-Key Swap. Wenn Sie von vorne anfangen, hier ist das komplette Setup.

Installieren Sie das SDK

npm install @mapmetrics/mapmetrics-gl

Oder über CDN für einfache HTML-Projekte:

<link rel="stylesheet" href="https://unpkg.com/@mapmetrics/mapmetrics-gl/dist/mapmetrics-gl.css" />
<script src="https://unpkg.com/@mapmetrics/mapmetrics-gl/dist/mapmetrics-gl.js"></script>

Rendern Sie eine Vector-Karte

import mapmetricsgl from '@mapmetrics/mapmetrics-gl';
import '@mapmetrics/mapmetrics-gl/dist/mapmetrics-gl.css';

const map = new mapmetricsgl.Map({
  container: 'map',         // ID of your <div>
  style: 'https://tiles.mapatlas.eu/styles/basic/style.json?key=YOUR_API_KEY',
  center: [4.9041, 52.3676], // [longitude, latitude], Amsterdam
  zoom: 12,
  pitch: 0,     // 0 = top-down, 60 = 3D tilted
  bearing: 0,   // 0 = north-up, any value = rotated
});

Die style URL zeigt auf eine JSON-Datei, die auf MapAtlas-Servern gehostet wird und alle Layer, Schriften und Quellen definiert. Sie können auch ein benutzerdefiniertes Style JSON selbst hosten, um jeden visuellen Aspekt der Karte zu kontrollieren, siehe Map Visualization & Styling Guide.

Wechseln Sie zur Laufzeit in den Dark Mode

document.getElementById('toggle-dark').addEventListener('click', () => {
  const isDark = map.getStyle().name?.includes('dark');
  map.setStyle(
    isDark
      ? 'https://tiles.mapatlas.eu/styles/basic/style.json?key=YOUR_API_KEY'
      : 'https://tiles.mapatlas.eu/styles/dark/style.json?key=YOUR_API_KEY'
  );
});

Es werden keine neuen Tile-Anfragen für bereits zwischengespeicherte Daten ausgelöst. Nur der Style ändert sich, die Tiles bleiben die gleiche binäre Geometrie, mit neuen Farben gerendert.

Fügen Sie eine GeoJSON-Datenlayer hinzu

Eines der leistungsfähigsten Vektor-Tile-Features ist das Überlagern Ihrer eigenen Daten als gestylter Layer:

map.on('load', () => {
  // Add your own data source
  map.addSource('delivery-zones', {
    type: 'geojson',
    data: {
      type: 'FeatureCollection',
      features: [
        {
          type: 'Feature',
          geometry: {
            type: 'Polygon',
            coordinates: [[[4.85, 52.34], [4.95, 52.34], [4.95, 52.40], [4.85, 52.40], [4.85, 52.34]]],
          },
          properties: { zone: 'Zone A', capacity: 150 },
        },
      ],
    },
  });

  // Style it as a colored fill layer
  map.addLayer({
    id: 'delivery-zones-fill',
    type: 'fill',
    source: 'delivery-zones',
    paint: {
      'fill-color': '#97C70A',
      'fill-opacity': 0.2,
    },
  });

  map.addLayer({
    id: 'delivery-zones-outline',
    type: 'line',
    source: 'delivery-zones',
    paint: {
      'line-color': '#97C70A',
      'line-width': 2,
    },
  });
});

Dieses Muster, füge eine Quelle hinzu, füge einen Layer hinzu, male mit Style-Ausdrücken, ist das gleiche für Heatmaps, Routenlinien, Isochron-Polygone und Choropleth-Karten. Es funktioniert, weil Vector-Tiles dem Renderer rohe Geometrie geben, nicht fertige Pixel.

Migration von Raster zu Vector

Wenn Sie ein vorhandenes Leaflet + Raster-Tile-Setup haben und upgraden möchten, hier ist der minimale Migrations-Weg:

1. Ersetzen Sie Leaflet mit dem MapAtlas SDK (oder MapLibre GL JS, wenn Sie ein vollständig Open-Source-Renderer bevorzugen).
2. Ersetzen Sie die Tile-URL mit einer MapAtlas Style JSON URL.
3. Verschieben Sie Overlays von Leaflet-Layern zu GL JS Quellen und Layern.
4. Testen Sie auf WebGL-freien Umgebungen. Fügen Sie eine Fallback oder anmutige Verschlechterungsnachricht für den kleinen Prozentsatz von Benutzern hinzu, die nicht über WebGL verfügen.

Das funktionale Ergebnis ist eine Karte, die schärfer aussieht, schneller lädt und ohne Server-Berührung umgestaltet werden kann.

Für eine vollständige Erklärung des Hinzufügens von Markern, Popup, Adresssuche und React-Integration auf einer Vector-Tile-Basis, siehe So fügen Sie interaktive Karten zu Ihrer Website hinzu.

Um das Styling weiter voranzutreiben, Dark Mode, Brand-Farben, benutzerdefinierte Fonts, Wasserzeichen-Entfernung, siehe So stylen Sie eine Custom Branded Karte.

Und wenn Sie MapAtlas gegen Google Maps aus einem Kosten- und Feature-Standpunkt auswerten, deckt MapAtlas vs. Google Maps: Warum Entwickler wechseln die Hauptunterschiede ab.

Zusammenfassung: Der Entscheidungsrahmen

Wenn Sie 2026 etwas Interaktives bauen, sind Vector-Tiles die Standardwahl. Raster-Tiles sind die bewusste Ausnahme für spezifische Kompatibilitäts- oder Rendering-Constraints.

Bereit zu Vector-Tiles zu bauen? Kostenlos MapAtlas API Key erhalten, keine Kreditkarte erforderlich. Ihr Schlüssel funktioniert über Tiles, Geocoding, Routing und Isochron APIs von Tag eins.