TypeScript में भू-स्थान और मानचित्र: लाइब्रेरीज़, API और कोड उदाहरण

TypeScript में भू-स्थान और मानचित्र: लाइब्रेरीज़ और उपकरणों के लिए पूर्ण गाइड

आधुनिक वेब एप्लिकेशन तेजी से भौगोलिक डेटा के एकीकरण की मांग कर रहे हैं: उपयोगकर्ता के स्थान का पता लगाने से लेकर इंटरैक्टिव मानचित्र प्रदर्शित करने तक। TypeScript, अपनी सख्त टाइपिंग और आधुनिक मानकों के समर्थन के कारण, ऐसे समाधान विकसित करने के लिए एक आदर्श विकल्प बन गया है। इस लेख में, हम TypeScript में भू-स्थान और मानचित्रों के साथ काम करने के लिए लाइब्रेरीज़ और उपकरणों पर विस्तार से चर्चा करेंगे, व्यावहारिक कोड उदाहरण प्रस्तुत करेंगे और चयन के लिए सिफारिशें देंगे।

1. भू-स्थान प्राप्त करना: Navigator Geolocation API

ब्राउज़र का अंतर्निहित API navigator.geolocation उपयोगकर्ता के निर्देशांक प्राप्त करने का आधार है। TypeScript इस API के लिए प्रकार प्रदान करता है, जो काम को सुरक्षित और सुविधाजनक बनाता है।

// वर्तमान स्थिति प्राप्त करने के लिए टाइप किया गया फ़ंक्शनfunction getCurrentPosition(): Promise<GeolocationPosition> {    return new Promise((resolve, reject) => {        if (!navigator.geolocation) {            reject(new Error('भू-स्थान ब्राउज़र द्वारा समर्थित नहीं है'));            return;        }                navigator.geolocation.getCurrentPosition(            (position: GeolocationPosition) => {                resolve(position);            },            (error: GeolocationPositionError) => {                reject(error);            },            {                enableHighAccuracy: true,                timeout: 5000,                maximumAge: 0            }        );    });}

// उपयोग का उदाहरणasync function showUserLocation(): Promise<void> {    try {        const position = await getCurrentPosition();        const { latitude, longitude } = position.coords;        console.log(`अक्षांश: ${latitude}, देशांतर: ${longitude}`);    } catch (error) {        console.error('भू-स्थान प्राप्त करने में त्रुटि:', error);    }}

2. मानचित्र प्रदर्शित करना: लोकप्रिय लाइब्रेरीज़ की तुलना

TypeScript में मानचित्रों के साथ काम करने के लिए कई शक्तिशाली लाइब्रेरीज़ उपलब्ध हैं। आइए तीन सबसे लोकप्रिय विकल्पों पर विचार करें।

2.1 Leaflet TypeScript के साथ

Leaflet इंटरैक्टिव मानचित्रों के लिए एक हल्की, open-source लाइब्रेरी है। इसके आधिकारिक प्रकार (@types/leaflet) हैं, जो TypeScript के लिए पूर्ण समर्थन सुनिश्चित करते हैं।

import L from 'leaflet';import 'leaflet/dist/leaflet.css';

// टाइपिंग के साथ मानचित्र बनानाconst map: L.Map = L.map('map', {    center: [55.751244, 37.618423], // मास्को    zoom: 10,    zoomControl: true});

// OpenStreetMap टाइल्स जोड़नाL.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {    attribution: '© OpenStreetMap contributors'}).addTo(map);

// टाइप किए गए विकल्पों के साथ मार्करconst marker: L.Marker = L.marker([55.751244, 37.618423], {    draggable: true,    title: 'मास्को'}).addTo(map);

// टाइपिंग के साथ इवेंट हैंडलिंगmarker.on('dragend', (event: L.LeafletMouseEvent) => {    const coords: L.LatLng = event.target.getLatLng();    console.log(`नए निर्देशांक: ${coords.lat}, ${coords.lng}`);});

2.2 Mapbox GL JS

Mapbox समृद्ध स्टाइलिंग क्षमताओं के साथ उच्च-प्रदर्शन वेक्टर मानचित्र प्रदान करता है। TypeScript SDK mapbox-gl के माध्यम से उपलब्ध है।

import mapboxgl from 'mapbox-gl';import 'mapbox-gl/dist/mapbox-gl.css';

// एक्सेस टोकन सेट करनाmapboxgl.accessToken = 'YOUR_MAPBOX_TOKEN';

// टाइप किए गए पैरामीटर के साथ मानचित्र बनानाconst map: mapboxgl.Map = new mapboxgl.Map({    container: 'map',    style: 'mapbox://styles/mapbox/dark-v11',    center: [37.618423, 55.751244],    zoom: 12,    pitch: 45 // मानचित्र का झुकाव});

// कस्टम HTML के साथ मार्कर जोड़नाconst marker: mapboxgl.Marker = new mapboxgl.Marker({    color: '#FF0000',    draggable: true,    rotation: 45})    .setLngLat([37.618423, 5