TypeScript में भू-स्थान और मानचित्र: वेब अनुप्रयोगों के लिए पुस्तकालय और उपकरण

TypeScript में भू-स्थान और मानचित्र: उपकरणों का पूर्ण अवलोकन

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

1. अंतर्निहित Geolocation API

ब्राउज़र Geolocation API उपयोगकर्ता के निर्देशांक प्राप्त करने के लिए एक बुनियादी उपकरण है। TypeScript इस API के साथ काम करते समय टाइप सुरक्षा जोड़ता है।

// भू-स्थिति प्राप्त करने के लिए टाइप किया गया फ़ंक्शनinterface PositionOptions {  enableHighAccuracy?: boolean;  timeout?: number;  maximumAge?: number;}

async function getCurrentPosition(  options?: PositionOptions): Promise<GeolocationPosition> {  return new Promise((resolve, reject) => {    navigator.geolocation.getCurrentPosition(      resolve,      reject,      options    );  });}

// उपयोग(async () => {  try {    const position = await getCurrentPosition({ timeout: 5000 });    const { latitude, longitude } = position.coords;    console.log(`निर्देशांक: ${latitude}, ${longitude}`);  } catch (error) {    console.error('स्थिति प्राप्त करने में त्रुटि:', error);  }})();

2. Leaflet — हल्की मानचित्रण पुस्तकालय

Leaflet इंटरैक्टिव मानचित्रों के लिए सबसे लोकप्रिय ओपन-सोर्स पुस्तकालयों में से एक है। इसके पास @types/leaflet पैकेज के माध्यम से TypeScript के लिए उत्कृष्ट समर्थन है।

स्थापना और सेटअप

npm install leafletnpm install --save-dev @types/leaflet

बुनियादी मानचित्र का उदाहरण

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

class MapManager {  private map: L.Map;

  constructor(containerId: string, center: [number, number]) {    this.map = L.map(containerId).setView(center, 13);

    L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {      attribution: '© OpenStreetMap योगदानकर्ता'    }).addTo(this.map);  }

  addMarker(lat: number, lng: number, title?: string): void {    const marker = L.marker([lat, lng]).addTo(this.map);    if (title) {      marker.bindPopup(`<b>${title}</b>`).openPopup();    }  }

  setView(center: [number, number], zoom?: number): void {    this.map.setView(center, zoom || 13);  }}

// उपयोगconst map = new MapManager('map', [55.751244, 37.618423]);map.addMarker(55.751244, 37.618423, 'मास्को');

3. Mapbox GL JS — पेशेवर समाधान

Mapbox वेक्टर टाइल्स और उन्नत स्टाइलिंग के साथ एक शक्तिशाली प्लेटफ़ॉर्म प्रदान करता है। TypeScript SDK mapbox-gl पैकेज के माध्यम से उपलब्ध है।

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

// कॉन्फ़िगरेशन के लिए टाइपिंगinterface MapConfig {  container: string;  style: string;  center: [number, number];  zoom: number;  accessToken: string;}

class MapboxMap {  private map: mapboxgl.Map;

  constructor(config: MapConfig) {    mapboxgl.accessToken = config.accessToken;    this.map = new mapboxgl.Map(config);  }

  addGeoJSONLayer(data: GeoJSON.FeatureCollection): void {    this.map.addSource('geojson-data', {      type: 'geojson',      data    });

    this.map.addLayer({      id: 'geojson-layer',      type: 'circle',      source: 'geojson-data',      paint: {        'circle-radius': 6,        'circle-color': '#007cbf'      }    });  }}

// उपयोग का उदाहरणconst mapboxMap = new MapboxMap({  container: 'map',  style: 'mapbox://styles/mapbox/streets-v12',  center: [37.618423, 55.751244],  zoom: 10,  accessToken: process.env.MAPBOX_TOKEN || ''});