الجغرافيا المكانية والخرائط في JavaScript (Node.js): المكتبات والأمثلة

مدرب بايثون أونلاين للمبتدئين

تعلم Python بسهولة دون إرهاق نظري. حل مهام عملية مع التحقق التلقائي واكتب الكود مباشرة في المتصفح.

ابدأ الدورة

الجغرافيا المكانية والخرائط في JavaScript (Node.js)

\n

يعد العمل مع البيانات الجغرافية وعرض الخرائط من المهام الأساسية لتطبيقات الويب الحديثة. في نظام Node.js البيئي، توجد العديد من المكتبات التي تسمح بمعالجة الإحداثيات، وإنشاء المسارات، وإجراء الترميز الجغرافي العكسي، وعرض الخرائط التفاعلية. في هذه المقالة، سنستعرض الأدوات الرئيسية ونقدم أمثلة عملية للكود للجزء الخادم (Node.js).

\n\n

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

\n\n

1.1. Leaflet (الجزء العميل) و node-leaflet

\n

Leaflet هي مكتبة JavaScript الأكثر شيوعًا للخرائط التفاعلية. تعمل على جانب المتصفح، ولكن بالنسبة لـ Node.js، توجد حزمة leaflet (عبر npm install leaflet) التي تسمح بعرض الخرائط على الخادم باستخدام leaflet-headless أو استخدام البيانات بتنسيق GeoJSON.

\n

مثال على إنشاء خريطة كصورة على الخادم (باستخدام leaflet-static):

\n
const L = require('leaflet');\nconst { createCanvas } = require('canvas');\n\nconst map = L.map(createCanvas(800, 600), {\n    center: [55.751244, 37.618423], // موسكو\n    zoom: 10\n});\n\nL.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {\n    attribution: '© OpenStreetMap contributors'\n}).addTo(map);\n\n// تصدير إلى PNG (مبسط)\nconst buffer = map.getCanvas().toBuffer();\nrequire('fs').writeFileSync('map.png', buffer);
\n\n

1.2. OpenStreetMap (OSM) و Overpass API

\n

توفر OpenStreetMap بلاطات مجانية وAPI للبحث عن الكائنات. في Node.js، غالبًا ما يتم استخدام حزمة osmosis أو طلبات HTTP المباشرة إلى https://nominatim.openstreetmap.org للعمل مع OSM.

\n

مثال على الترميز الجغرافي العكسي (الحصول على العنوان من الإحداثيات):

\n
const fetch = require('node-fetch');\n\nasync function reverseGeocode(lat, lon) {\n    const url = `https://nominatim.openstreetmap.org/reverse?format=json&lat=${lat}&lon=${lon}`;\n    const response = await fetch(url, {\n        headers: { 'User-Agent': 'PythonLibExample/1.0' }\n    });\n    const data = await response.json();\n    return data.display_name;\n}\n\nreverseGeocode(55.751244, 37.618423).then(addr => console.log(addr));\n// النتيجة: "موسكو، روسيا، الساحة الحمراء"
\n\n

1.3. Turf.js — التحليل الجغرافي المكاني

\n

Turf.js هي مكتبة قوية لتنفيذ العمليات الهندسية: التخزين المؤقت، دمج المضلعات، حساب المسافات، المساحة، إلخ. تعمل في المتصفح وفي Node.js.

\n

مثال على حساب المسافة بين نقطتين (بالكيلومترات):

\n
const turf = require('@turf/turf');\n\nconst point1 = turf.point([37.618423, 55.751244]); // [خط الطول، خط العرض]\nconst point2 = turf.point([30.315868, 59.939095]); // سانت بطرسبرغ\n\nconst distance = turf.distance(point1, point2, { units: 'kilometers' });\nconsole.log(`المسافة: ${distance.toFixed(2)} كم`); // ≈ 634.5 كم
\n\n

1.4. GeoJSON و shapefile

\n

GeoJSON هو تنسيق لتخزين الهياكل الجغرافية (النقاط، الخطوط، المضلعات). في Node.js، يكفي استخدام JSON.parse المدمج للعمل معه، ولقراءة ملفات الشكل (shapefiles) يتم استخدام حزمة shapefile.

\n
const shapefile = require('shapefile');\n\nshapefile.open('path/to/file.shp')\n    .then(source => source.read()\n        .then(function log(result) {\n            if (result.done) return;\n            console.log(result.value); // ميزة GeoJSON\n            return source.read().then(log);\n        }))\n    .catch(error => console.error(error));
\n\n

2. الأدوات المتقدمة

\n\n

2.1. Mapbox GL JS (Node.js)

\n

توفر Mapbox منصة تجارية بخرائط عالية التفاصيل. لعرض الخرائط على الخادم، استخدم @mapbox/mapbox-gl-native. يتطلب مفتاح API.

\n\n

2.2. Nominatim (الترميز الجغرافي)

\n

توصيات