الجغرافيا المكانية والخرائط في TypeScript: المكتبات والأدوات لتطبيقات الويب

الجغرافيا المكانية والخرائط في TypeScript: نظرة شاملة على الأدوات

تتطلب تطبيقات الويب الحديثة بشكل متزايد دمج البيانات الجغرافية والخرائط التفاعلية. يوفر TypeScript، كامتداد صارم الكتابة لـ JavaScript، إمكانيات ممتازة للعمل مع الجغرافيا المكانية بفضل الكتابة الثابتة ودعم المعايير الحديثة. في هذه المقالة، سنستعرض المكتبات والأدوات الرئيسية للعمل مع الخرائط والبيانات الجغرافية في TypeScript، وميزاتها وأمثلة على استخدامها.

1. واجهة برمجة التطبيقات المدمجة للموقع الجغرافي (Geolocation API)

واجهة برمجة التطبيقات للموقع الجغرافي في المتصفح (Geolocation API) هي أداة أساسية للحصول على إحداثيات المستخدم. يضيف TypeScript أمانًا في الكتابة عند العمل مع هذه الواجهة.

// دالة مكتوبة للحصول على الموقع الجغرافي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 هي واحدة من أشهر المكتبات مفتوحة المصدر للخرائط التفاعلية. تتمتع بدعم ممتاز لـ TypeScript من خلال الحزمة @types/leaflet.

التثبيت والإعداد

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 contributors'    }).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 || ''});