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

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

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

1. الحصول على الموقع الجغرافي: Navigator Geolocation API

واجهة برمجة التطبيقات المدمجة في المتصفح navigator.geolocation هي الأساس للحصول على إحداثيات المستخدم. يوفر TypeScript أنواعًا لواجهة برمجة التطبيقات هذه، مما يجعل العمل آمنًا ومريحًا.

// دالة مصنفة للحصول على الموقع الحالي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 هي مكتبة خفيفة ومفتوحة المصدر للخرائط التفاعلية. تحتوي على أنواع رسمية (@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});

// إضافة بلاطات OpenStreetMapL.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