إذا استخدمت Google Maps أو OpenStreetMap أو أي خريطة ويب حديثة في العقد الماضي، فكل طريق ومبنى رأيته كان على الأرجح محملاً كبلاطة متجهات. هذا التنسيق هو البطل المجهول لرسم خرائط الويب الحديث. إنه ما يجعل خرائط الويب تُحمّل بسرعة وتبدو حادة على أي شاشة ويتيح للمصممين شحن خرائط جميلة النمط دون إعادة تصيير العالم بأكمله لكل علامة تجارية.
يشرح هذا الدليل ما هي بلاطة المتجهات، وكيف تعمل، ولماذا حلّت محل بلاطات الرستر لمعظم حالات الاستخدام، وكيف تقدمها MapAtlas في بيئة الإنتاج.
التعريف في جملة واحدة
بلاطة المتجهات هي ملف ثنائي صغير يحتوي على المعالم الجغرافية لبلاطة واحدة من خريطة عند مستوى تكبير محدد، مرمَّزة كبيانات وليس كصورة مصيَّرة مسبقاً.
جزء "البيانات لا الصورة" هو الجوهر كله. مع بلاطة الرستر، قرر الخادم مسبقاً كيف تبدو كل بكسل. مع بلاطة المتجهات، يستقبل العميل الهندسة الأساسية من خطوط ومضلعات ونقاط وتسميات، ويصيّرها أثناء التشغيل بأي نمط اختاره المستخدم.
كيف تستخدم خرائط الويب البلاطات
كل خريطة ويب استخدمتها تقسّم العالم إلى شبكة من البلاطات. عند التكبير 0 يتسع العالم كله في بلاطة واحدة. عند التكبير 1 هناك 4 بلاطات، عند 2 هناك 16، وهكذا. تُعرَّف كل بلاطة بثلاثة أرقام: التكبير (z) والعمود (x) والصف (y). عندما تمرر أو تكبر، تجلب مكتبة الخرائط فقط البلاطات المرئية وتخزنها مؤقتاً وتتجاهل تلك التي غادرت منطقة العرض.
لبلاطات الرستر، يصيّر الخادم مسبقاً ملف PNG لكل (z, x, y). هذا يعمل لكنه محدود: النمط ثابت عند وقت التصيير، وكل تغيير في النمط يعني إعادة تصيير العالم بأكمله.
بلاطات المتجهات تعكس النموذج. يرسل الخادم الهندسة. العميل يصيّر. مجموعة بلاطات واحدة تدعم أي عدد من الأنماط وتبدو واضحة بأي DPI وتبقى صغيرة على الشبكة.
تنسيق MVT
التنسيق المعياري الفعلي هو MVT، مواصفة Mapbox Vector Tile. MVT ترميز Protocol Buffers ينظم المعالم في طبقات مسماة:
transportation(الطرق والسكك الحديدية)buildings(البصمات)places(المدن والبلدات والأحياء المسماة)landuse(الحدائق والمناطق السكنية والتجارية)water(المحيطات والبحيرات والأنهار)boundaries(المناطق الإدارية)
لكل معلم في طبقة هندسة ومجموعة سمات. إحداثيات الهندسة أعداد صحيحة في فضاء الإحداثيات المحلي للبلاطة من 0 إلى 4096، وهو ما يمنح MVT حجمه المضغوط.
MVT مفتوح تماماً ومحايد من حيث البائع ومدعوم من كل محرك تصيير رئيسي: Mapbox GL JS وMapLibre GL JS وOpenLayers وdeck.gl وحزم Mapbox لـ iOS وAndroid.
لماذا حلّت بلاطات المتجهات محل بلاطات الرستر
هناك خمسة أسباب تجعل خرائط الويب الحديثة تستخدم بلاطات المتجهات تقريباً بشكل شامل للطبقة الأساسية:
مرونة النمط. بمجموعة بلاطات واحدة يمكنك تصيير نمط فاتح ونمط داكن ونمط محسّن للطباعة ونمط تراكب صور فضائية ونمط بألوان العلامة التجارية للتسويق. لا إعادة تصيير على الخادم.
حادة بكمال في أي DPI. بلاطة رستر بدقة 1x تبدو ضبابية على شاشة Retina. بلاطة المتجهات تُصيَّر على العميل بدقة الجهاز الأصلية.
حمولات أصغر. غالباً ما تكون بلاطة المدينة المعقدة أصغر كـ MVT من PNG عالي الجودة، خاصةً بعد الضغط بـ gzip.
تفاعلية في وقت التشغيل. يمكنك تمييز طريق محدد عند التمرير عليه وتلاشي الطبقات غير المستخدمة وتحريك الانتقالات والاستجابة لنقرات المعالم لأن العميل يعرف ما تمثله كل بكسل.
تكبير وتدوير سلس. هندسة المتجهات تدور وتتحجم دون تحلل. بلاطات الرستر تبدو مكسورة عند التكبير بين مستويات التكبير الصحيحة أو التدوير.
التكلفة هي عمل CPU وGPU للعميل، وهو ليس مشكلة على أي جهاز صُنع في العقد الماضي.
ما الذي تنمّطه في وقت التشغيل
وثيقة النمط عادةً JSON بمواصفة Mapbox Style Spec تصف كيف يجب رسم كل طبقة. أمثلة على ما يمكن تغييره دون لمس بيانات البلاطة:
- لون كل فئة من الطرق
- عرض خطوط الطرق يتفاوت مع التكبير
- التسميات التي تظهر عند مستوى تكبير معين
- خط وحجم وهالة كل تسمية نصية
- رؤية طبقات كاملة بتبديل واحد
- ملء الأنماط والخطوط المتقطعة والتدرجات وتأثيرات الضبابية
هذا ما يجعل الخرائط المعلامَّة ممكنة. يمكن لفريق التصميم شحن ملف نمط وستصيَّر مجموعة البلاطات ذاتها بهوية علامتهم التجارية.
التخزين المؤقت والأداء
تُخزَّن بلاطات المتجهات مؤقتاً بكفاءة عالية لأن هندسة العالم لا تتغير كل دقيقة. ذاكرات التخزين المؤقت في CDN تحتفظ عادةً ببلاطات MVT لساعات أو أيام. تجلب مكتبة الخرائط مسبقاً البلاطات قبل اتجاه التمرير المحتمل للمستخدم وتحتفظ بالبلاطات المشاهدة مؤخراً في الذاكرة. النتيجة أن المستخدم الذي يتمرر عبر مدينة يرى تجربة سلسة لأن بلاطات منطقة العرض التالية محملة مسبقاً في الغالب.
تعرض خدمات البلاطات الإنتاجية عادةً البلاطات على مسار مثل /{z}/{x}/{y}.pbf. اتصال HTTP/2 أو HTTP/3 الحديث يجمع عشرات طلبات البلاطات بالتوازي.
أين تتناسب MapAtlas
تقدم MapAtlas بلاطات متجهات متوافقة مع MVT لمنتج الخرائط الديناميكية مع استضافة حصرية في الاتحاد الأوروبي وتسعير متوقع ومخطط بلاطات مصمم للتنميط اللاحق والتعليق التوضيحي بالذكاء الاصطناعي. نفس طبقات البيانات التي تشغّل الخريطة المرئية من أماكن ونقل ومبانٍ ونقاط اهتمام متاحة أيضاً كبيانات منظمة عبر واجهتي Geocoding وSearch APIs، فمعلم تراه على الخريطة يمكن استرجاعه كسجل JSON مكتوب لمنطقك الخاص.
للتعمق في طبقة التصيير، يغطي دليل تخصيص نمط الخرائط كيفية شحن نمط بلاطات متجهات يتوافق مع العلامة التجارية من البداية إلى النهاية.
الأسئلة الشائعة
ما هي بلاطة المتجهات؟
بلاطة المتجهات هي ملف ثنائي صغير يحتوي على المعالم الجغرافية كالطرق والمباني ونقاط الاهتمام والتسميات لبلاطة واحدة من خريطة ويب عند مستوى تكبير محدد. على عكس بلاطة الرستر التي هي صورة PNG أو JPG مصيَّرة مسبقاً، تحتوي بلاطة المتجهات على الهندسة الأساسية والسمات كبيانات. يصيّر المتصفح أو العميل الجوّال هذه البيانات إلى بكسلات في وقت التشغيل، مما يعني أن البلاطة ذاتها يمكن تنميطها بشكل مختلف وتدويرها وتصييرها بأي كثافة بكسل دون فقدان الحدة.
ما الفرق بين بلاطة المتجهات وبلاطة الرستر؟
بلاطة الرستر صورة PNG أو JPG ثابتة مصيَّرة مسبقاً على الخادم بنمط محدد. بلاطة المتجهات ملف ثنائي يحتوي على الهندسة والسمات ويصيّره العميل. بلاطات المتجهات أصغر حجماً على الشبكة وتدعم إعادة التنميط في وقت التشغيل وتبدو حادة بأي تكبير وأي DPI وتتيح تشغيل الطبقات وإيقافها دون إعادة الجلب. المقايضة هي أن العميل يحتاج للقيام بعمل التصيير، وهذا لا يمثل مشكلة على أي جهاز حديث.
ما هو تنسيق MVT؟
MVT هو مواصفة Mapbox Vector Tile، وهو التنسيق المعياري الفعلي لبلاطات المتجهات. إنه ترميز Protocol Buffers للمعالم الجغرافية لبلاطة واحدة منظمة في طبقات مسماة كالطرق والمباني والأماكن. التنسيق مفتوح ومحايد من حيث البائع ومدعوم من كل محرك تصيير حديث كـ Mapbox GL وMapLibre وOpenLayers. تقدم MapAtlas بلاطات متوافقة مع MVT عبر نقطة نهاية الخرائط الديناميكية.
ما حجم بلاطات المتجهات؟
بلاطة متجهات حضرية نموذجية عند مستوى التكبير 14 تتراوح بين 50 و200 كيلوبايت على الشبكة، وغالباً تُضغط إلى 30-100 كيلوبايت بعد gzip. الحجم يعتمد على كثافة بيانات المنطقة: بلاطة تغطي وسط باريس أثقل من بلاطة تغطي المحيط الأطلسي. تحقق معظم خرائط الإنتاج تجربة تمرير وتكبير سلسة لأن البلاطات تُخزّن مؤقتاً بقوة وتُجلب مسبقاً قبل عرض المستخدم وتُصيَّر على GPU.
