Paris Google Photorealistic 3D Tiles 48.8584° N · 2.2945° E
React 19 · three.js ≥ 0.160 · ESM + CJS + types
Cartographie
3D temps réel
pour React
Real-time 3D cartography for React.
Un moteur Three.js impératif que React monte, puis laisse travailler. MapEngine détient la caméra, les tuiles et les couches : la boucle de rendu n'attend jamais un re-render.
npm i @pasquelin/map3d three react react-dom
- Version
- 0.6.0
- Peer deps
- react 19 · three ≥ 0.160
- Build
- ESM + CJS + .d.ts
- Licence
- PolyForm Noncommercial
Démos en ligne
Essayez-la dans le navigateur
Sans installation ni clé. Les démos ci-dessous sont compilées depuis ce dépôt à chaque push et servies directement par GitHub Pages.
Galerie
De l'orbite au trottoir
Une seule bibliothèque couvre toute la descente : globe orbital, regroupement régional, ligne d’horizon, noms de rue sous les pieds.
-
12 700 km Du globe à la carte plane repli ellipsoïde, clustering intelligent
-
9 km Markers et clusters nœuds DOM recyclés, répartis par catégorie
-
3 km Ligne d’horizon les markers gardent leur taille écran, quelle que soit l’inclinaison
-
900 m Grille de coordonnées drapée au sol, épaisseur de trait constante à l’écran
-
1,7 m Mode piéton hauteur des yeux, gravité, collisions
Capacités
Ce qui est livré
Toutes les surfaces — barre d'outils, contrôles, recherche, grille de coordonnées, clustering — sont montées dans <Map> et pilotées par la configuration. Vous n'ajoutez que les données.
-
3D photoréaliste, 2D à plat
cesiumIonTokenGoogle Photorealistic 3D Tiles via Cesium Ion, un globe ellipsoïde quand aucun token n'est posé, et un fond 2D servi par Google ou par votre propre serveur XYZ. -
Markers et clusters DOM
markersLayer()De vrais nœuds DOM, avec survol, focus et animations CSS natifs. Recyclés et écrits en une seule passetranslate3d: un agent qui bouge glisse au lieu d'être recréé. -
Éditeur de dessin
drawSélection au rectangle et au lasso, poignées de redimensionnement et de rotation, styles par outil, annuler/refaire, GeoJSON en entrée comme en sortie. -
Données temps réel pilotées par la vue
useLiveData()Rechargement par emprise au déplacement de la caméra, plus les mises à jour en temps réel. -
Symbologie MIL-STD-2525D
import dynamiqueLe SDK de symbologie, 9 Mo, est chargé à la demande — il n'entre jamais dans un bundle qui n'affiche aucun symbole. -
Thème et libellés typés
theme · labelsClair et sombre,prefers-reduced-motionrespecté, entièrement traduisible. Aucune chaîne ni valeur en dur nulle part.
À l’œuvre
Les outils, en fonctionnement
Chaque capture ci-dessous vient de la démo que vous pouvez ouvrir plus haut — aucune maquette.
-
Dessin et sélectionpoignées de redimensionnement et de rotation, panneau de sélection, annuler/refaire
-
Palette MIL-STD-2525Dami, hostile, neutre, inconnu — SDK chargé à la demande
-
Catalogue et sourceson active une source, 252 points arrivent et les clusters se recomposent
-
Thème clairun réglage — toute l’interface suit, carte comprise
Prise en main
Une carte avec clusters en une douzaine de lignes
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>
)
}Les plugins optionnels — IGN Géoplateforme, Windy, plans d'intérieur — vivent dans un dépôt séparé, et vous pouvez écrire les vôtres avec l'API plugin.