استخدام Leaflet لتظليل منطقة محددة على الخريطة

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

كيفية قص منطقة من الخريطة باستخدام Leaflet

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

إنشاء الخريطة الأساسية

يمكنك البدء بإنشاء خريطة باستخدام الكود التالي. هنا نحدد الموقع الأولي للخريطة (مدينة لندن في هذه الحالة) مع إعداد طبقة tiles:

const map = L.map('map').setView([51.5074, -0.1278], 13); // مدينة لندن
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
  attribution: '© OpenStreetMap المساهمين'
}).addTo(map);

تحديد حدود الخريطة

لتحديد حدود الخريطة التي نعمل عليها، نقوم بإنشاء مصفوفة تتضمن الإحداثيات الخاصة بالحدود:

const mapBounds = [
  [-90, -180], // أسفل اليسار
  [-90, 180],  // أسفل اليمين
  [90, 180],   // أعلى اليمين
  [90, -180],  // أعلى اليسار
  [-90, -180]  // إغلاق الحلقة مرة أخرى إلى أسفل اليسار
];

إنشاء شكل المضلع

الخطوة التالية هي إنشاء الشكل المضلع للمنطقة التي نريد تحديدها. هذا الشكل سيسمح لنا بإنشاء فجوة:

const polygonCoords = [
  [51.5174, -0.1349], // أعلى اليسار
  [51.5115, -0.1225], // أعلى اليمين
  [51.5053, -0.1281], // أسفل اليمين
  [51.5093, -0.1406], // أسفل اليسار
  [51.5174, -0.1349]  // إغلاق المضلع
];

إنشاء طبقة القناع

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

const mask = L.polygon([
  ...mapBounds,
  ...polygonCoords.reverse() // المضلع كثقب
], {
  color: 'black',
  fillColor: 'black',
  fillOpacity: 0.25,
  stroke: false
}).addTo(map);
const polygon = L.polygon(polygonCoords, {
  stroke: false,
  fillOpacity: 0 // تعبئة العتامة
}).addTo(map);

نتيجة التنفيذ

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

خلاصة

في الختام، باستخدام الجافا سكريبت ومكتبة Leaflet، يمكنك بكل سهولة قص منطقة من خريطتك وإضافة تأثيرات تعتيم لبقية المناطق. يعد هذا الأسلوب مثالياً لمجموعة واسعة من التطبيقات، سواء لتقديم بيانات جغرافية أو خلق تجارب فريدة للمستخدمين. باستخدام الكود المقدم والممارسات الأفضل، يمكنك تخصيص خرائطك تماماً كما تريد.

إذا كنت مهتمًا بمزيد من التفاصيل حول كيفية استخدام Leaflet لتحقيق أهدافك في تطوير التطبيقات، فلا تتردد في البحث عن الأمثلة الإضافية والمصادر التي قد تفيدك في مشروعك.