París Google Photorealistic 3D Tiles 48.8584° N · 2.2945° E
React 19 · three.js ≥ 0.160 · ESM + CJS + types
Cartografía 3D
en tiempo real
para React
Real-time 3D cartography for React.
Un motor Three.js imperativo que React monta y luego deja trabajar. MapEngine posee la cámara, los tiles y las capas, así que el bucle de render nunca espera a un re-render.
npm i @pasquelin/map3d three react react-dom
- Versión
- 0.6.0
- Peers
- react 19 · three ≥ 0.160
- Build
- ESM + CJS + .d.ts
- Licencia
- PolyForm Noncommercial
Demos en vivo
Pruébala en el navegador
Sin instalación ni claves. Las demos se compilan desde este repositorio en cada push y se sirven directamente desde GitHub Pages.
Galería
De la órbita a la acera
Una sola biblioteca cubre todo el descenso: globo orbital, agrupación regional, línea de tejados, nombres de calles bajo los pies.
-
12 700 km Del globo al mapa plano respaldo elipsoidal, clustering inteligente
-
9 km Markers y clusters nodos DOM reciclados, repartidos por categoría
-
3 km Horizonte urbano los markers mantienen su tamaño en pantalla, sea cual sea la inclinación
-
900 m Retícula de coordenadas ceñida al suelo, grosor de línea constante en pantalla
-
1,7 m Modo peatón altura de los ojos, gravedad, colisiones
Capacidades
Lo que viene incluido
Cada superficie — barra de herramientas, controles, búsqueda, retícula, clustering — se monta dentro de <Map> y se gobierna por configuración. Tú aportas los datos.
-
3D fotorrealista, 2D plano
cesiumIonTokenGoogle Photorealistic 3D Tiles vía Cesium Ion, un globo elipsoidal cuando no hay token, y un mapa base 2D servido por Google o por tu propio servidor XYZ. -
Markers y clusters en DOM
markersLayer()Nodos DOM reales con hover, foco y animación CSS nativos. Reciclados y escritos en una única pasadatranslate3d; un agente en movimiento se desliza en lugar de recrearse. -
Editor de dibujo
drawSelección por marco y lazo, manejadores de escala y rotación, estilos por herramienta, deshacer/rehacer, GeoJSON de entrada y salida. -
Datos en vivo guiados por la vista
useLiveData()Recarga por bounding box al mover la cámara, más actualizaciones en tiempo real. -
Simbología MIL-STD-2525D
import dinámicoEl SDK de simbología, de 9 MB, se carga bajo demanda — nunca entra en un bundle que no muestra símbolos. -
Tema y etiquetas tipados
theme · labelsClaro y oscuro,prefers-reduced-motionrespetado, totalmente traducible. Ninguna cadena ni valor codificado a mano.
En acción
Las herramientas, funcionando
Cada captura viene de la demo que puedes abrir arriba — ningún mockup.
-
Dibujo y selecciónmanejadores de escala y rotación, panel de selección en vivo, deshacer/rehacer
-
Paleta MIL-STD-2525Damigo, hostil, neutral, desconocido — SDK cargado bajo demanda
-
Catálogo y fuentesactivas una fuente, llegan 252 puntos y los clusters se recomponen
-
Tema claroun ajuste — toda la interfaz sigue, mapa incluido
Primeros pasos
Un mapa con clusters en una docena de líneas
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>
)
}Los plugins opcionales — IGN Géoplateforme, Windy, planos de interior — viven en un repositorio aparte, y puedes escribir el tuyo con la API de plugins.