पेरिस Google Photorealistic 3D Tiles 48.8584° N · 2.2945° E
React 19 · three.js ≥ 0.160 · ESM + CJS + types
React के लिए
रीयल-टाइम
3D मानचित्रण
Real-time 3D cartography for React.
एक इम्परेटिव Three.js इंजन, जिसे React माउंट करता है और फिर काम करने देता है। MapEngine के पास कैमरा, टाइल और लेयर होते हैं, इसलिए रेंडर लूप कभी री-रेंडर का इंतज़ार नहीं करता।
npm i @pasquelin/map3d three react react-dom
- संस्करण
- 0.6.0
- पीयर निर्भरताएँ
- react 19 · three ≥ 0.160
- बिल्ड
- ESM + CJS + .d.ts
- लाइसेंस
- PolyForm Noncommercial
लाइव डेमो
ब्राउज़र में ही आज़माएँ
न इंस्टॉल, न कोई की। नीचे दिए डेमो हर पुश पर इसी रिपॉज़िटरी से बनते हैं और सीधे GitHub Pages से आते हैं।
गैलरी
कक्षा से फुटपाथ तक
एक ही लाइब्रेरी पूरा अवतरण संभालती है: कक्षीय ग्लोब, क्षेत्रीय क्लस्टरिंग, छतों की रेखा, पैरों तले सड़कों के नाम।
-
12 700 km ग्लोब से समतल मानचित्र तक दीर्घवृत्ताभ फ़ॉलबैक, समझदार क्लस्टरिंग
-
9 km मार्कर और क्लस्टर पुनः उपयोग किए गए DOM नोड, श्रेणी के अनुसार बँटे
-
3 km क्षितिज रेखा झुकाव चाहे जो हो, मार्कर अपना स्क्रीन आकार बनाए रखते हैं
-
900 m निर्देशांक ग्रिड ज़मीन से चिपकी, स्क्रीन पर रेखा की मोटाई स्थिर
-
1,7 m पैदल मोड आँखों की ऊँचाई, गुरुत्वाकर्षण, टकराव
क्षमताएँ
डिब्बे में क्या मिलता है
हर सतह — टूलबार, कंट्रोल, खोज, निर्देशांक ग्रिड, क्लस्टरिंग — <Map> के भीतर माउंट होती है और कॉन्फ़िगरेशन से चलती है। आप बस डेटा जोड़ते हैं।
-
फ़ोटोरियलिस्टिक 3D, समतल 2D
cesiumIonTokenCesium Ion के ज़रिए Google Photorealistic 3D Tiles, टोकन न होने पर दीर्घवृत्ताभ ग्लोब, और Google या आपके अपने XYZ सर्वर से आने वाला 2D बेसमैप। -
DOM मार्कर और क्लस्टर
markersLayer()नेटिव hover, फ़ोकस और CSS एनिमेशन वाले असली DOM नोड। पूल किए जाते हैं और एक हीtranslate3dपास में लिखे जाते हैं; चलता हुआ एजेंट दोबारा बनने के बजाय सरकता है। -
ड्रॉइंग एडिटर
drawआयत और लैसो चयन, आकार और घुमाव के हैंडल, हर औज़ार की अलग शैली, पूर्ववत और पुनः करें, GeoJSON आयात और निर्यात। -
व्यूपोर्ट से चलने वाला लाइव डेटा
useLiveData()कैमरा हिलने पर बाउंडिंग बॉक्स से दोबारा लोड, साथ में रीयल-टाइम अपडेट। -
MIL-STD-2525D प्रतीक
डायनामिक इम्पोर्ट9 MB का प्रतीक SDK ज़रूरत पड़ने पर ही लोड होता है — यह ऐसे बंडल में कभी नहीं जाता जो कोई प्रतीक नहीं दिखाता। -
टाइप्ड थीम और लेबल
theme · labelsहल्की और गहरी,prefers-reduced-motionका पालन, पूरी तरह अनुवाद योग्य। कहीं कोई हार्डकोडेड टेक्स्ट या मान नहीं।
काम करते हुए
औज़ार, काम पर
नीचे का हर स्क्रीनशॉट ऊपर खुलने वाले उसी डेमो का है — कोई मॉकअप नहीं।
-
ड्रॉइंग और चयनआकार और घुमाव के हैंडल, लाइव चयन पैनल, पूर्ववत और पुनः करें
-
MIL-STD-2525D पैलेटमित्र, शत्रु, तटस्थ, अज्ञात — SDK ज़रूरत पर लोड
-
कैटलॉग और स्रोतएक स्रोत चालू कीजिए, 252 बिंदु आते हैं और क्लस्टर फिर से बनते हैं
-
हल्की थीमएक सेटिंग — मानचित्र समेत पूरा इंटरफ़ेस उसके पीछे चलता है
शुरुआत
एक दर्जन पंक्तियों में क्लस्टर वाला मानचित्र
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>
)
}वैकल्पिक प्लगइन — IGN Géoplateforme, Windy, इनडोर फ़्लोर प्लान — एक अलग रिपॉज़िटरी में हैं, और आप प्लगइन API से अपना भी लिख सकते हैं।