Paris Google Photorealistic 3D Tiles 48.8584° N · 2.2945° E
React 19 · three.js ≥ 0.160 · ESM + CJS + types
Cartografia 3D
em tempo real
para React
Real-time 3D cartography for React.
Um motor Three.js imperativo que o React monta e depois deixa trabalhar. O MapEngine detém a câmera, os tiles e as camadas, então o loop de render nunca espera por um re-render.
npm i @pasquelin/map3d three react react-dom
- Versão
- 0.6.0
- Peers
- react 19 · three ≥ 0.160
- Build
- ESM + CJS + .d.ts
- Licença
- PolyForm Noncommercial
Demos ao vivo
Experimente no navegador
Sem instalação nem chaves. As demos são compiladas a partir deste repositório a cada push e servidas direto pelo GitHub Pages.
Galeria
Da órbita à calçada
Uma única biblioteca cobre toda a descida: globo orbital, clusterização regional, linha do horizonte, nomes de rua sob os pés.
-
12 700 km Do globo ao mapa plano fallback elipsoidal, clustering inteligente
-
9 km Markers e clusters nós DOM reciclados, divididos por categoria
-
3 km Linha do horizonte os markers mantêm o tamanho em tela, qualquer que seja a inclinação
-
900 m Retícula de coordenadas colada ao solo, espessura de linha constante em tela
-
1,7 m Modo pedestre altura dos olhos, gravidade, colisões
Recursos
O que vem na caixa
Cada superfície — barra de ferramentas, controles, busca, retícula, clustering — é montada dentro de <Map> e governada por configuração. Você entra com os dados.
-
3D fotorrealista, 2D plano
cesiumIonTokenGoogle Photorealistic 3D Tiles via Cesium Ion, um globo elipsoidal quando não há token, e um mapa base 2D servido pelo Google ou pelo seu próprio servidor XYZ. -
Markers e clusters em DOM
markersLayer()Nós DOM reais com hover, foco e animação CSS nativos. Reciclados e escritos em uma única passadatranslate3d; um agente em movimento desliza em vez de ser recriado. -
Editor de desenho
drawSeleção por marquise e laço, alças de redimensionamento e rotação, estilos por ferramenta, desfazer/refazer, GeoJSON na entrada e na saída. -
Dados ao vivo guiados pela viewport
useLiveData()Recarga por bounding box conforme a câmera se move, além de atualizações em tempo real. -
Simbologia MIL-STD-2525D
import dinâmicoO SDK de simbologia, de 9 MB, é carregado sob demanda — nunca entra em um bundle que não exibe símbolos. -
Tema e rótulos tipados
theme · labelsClaro e escuro,prefers-reduced-motionrespeitado, totalmente traduzível. Nenhuma string ou valor fixo no código.
Em ação
As ferramentas, funcionando
Cada captura vem da demo que você pode abrir acima — nenhum mockup.
-
Desenho e seleçãoalças de redimensionamento e rotação, painel de seleção ao vivo, desfazer/refazer
-
Paleta MIL-STD-2525Damigo, hostil, neutro, desconhecido — SDK carregado sob demanda
-
Catálogo e fontesvocê ativa uma fonte, chegam 252 pontos e os clusters se recompõem
-
Tema claroum ajuste — toda a interface acompanha, mapa incluído
Primeiros passos
Um mapa com clusters em uma dúzia de linhas
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>
)
}Os plugins opcionais — IGN Géoplateforme, Windy, plantas de interiores — vivem em um repositório separado, e você pode escrever o seu com a API de plugins.