إذا كتبت أي كود يتحدث إلى مكتبة خرائط، فقد كتبت كوداً يلمس viewport. viewport هو الحالة الزمنية للخريطة: أين تتمحور، وكم التكبير، وأي اتجاه تشير، وكم تميل اختيارياً. كل تمرير وتكبير ودوران ونقر يعتمد عليه.
يشرح هذا الدليل ما هو viewport فعلاً، والقيم الأربع الأساسية التي تصفه، وكيف يتفاعل مع البلاطات وbounding boxes، وأنماط الإنتاج لحفظ واستعادة ومشاركة حالة viewport.
القيم الأربع الأساسية
viewport خريطة ويب الحديثة يُوصف بما يصل إلى أربع قيم:
- المركز (
{ lat, lng }): الإحداثي الجغرافي في منتصف الشاشة. - التكبير (عدد، غالباً عشري): مدى تكبير الخريطة. الأرقام الأعلى تعرض مساحات أصغر بتفاصيل أكثر.
- الدوران (عدد بالدرجات، الافتراضي 0): دوران الخريطة من "الشمال لأعلى". 90 يعني الشرق لأعلى.
- الميل (عدد بالدرجات من 0 إلى ~85): الإمالة ثلاثية الأبعاد. 0 يعني منظر عمودي مسطح، 60 يعني منظوراً قوياً.
كل مكتبة خرائط حديثة (MapLibre GL وMapbox GL وOpenLayers وLeaflet وMapAtlas Dynamic Maps) تعرض هذه كحالة قابلة للقراءة والكتابة. مكتبة ثنائية الأبعاد فقط مثل Leaflet قد لا تعرض الدوران أو الميل.
مستويات التكبير بالتفصيل
مستوى التكبير هو الأكثر استفساراً عن القيم الأربع. إنه عدد صحيح أو كسري يربط العالم بهرم البلاطات:
- التكبير 0: العالم كله في بلاطة واحدة 256×256
- التكبير 1: العالم مقسم إلى 4 بلاطات
- التكبير 2: 16 بلاطة
- ...
- التكبير 14: نحو 268 مليون بلاطة، مقياس الحي
- التكبير 18: مقياس المبنى
- التكبير 22+: يُصيَّر عادةً بتكبير نمط المتجهات لا ببيانات بلاطات جديدة
قاعدة مفيدة عند خط الاستواء: كل زيادة في مستوى التكبير تنصّف العرض المرئي على الشاشة. عند التكبير 14، تعرض الشاشة عادةً بضعة مبانٍ. عند التكبير 10، منطقة مدينة كبرى. عند التكبير 6، دولة. الدقة الفعلية تعتمد على حجم الشاشة والإسقاط (Web Mercator يشوّه الشمال-الجنوب مع الاقتراب من القطبين).
معظم الكود الإنتاجي يخزّن التكبير كعدد عشري لأن تحريكات التكبير السلسة تتداخل بين مستويات التكبير الصحيحة. جلب البلاطات يحدث عند المستوى الصحيح المقرَّب لأعلى أو لأسفل حسب اصطلاح المكتبة.
Viewport مقابل Bounding Box
viewport هو حالة الكاميرا. bounding box هو المستطيل الجغرافي المرئي حالياً. تحسب bbox من viewport في كل مرة تحتاج فيها سؤال الخادم "ماذا يجب أن أعرض داخل هذا المنظور؟".
في الكود:
const bbox = map.getBounds(); // يعيد { _sw: {lat, lng}, _ne: {lat, lng} }
const params = new URLSearchParams({
bbox: `${bbox._sw.lng},${bbox._sw.lat},${bbox._ne.lng},${bbox._ne.lat}`,
});
const features = await fetch(`/api/places?${params}`).then(r => r.json());
هذا النمط (حساب bbox من viewport، إرساله للخادم، تصيير المعالم المُعادة) هو نبضة قلب كل تجربة بحث مبنية على منطقة العرض: العقارات والقوائم ومحدد المتاجر وتتبع الأسطول ومشاركة الركوب.
كيف يشغّل Viewport تحميل البلاطات
عند تغيير viewport، تكتشف مكتبة الخرائط أي البلاطات تغطي المنطقة المرئية الجديدة عند مستوى التكبير الحالي، تجلب البلاطات المفقودة من الخادم أو ذاكرتها المؤقتة، وتصيّرها. البلاطات المخزّنة مؤقتاً تُعاد استخدامها، والبلاطات خارج منطقة العرض تُحتفظ بها في حال تمرير المستخدم عائداً.
تجربة التمرير والتكبير السلسة تبدو انسيابية لأن المكتبة تعمل هذا بشكل غير متزامن: ترسم ما لديها، تجلب ما تحتاجه، وتحدث اللوحة مع وصول بلاطات جديدة. خطوط أنابيب بلاطات المتجهات تعمل إضافياً لتصيير الهندسة إلى بكسلات على GPU، لهذا تبقى خرائط الويب الحديثة حادة بأي تكبير ودوران.
حفظ ومشاركة حالة Viewport
تخزين viewport في URL هو النمط المعياري لروابط الخرائط القابلة للمشاركة. معظم المنتجات تستخدم hash مثل #map=14.5/52.5200/13.4050 (التكبير، خط العرض، خط الطول). عند تحميل الصفحة حلِّل hash وطبِّق viewport. عند تغيير viewport أضِف تأخيراً بضع مئات من الميلي ثانية ثم حدِّث hash حتى يبقى زر "رجوع" في المتصفح مفيداً.
لحالة داخل المتصفح عبر تبويبات أو جلسات، مفتاح localStorage بالشكل ذاته يعمل. لصفحات مصيَّرة على الخادم، يظهر viewport غالباً كمعاملات URL لروابط صديقة لمحركات البحث (?zoom=14&lat=52.52&lng=13.405).
تحيّز Viewport للبحث والإكمال التلقائي
تقبل geocoding APIs الـ viewport أو bbox كمعامل تحيّز. تعرض MapAtlas معامل boundary.rect.* للتصفية الصارمة وfocus.point.* للتحيّز الناعم. بدون تحيّز، الإكمال التلقائي لـ "Springfield" يعيد أي Springfield بأعلى شعبية عالمية. مع تحيّز viewport، المستخدم الذي يكتب داخل خريطة ماساتشوستس يحصل على نتائج ماساتشوستس أولاً.
طبِّق هذا التحيّز في كل ضغطة مفتاح. التكلفة معامل واحد والفائدة اقتراحات أكثر صلةً بكثير.
Viewport الأولي: أين تبدأ
أول شيء يجب على كل تطبيق خرائط تحديده هو أين يبدأ. الأنماط الشائعة:
- الافتراضي على موقع المستخدم: مستخدم في ألمانيا يصل إلى viewport فوق برلين، مستخدم في فرنسا فوق باريس.
- الافتراضي على آخر viewport للمستخدم: استمرار viewport عبر الجلسات.
- الافتراضي على البيانات: إذا عرضت خريطتك نتائج بحث، اضبط bbox تلك النتائج عند التصيير الأولي.
- الافتراضي على موقع IP: دقة منخفضة، لا يحتاج إذن، بديل جيد.
- طلب موقع المتصفح فقط حين يختار المستخدم صراحةً: لا تفعل ذلك عند التحميل الأول بدون موافقة مرئية من المستخدم.
اختيار viewport أولي معقول تفصيلة صغيرة ذات أثر كبير على الجودة المحسوسة.
كيف تعرض MapAtlas حالة Viewport
يعرض مكوّن MapAtlas Dynamic Maps واجهة getCenter وgetZoom وgetBearing وgetPitch وsetView ذاتها التي يوفرها كل مطوّر لخرائط الويب، مع إضافة استضافة حصرية في الاتحاد الأوروبي ومعاملات تحيّز viewport متسقة عبر نقطتَي نهاية Geocoding وSearch. للتعمق في كيفية تفاعل viewport مع البلاطات والإسقاطات، انظر ما هي بلاطة المتجهات وما هو Web Mercator.
الأسئلة الشائعة
ما هو viewport الخريطة؟
viewport الخريطة هو النافذة المرئية للخريطة: المنطقة الجغرافية المعروضة حالياً على الشاشة، موصوفةً بإحداثيات المركز (خط العرض وخط الطول) ومستوى التكبير وزاوية الدوران اختيارياً والميل ثلاثي الأبعاد. تُظهر كل خريطة ويب حديثة من Google Maps إلى MapLibre إلى MapAtlas هذا الـ viewport كحالة يمكنك قراءتها وضبطها برمجياً. يتغير viewport في كل مرة يمرر فيها المستخدم أو يكبر أو يدور أو يميل الخريطة.
ما هو مستوى التكبير؟
مستوى التكبير عدد صحيح أو كسري يتحكم في حجم العالم المرئي في بلاطة بحجم ثابت. التكبير 0 يضع العالم كله في بلاطة واحدة 256×256. كل مستوى تكبير لاحق يضاعف الدقة: التكبير 1 يحتوي 4 بلاطات، التكبير 2 يحتوي 16، وهكذا. التكبير 14 مقياس الحي تقريباً، التكبير 18 مقياس المبنى. معظم خرائط الإنتاج تدعم مستويات تكبير من 0 إلى 22 أو أبعد.
ما الفرق بين viewport وbounding box؟
viewport هو حالة الكاميرا: المركز والتكبير والدوران والميل. bounding box هو المستطيل الجغرافي الذي تعرضه الكاميرا حالياً. تحسب bbox من viewport: مع العلم بالمركز والتكبير وحجم الشاشة، تحسب مكتبة الخرائط المستطيل lat/lng المرئي. bbox هو ما تمرره إلى geocoding API كتحيّز لمنطقة العرض، وما تستعلم به في قاعدة البيانات للمعالم المرئية، وما تسجّله حين تريد معرفة ما كان ينظر إليه المستخدم.
كيف أحفظ وأستعيد viewport الخريطة؟
سلسِل القيم الأربع الأساسية في URL أو localStorage: إحداثيات المركز والتكبير والدوران. نمط شائع هو hash مثل #map=14.5/52.5200/13.4050 للتكبير 14.5 عند مركز برلين. عند تحميل الصفحة حلِّل hash واستدعِ map.setView(...) أو map.flyTo(...). MapAtlas وMapLibre وMapbox GL كلها تعرض getCenter وgetZoom وgetBearing وما يعادل setView، فهذا الانعكاس دالة مساعدة واحدة في أي قاعدة كود إنتاجية.
