Cartografia 3D
in tempo reale
per React

Real-time 3D cartography for React.

Un motore Three.js imperativo che React monta e poi lascia lavorare. MapEngine possiede la camera, i tile e i layer, così il ciclo di rendering non aspetta mai un re-render.

Apri la demo React Leggi la documentazione

npm i @pasquelin/map3d three react react-dom

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

Demo live

Provala nel browser

Senza installazione né chiavi. Le demo vengono compilate da questo repository a ogni push e servite direttamente da GitHub Pages.

La demo React: editor di disegno, selezione a riquadro e lista marker live

react Cruscotto operativo Una mappa 3D con allerte raggruppate per gravità e ricaricate allo spostamento, agenti animati seguiti dalla camera, zone, l’editor di disegno completo, alternanza chiaro/scuro e un tema neon alternativo. Pubblicata senza token Cesium Ion, quindi apre sulla mappa base self-hosted — tutto il resto funziona. Per il globo fotorealistico, clona il repository, imposta VITE_CESIUM_ION_TOKEN e porta providers.tiles3d.provider a external. Apri la demo

Galleria

Dall’orbita al marciapiede

Una sola libreria copre tutta la discesa: globo orbitale, clustering regionale, linea dei tetti, nomi delle strade sotto i piedi.

12 700 km Dal globo alla mappa piana fallback ellissoidale, clustering intelligente
9 km Marker e cluster nodi DOM riciclati, divisi per categoria
3 km Skyline e orizzonte i marker mantengono la dimensione a schermo, qualunque sia l’inclinazione
900 m Reticolo di coordinate aderente al suolo, spessore di linea costante a schermo
1,7 m Modalità pedone altezza degli occhi, gravità, collisioni

Funzionalità

Cosa c’è nella scatola

Ogni superficie — barra strumenti, controlli, ricerca, reticolo, clustering — è montata dentro <Map> e guidata dalla configurazione. Tu metti i dati.

All’opera

Gli strumenti al lavoro

Ogni schermata viene dalla demo che puoi aprire qui sopra — nessun mockup.

Disegno e selezionemaniglie di ridimensionamento e rotazione, pannello di selezione live, annulla/ripeti
Palette MIL-STD-2525Damico, ostile, neutrale, sconosciuto — SDK caricato su richiesta
Catalogo e sorgentiattivi una sorgente, arrivano 252 punti e i cluster si ricompongono
Tema chiaroun’impostazione — tutta l’interfaccia segue, mappa compresa

Per iniziare

Una mappa con cluster in una dozzina di righe

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>
  )
}

I plugin opzionali — IGN Géoplateforme, Windy, piante d’interni — vivono in un repository separato, e puoi scrivere il tuo con la API plugin.

Cartografia 3Din tempo realeper React

Cartografia 3D
in tempo reale
per React