Software • 03. März 2026
Neue Dimension für MapComponents: deck.gl und Three.js erweitern die Bibliothek
In den letzten Jahren sind die Fähigkeiten moderner Webbrowser exponentiell gewachsen. Technologien wie WebAssembly und leistungsfähige Grafik-APIs wie WebGL2 und WebGPU haben die Möglichkeiten von Webanwendungen grundlegend verändert. Parallel dazu haben Fortschritte in der Konnektivität und die stetig wachsenden Übertragungsgeschwindigkeiten es ermöglicht, Datenmengen zu verarbeiten, die noch vor Kurzem undenkbar waren. Angesichts dieser Entwicklungen haben sich zahlreiche Technologien, die lange als experimentell galten, in den letzten Jahren zu produktiven Standards etabliert.
Der aktuelle Aufschwung digitaler Zwillinge ist ein anschauliches Beispiel dafür, wie dieser technologische Wandel die Welt der Webkarten verändert hat. Klassische Kartendienste, die auf vorgerenderten Rasterbildern basieren, wirken heute zunehmend unzureichend. Moderne Webkarten profitieren immer stärker von optimierten Datenübertragungsmethoden wie Vektorkacheln, die es ermöglichen, große Datenmengen effizient im Browser zu verarbeiten und dynamische Stile anzuwenden, die das Visualisierungserlebnis bereichern. Zudem erfordert die wachsende Verfügbarkeit dreidimensionaler Daten – vorangetrieben durch die Standardisierung von Formaten und die zunehmende Zugänglichkeit von Erfassungsgeräten – effiziente und flüssige Implementierungen in Webanwendungen.
Diese Zukunft, über die so lange spekuliert wurde, ist endlich da. Um den neuen Anforderungen moderner Kartenanwendungen gerecht zu werden, haben wir unsere deklarative React-Bibliothek MapComponents erweitert und neben unserem auf MapLibre basierenden Basispaket zwei neue Pakete veröffentlicht: @mapcomponents/deck-gl und @mapcomponents/three. Diese Pakete erweitern das Komponentenangebot von MapComponents, ermöglichen die Einbindung neuer Datenquellen und bieten komplexere Visualisierungen. Dabei bleibt der Grundgedanke der Bibliothek erhalten: leistungsfähige und vielseitige Kartenanwendungen aus einfachen, flexiblen und nutzerorientierten Komponenten zu entwickeln.
Im Folgenden stellen wir einige Details vor und geben einen Überblick über das, was diese Pakete in ihrem ersten Release bieten.
deck.gl: GPU-gestützte Visualisierung, nahtlos integriert mit MapLibre
deck.gl ist ein von der OpenJS Foundation betreutes Open-Source-Framework zur explorativen Analyse und Visualisierung großer Datenmengen. Es setzt auf einen schichtbasierten Ansatz und nutzt WebGL2/WebGPU für ein effizientes Rendering auch unter hoher Datenlast. Das Framework bietet zwar eine eigene Unterstützung für Datenquellen wie GeoJSON, WMS und Vektorkacheln und kann somit grundsätzlich als eigenständige Kartenengine fungieren – allerdings sind diese Funktionen im Vergleich zu spezialisierten Kartenbibliotheken wie MapLibre, OpenLayers oder Mapbox deutlich eingeschränkter. Die Stärke von deck.gl liegt vielmehr in der Integration mit solchen Frameworks: Es ergänzt sie um spezialisierte Layer zur Visualisierung komplexer und/oder sehr umfangreicher Daten.
In einem früheren Blogartikel haben wir bereits Beispiele für die Integration von deck.gl und MapComponents gezeigt. Am Ergebnis hat sich nichts geändert – doch mit dem neuen Paket @mapcomponents/deck-gl ist der Weg dorthin deutlich einfacher geworden. Bisher musste der Nutzer die deck.gl-Instanz eigenständig verwalten, ein MapboxOverlay erzeugen und es manuell an die von MapComponents bereitgestellte MapLibre-Instanz koppeln. Jetzt übernimmt die Bibliothek diese Integration. Der Nutzer muss lediglich:
1. Den DeckGlContextProvider einmalig in der Anwendung registrieren:
import { MapComponentsProvider, MapLibreMap } from '@mapcomponents/react-maplibre';
import { DeckGLContextProvider } from '@mapcomponents/deck-gl';
const App = () => (
<MapComponentsProvider>
<DeckGLContextProvider mapId="map_1">
{/* deck.gl-Komponenten hier einfügen */}
</DeckGLContextProvider>
<MapLibreMap
options={{
style: 'https://wms.wheregroup.com/tileserver/style/osm-bright.json',
center: [7.0851268, 50.73884],
zoom: 14.5,
}}
mapId="map_1"
/>
</MapComponentsProvider>
);2. Die gewünschten Komponenten hinzufügen und mindestens die erforderlichen Felder definieren:
import { Ml3DTileLayer } from '@mapcomponents/deck-gl';
<Ml3DTileLayer
mapId="map_1"
data="https://3dtiles.wheregroup.com/tileset.json"
/>Verfügbare Komponenten im ersten Release
Das Paket @mapcomponents/deck-gl bietet in seinem ersten Release drei Komponenten:
- Ml3DTileLayer: Basierend auf dem Tile3DLayer von deck.gl, rendert diese Komponente 3D-Tiles-Daten gemäß der OGC 3D Tiles Specification. Als zusammengesetzte Layer (Composite Layer) verwendet sie je nach Kacheltyp einen PointCloudLayer (Punktwolken), einen ScenegraphLayer (glTF-Szenengraphen) oder einen SimpleMeshLayer (3D-Meshgeometrien) zum Rendern der Geometrien.
- MlSceneGraphLayer: Eine Visualisierungskomponente zum Rendern mehrerer Instanzen komplexer 3D-Modelle im glTF-Format auf der Karte. Sie ermöglicht es, detaillierte 3D-Objekte (wie Fahrzeuge, Bäume oder Gebäude) an bestimmten geografischen Koordinaten zu platzieren und dabei Skalierung, Rotation und Position zu steuern.
- MlHexagonLayer: Aggregiert Daten in einer hexagonalen Heatmap. Farbe und Höhe der Hexagone werden anhand der enthaltenen Datenobjekte bestimmt. Diese Schicht ist ein gutes Beispiel für die Art komplexer Visualisierungen, die mit deck.gl möglich sind.
Der Layer-Katalog von deck.gl ist sehr umfangreich. In diesem ersten Release haben wir uns auf die zentralen Komponenten für den Aufbau digitaler Zwillinge konzentriert. Sukzessive wird MapComponents weitere deck.gl-Komponenten integrieren, um das Angebot zu erweitern. Wir freuen uns dabei über die Mitarbeit unserer Community auf GitHub sowie über konkrete Anfragen und Wünsche der Nutzer.
Three.js: Ein Paket zur Erweiterung des Möglichkeitshorizonts
Während deck.gl bereits leistungsstarke Optionen zum Rendern von 3D-Objekten auf der Karte bietet, erweitert das neue Paket @mapcomponents/three basierend auf Three.js die Möglichkeiten deutlich. Es öffnet die Tür zu reichhaltigeren Animationen, realistischeren Szenen und fortgeschrittenen 3D-Interaktionen.
Der Kern des Pakets ist der ThreeProvider, der eine Three.js-Szene, Kamera und Renderer initialisiert und als Custom Layer in der MapLibre-Karte registriert. Aktuell ermöglicht die Komponente MlThreeModelLayer das Laden und Platzieren von 3D-Objekten ohne explizite Georeferenzierung. Unterstützte Formate sind .glb und .obj (nur Geometrie):
import { MapComponentsProvider, MapLibreMap } from '@mapcomponents/react-maplibre';
import { ThreeProvider, MlThreeModelLayer } from '@mapcomponents/three';
const App = () => (
<MapComponentsProvider>
<ThreeProvider id="three-scene-1" mapId="map_1">
<MlThreeModelLayer
url="https://example.com/model.glb"
mapPosition={[13.404954, 52.520008]}
scale={10}
/>
</ThreeProvider>
<MapLibreMap
options={{
style: 'https://wms.wheregroup.com/tileserver/style/osm-bright.json',
center: [13.404954, 52.520008],
zoom: 15,
pitch: 60,
}}
mapId="map_1"
/>
</MapComponentsProvider>
);
Im Unterschied zum MlSceneGraphLayer von deck.gl benötigt diese Komponente keine vorher georeferenzierten Daten: Die Modelle können frei in der 3D-Szene platziert und transformiert und anschließend visuell mit der Karte abgeglichen werden.
Eine zweite Komponente, MlThreeSplatLayer, befindet sich in der experimentellen Phase und ermöglicht das Laden von Gaussian Splats direkt auf der Karte – eine innovative Technik, die effizient Fotorealistische Darstellung Dreidimensionaler Objekte und Scenen ermöglicht.
Obwohl sich das Paket noch in einer frühen Phase befindet, ist @mapcomponents/three darauf ausgelegt, eine Brücke zu BIM/CAD- und Digital Content Creation-orientierten Formaten zu schlagen. Beispiele hierfür sind .fbx, Collada (.dae), STL, 3DS und weitere. Zudem soll das Paket neuartige Darstellungsformen wie Gaussian Splats unterstützen. Damit ergänzt es die deck.gl-Integration, die sich primär auf glTF/GLB und datengetriebene Visualisierungen konzentriert, um vielfältigere 3D-Inhalte und Arbeitsabläufe auf MapLibre.
Fazit und Ausblick
Mit den neuen Paketen @mapcomponents/deck-gl und @mapcomponents/three erweitern wir die Möglichkeiten unserer Bibliothek erheblich und tragen dem Wandel in der Web-Kartographie Rechnung. Ob digitale Zwillinge, immersive 3D-Stadtmodelle oder datenintensive Analysen – MapComponents bietet nun die passenden Werkzeuge, um diese Anforderungen mit einfachen, deklarativen React-Komponenten umzusetzen.
Die Pakete befinden sich in aktiver Entwicklung und werden kontinuierlich um weitere Komponenten und Funktionen ergänzt. Wir laden unsere Community herzlich ein, sich auf GitHub zu beteiligen – sei es durch Beiträge, Feature-Wünsche oder Feedback.
