Paris Google Photorealistic 3D Tiles 48.8584° N · 2.2945° E
React 19 · three.js ≥ 0.160 · ESM + CJS + types
Kartografi 3D
real-time
untuk React
Real-time 3D cartography for React.
Mesin Three.js imperatif yang dipasang React lalu dibiarkan bekerja. MapEngine memegang kamera, tile, dan layer, sehingga loop render tidak pernah menunggu re-render.
npm i @pasquelin/map3d three react react-dom
- Versi
- 0.6.0
- Peer
- react 19 · three ≥ 0.160
- Build
- ESM + CJS + .d.ts
- Lisensi
- PolyForm Noncommercial
Demo langsung
Coba langsung di peramban
Tanpa instalasi, tanpa kunci. Demo di bawah dibangun dari repositori ini setiap kali ada push dan disajikan langsung oleh GitHub Pages.
Galeri
Dari orbit ke trotoar
Satu pustaka menangani seluruh penurunan: globe orbital, clustering regional, garis atap, nama jalan di bawah kaki.
-
12 700 km Dari globe ke peta datar fallback elipsoid, clustering cerdas
-
9 km Marker dan cluster node DOM yang dipakai ulang, dipisah menurut kategori
-
3 km Garis langit dan cakrawala marker mempertahankan ukuran layarnya, berapa pun kemiringannya
-
900 m Grid koordinat menempel ke tanah, tebal garis di layar tetap
-
1,7 m Mode pejalan kaki tinggi mata, gravitasi, tumbukan
Kemampuan
Yang sudah tersedia
Setiap permukaan — bilah alat, kontrol, pencarian, grid koordinat, clustering — dipasang di dalam <Map> dan dikendalikan oleh konfigurasi. Anda tinggal menambahkan datanya.
-
3D fotorealistis, 2D datar
cesiumIonTokenGoogle Photorealistic 3D Tiles lewat Cesium Ion, globe elipsoid bila token tidak disetel, dan basemap 2D dari Google atau dari server XYZ Anda sendiri. -
Marker dan cluster DOM
markersLayer()Node DOM sungguhan dengan hover, fokus, dan animasi CSS bawaan. Dipakai ulang dan ditulis dalam satu lintasantranslate3d; agen yang bergerak meluncur, bukan dibuat ulang. -
Editor gambar
drawSeleksi kotak dan laso, pegangan ubah ukuran dan putar, gaya per alat, urungkan dan ulangi, GeoJSON masuk dan keluar. -
Data langsung mengikuti viewport
useLiveData()Muat ulang per bounding box saat kamera bergerak, ditambah pembaruan real-time. -
Simbologi MIL-STD-2525D
impor dinamisSDK simbologi 9 MB dimuat sesuai kebutuhan — tidak pernah masuk ke bundel yang tidak menampilkan simbol. -
Tema dan label bertipe
theme · labelsTerang dan gelap,prefers-reduced-motiondihormati, sepenuhnya bisa diterjemahkan. Tidak ada teks atau nilai yang ditanam di kode.
Sedang bekerja
Perkakasnya, saat dipakai
Setiap tangkapan layar di bawah berasal dari demo yang bisa Anda buka di atas — bukan mockup.
-
Menggambar dan menyeleksipegangan ubah ukuran dan putar, panel seleksi langsung, urungkan dan ulangi
-
Palet MIL-STD-2525Dkawan, lawan, netral, tak dikenal — SDK dimuat sesuai kebutuhan
-
Katalog dan sumber dataaktifkan satu sumber, 252 titik berdatangan dan cluster tersusun ulang
-
Tema terangsatu pengaturan — seluruh antarmuka mengikuti, termasuk petanya
Mulai cepat
Peta dengan cluster dalam belasan baris
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>
)
}Plugin opsional — IGN Géoplateforme, Windy, denah dalam ruangan — berada di repositori terpisah, dan Anda bisa menulis sendiri lewat API plugin.