3D-Kartografie
in Echtzeit
für React

Real-time 3D cartography for React.

Eine imperative Three.js-Engine, die React montiert und dann arbeiten lässt. MapEngine besitzt Kamera, Tiles und Layer — die Renderschleife wartet nie auf ein Re-Render.

React-Demo öffnen Dokumentation lesen

npm i @pasquelin/map3d three react react-dom

Version: 0.6.0
Peers: react 19 · three ≥ 0.160
Build: ESM + CJS + .d.ts
Lizenz: PolyForm Noncommercial

Live-Demos

Im Browser ausprobieren

Ohne Installation, ohne Schlüssel. Die Demos werden bei jedem Push aus diesem Repository gebaut und direkt über GitHub Pages ausgeliefert.

Die React-Demo: Zeichen-Editor, Rahmenauswahl und Live-Markerliste

react Leitstand Eine 3D-Karte mit nach Schweregrad geclusterten Meldungen, die beim Bewegen nachgeladen werden, animierten Einheiten mit Kameraverfolgung, Zonen, dem vollständigen Zeichen-Editor, Hell/Dunkel-Umschaltung und einem alternativen Neon-Theme. Ohne Cesium-Ion-Token veröffentlicht, startet also auf der selbst gehosteten Basiskarte — alles andere läuft. Für den fotorealistischen Globus das Repository klonen, VITE_CESIUM_ION_TOKEN setzen und providers.tiles3d.provider auf external stellen. Demo öffnen

Galerie

Vom Orbit bis zum Gehweg

Eine Bibliothek deckt den gesamten Abstieg ab: Orbitalglobus, regionales Clustering, Dachlinie, Straßennamen unter den Füßen.

12 700 km Vom Globus zur flachen Karte Ellipsoid-Fallback, intelligentes Clustering
9 km Marker und Cluster wiederverwendete DOM-Knoten, nach Kategorie aufgeteilt
3 km Skyline und Horizont Marker behalten ihre Bildschirmgröße, egal bei welcher Neigung
900 m Koordinatengitter auf den Boden gelegt, konstante Linienstärke am Bildschirm
1,7 m Fußgängermodus Augenhöhe, Schwerkraft, Kollisionen

Funktionen

Was mitgeliefert wird

Jede Oberfläche — Werkzeugleiste, Steuerung, Suche, Koordinatengitter, Clustering — wird innerhalb von <Map> montiert und über Konfiguration gesteuert. Sie liefern die Daten.

In Aktion

Die Werkzeuge bei der Arbeit

Jeder Screenshot stammt aus der Demo, die Sie oben öffnen können — keine Mockups.

Zeichnen und AuswählenGriffe zum Skalieren und Drehen, Live-Auswahlpanel, Rückgängig/Wiederholen
MIL-STD-2525D-Palettefreund, feindlich, neutral, unbekannt — SDK bei Bedarf geladen
Katalog und Datenquelleneine Quelle einschalten, 252 Punkte kommen an und die Cluster ordnen sich neu
Helles Themeeine Einstellung — die gesamte Oberfläche folgt, die Karte eingeschlossen

Schnellstart

Eine geclusterte Karte in einem Dutzend Zeilen

import { Map, markersLayer, type MarkerData } from '@pasquelin/map3d'

type Alert = { title: string }

const alerts: MarkerData<Alert>[] = [
  { id: 1, type: 'critical', position: { lat: 48.8566, lng: 2.3522 }, title: 'Intrusion', data: { title: 'Intrusion' } },
  { id: 2, type: 'info', position: { lat: 48.8606, lng: 2.3376 }, title: 'Patrol', data: { title: 'Patrol' } },
]

export function App() {
  return (
    <div style={{ height: '100vh' }}>
      <Map
        center={{ lat: 48.8566, lng: 2.3522 }}
        zoom={13}
        layers={[markersLayer<Alert>({ points: alerts, cluster: { enabled: true } })]}
      />
    </div>
  )
}

Optionale Plugins — IGN Géoplateforme, Windy, Innenraumpläne — liegen in einem eigenen Repository, und eigene lassen sich mit der Plugin-API schreiben.

3D-Kartografiein Echtzeitfür React

3D-Kartografie
in Echtzeit
für React