الجغرافيا المكانية والخرائط في JavaScript (Node.js): من الإحداثيات إلى التصور
تتطلب تطبيقات الويب الحديثة بشكل متزايد العمل مع البيانات الجغرافية: من التحديد البسيط لموقع المستخدم إلى بناء مسارات معقدة وخرائط تفاعلية. في نظام Node.js البيئي، توجد العديد من الأدوات التي تسمح بحل هذه المهام. في هذه المقالة، سنستعرض المكتبات الرئيسية للجغرافيا المكانية والخرائط، بالإضافة إلى تقديم أمثلة عملية لاستخدامها.
1. المفاهيم الأساسية: الجغرافيا المكانية والترميز الجغرافي
قبل الغوص في الكود، دعنا نوضح المصطلحات:
- الجغرافيا المكانية — تحديد الموقع الفعلي للجهاز (عادةً عبر IP أو GPS أو Wi-Fi).
- الترميز الجغرافي — تحويل عنوان (مثل "موسكو، الساحة الحمراء") إلى إحداثيات جغرافية (خط العرض، خط الطول).
- الترميز الجغرافي العكسي — تحويل الإحداثيات إلى عنوان قابل للقراءة.
في Node.js، تُستخدم مكتبة node-geocoder غالبًا لهذه المهام، وهي تدعم العديد من المزودين (خرائط Google، OpenStreetMap، Nominatim وغيرها).
2. تثبيت وإعداد node-geocoder
للبدء، قم بتثبيت الحزمة:
npm install node-geocoderمثال على الاستخدام الأساسي مع مزود OpenStreetMap (Nominatim):
const NodeGeocoder = require('node-geocoder');
const options = { provider: 'openstreetmap',};
const geocoder = NodeGeocoder(options);
// الترميز الجغرافي لعنوانgeocoder.geocode('موسكو، الكرملين') .then((res) => { console.log('الإحداثيات:', res[0].latitude, res[0].longitude); }) .catch((err) => { console.log('خطأ:', err); });
// الترميز الجغرافي العكسيgeocoder.reverse({ lat: 55.7522, lon: 37.6156 }) .then((res) => { console.log('العنوان:', res[0].formattedAddress); }) .catch((err) => { console.log('خطأ:', err); });يرجى ملاحظة: خدمة Nominatim لديها قيود على عدد الطلبات (طلب واحد في الثانية). للإنتاج، من الأفضل استخدام مزودين مدفوعين (Google، Here) أو إعداد خادم Nominatim خاص بك.
3. العمل مع الخرائط على جانب الخادم: Leaflet وOpenStreetMap
أشهر مكتبة JavaScript للخرائط التفاعلية هي Leaflet. تعمل في المتصفح، ولكن يمكنك إنشاء خرائط على الخادم باستخدام Node.js وإرسالها إلى العميل كـ HTML ثابت أو صورة.
لإنشاء خرائط ثابتة (صور)، استخدم الحزمة leaflet-static أو node-static-map. لنلق نظرة على مثال مع leaflet-static:
npm install leaflet-staticمثال على إنشاء صورة خريطة مع علامة:
const LeafletStatic = require('leaflet-static');
const map = new LeafletStatic({ center: [55.7522, 37.6156], // موسكو zoom: 12, size: [800, 600], layers: [ { tileLayer: 'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', attribution: '© مساهمو OpenStreetMap' } ], markers: [ { lat: 55.7522, lng: 37.6156, popup: 'الساحة الحمراء' } ]});
map.render() .then((buffer) => { // حفظ الصورة require('fs').writeFileSync('map.png', buffer); console.log('تم حفظ الخريطة كـ map.png'); }) .catch((err) => { console.error('خطأ:', err); });هذا الأسلوب مفيد لإنشاء معاينات الخرائط أو التقارير أو رسائل البريد الإلكتروني.
4. تحديد الموقع عبر IP
لتحديد الموقع الجغرافي عبر عنوان IP في Node.js، غالبًا ما تُستخدم الحزمة geoip-lite. تستخدم قاعدة بيانات GeoLite2 المحلية من MaxMind.
npm install geoip-liteمثال:
const geoip = require('geoip-lite');
const ip = '8.8.8