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

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

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

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

1. Leaflet — خرائط تفاعلية على العميل

Leaflet هي مكتبة JavaScript خفيفة الوزن ولكنها قوية لإنشاء خرائط تفاعلية. تعمل من جانب المتصفح، ولكنها تتكامل بشكل ممتاز مع Node.js من خلال أدوات التجميع (Webpack، Vite) أو كجزء من تطبيقات SSR.

الإمكانيات الرئيسية:

دعم طبقات البلاط (OpenStreetMap، Mapbox، Google Maps وغيرها)؛
علامات، نوافذ منبثقة، مضلعات، خطوط؛
معالجة الأحداث (النقر، التحريك، التكبير)؛
إضافات للتجميع، خرائط الحرارة، البحث.

مثال على التوصيل وعرض خريطة مع علامة:

<!DOCTYPE html><html><head>    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css" />    <script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"></script></head><body>    <div id="map" style="height: 400px;"></div>    <script>        const map = L.map('map').setView([55.7558, 37.6173], 10);        L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {            attribution: '&copy; OpenStreetMap contributors'        }).addTo(map);        L.marker([55.7558, 37.6173]).addTo(map)            .bindPopup('موسكو، الكرملين')            .openPopup();    </script></body></html>

Leaflet مثالي للواجهة الأمامية، ولكن إذا كنت بحاجة إلى إنشاء خرائط من جانب الخادم (على سبيل المثال، للطباعة أو الصور الثابتة)، فاستخدم leaflet-headless أو التكامل مع Puppeteer.

2. node-geocoder — الترميز الجغرافي والترميز الجغرافي العكسي

node-geocoder هي مكتبة شاملة لتحويل العناوين إلى إحداثيات والعكس. تدعم العديد من المزودين: Google، OpenStreetMap (Nominatim)، Yandex، Here وغيرها.

التثبيت:

npm install node-geocoder

مثال على الاستخدام مع OpenStreetMap:

const NodeGeocoder = require('node-geocoder');

const options = {    provider: 'openstreetmap',    language: 'ar'};

const geocoder = NodeGeocoder(options);

// الترميز الجغرافي المباشر (عنوان ← إحداثيات)geocoder.geocode('الساحة الحمراء، موسكو')    .then(res => {        console.log('الإحداثيات:', res[0].latitude, res[0].longitude);    })    .catch(err => console.error(err));

// الترميز الجغرافي العكسي (إحداثيات ← عنوان)geocoder.reverse({ lat: 55.7558, lon: 37.6173 })    .then(res => {        console.log('العنوان:', res[0].formattedAddress);    })    .catch(err => console.error(err));

تتعامل المكتبة تلقائيًا مع حدود الطلبات وتدعم التخزين المؤقت. يُوصى بها لتطبيقات الخادم التي تحتاج إلى تحويل بيانات المستخدم.