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

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

تتطلب تطبيقات الويب الحديثة بشكل متزايد العمل مع البيانات الجغرافية: من عرض بسيط لموقع المستخدم إلى مسارات معقدة وتجميع (Clustering). يجعل TypeScript، بفضل تصنيفه الصارم (Strict Typing)، تطوير هذه الوظائف أكثر موثوقية وسهولة. في هذه المقالة، سنستعرض المكتبات الشائعة للعمل مع الخرائط والجغرافيا المكانية، ونقدم أمثلة على التكامل مع TypeScript، ونقدم نصائح عملية.

1. أساسيات الجغرافيا المكانية في المتصفح

قبل توصيل الخرائط، نحتاج إلى الحصول على إحداثيات المستخدم. يمكن تصنيف (Typing) واجهة برمجة التطبيقات المدمجة للجغرافيا المكانية (navigator.geolocation) بشكل ممتاز في TypeScript.

interface Position {\n  latitude: number;\n  longitude: number;\n  accuracy?: number;\n}\n\nfunction getCurrentPosition(): Promise<Position> {\n  return new Promise((resolve, reject) => {\n    navigator.geolocation.getCurrentPosition(\n      (pos) => {\n        resolve({\n          latitude: pos.coords.latitude,\n          longitude: pos.coords.longitude,\n          accuracy: pos.coords.accuracy\n        });\n      },\n      (error) => reject(error)\n    );\n  });\n}\n\n// الاستخدام\ngetCurrentPosition()\n  .then((pos) => console.log(`خط العرض: ${pos.latitude}, خط الطول: ${pos.longitude}`))\n  .catch((err) => console.error('خطأ في الجغرافيا المكانية:', err));

2. Leaflet — مكتبة خفيفة وشائعة

Leaflet هي واحدة من أبسط وأسرع المكتبات لعرض الخرائط. بالنسبة لـ TypeScript، توجد حزمة @types/leaflet.

التثبيت

npm install leaflet\nnpm install --save-dev @types/leaflet

مثال: خريطة مع علامة

import L from 'leaflet';\nimport 'leaflet/dist/leaflet.css';\n\n// دالة تهيئة مصنفة (Typed)\nfunction initMap(containerId: string, coords: [number, number]): L.Map {\n  const map = L.map(containerId).setView(coords, 13);\n\n  L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {\n    attribution: '© OpenStreetMap contributors'\n  }).addTo(map);\n\n  L.marker(coords)\n    .addTo(map)\n    .bindPopup('أنت هنا!');\n\n  return map;\n}\n\n// الاستخدام\nconst map = initMap('map', [55.7558, 37.6173]); // موسكو

تصنيف متقدم للأحداث

map.on('click', (e: L.LeafletMouseEvent) => {\n  const { lat, lng } = e.latlng;\n  console.log(`نقرة: ${lat}, ${lng}`);\n});

3. OpenLayers — أداة قوية للمهام المعقدة

يدعم OpenLayers عددًا كبيرًا من التنسيقات (GeoJSON، KML، WMS) وهو مناسب لأنظمة المعلومات الجغرافية الاحترافية. يتم تضمين الأنواع (Types) مع الحزمة.

التثبيت

npm install ol

مثال: خريطة مع علامة وتلميح منبثق

import Map from 'ol/Map';\nimport View from 'ol/View';\nimport TileLayer from 'ol/layer/Tile';\nimport OSM from 'ol/source/OSM';\nimport { fromLonLat } from 'ol/proj';\nimport Feature from 'ol/Feature';\nimport Point from 'ol/geom/Point';\nimport VectorLayer from 'ol/layer/Vector';\nimport VectorSource from 'ol/source/Vector';\nimport Style from 'ol/style/Style';\nimport Icon from 'ol/style/Icon';\nimport Overlay from 'ol/Overlay';\n\nfunction createMap(containerId: string, lon: number, lat: number): void {\n  const container = document.getElementById(containerId) as HTMLElement;\n\n  // إنشاء علامة\n  const marker = new Feature({\n    geometry: new Point(fromLonLat([lon, lat]))\n  });\n\n  marker.setStyle(new Style({\n    image: new Icon({\n      anchor: [0.5, 1],\n      src: 'https://openlayers.org/en/latest/examples/data/icon.png'\n    })\n  }));\n\n  // الطبقة المتجهة\n  const vectorLayer = new VectorLayer({\n    source: new VectorSource({\n      features: [marker]\n    })\n  });\n\n  // الخريطة\n  const map = new Map({\n    target: container,\n    layers: [\n