مقارنة بين خرائط المتجهات وخرائط النقطية: أيهما يجب أن يستخدم تطبيقك

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

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

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

إذا كنت تبني بالفعل وتحتاج فقط الكود، انتقل إلى قسم البدء السريع.

ما هي بلاط النقطية؟

بلاط النقطية عبارة عن صورة PNG أو JPEG معروضة مسبقًا، عادةً 256×256 أو 512×512 بكسل، تمثل شريحة ثابتة من العالم على مستوى تكبير محدد. عندما يقوم المستخدم بالمسح أو التكبير، يطلب المتصفح البلاط المجاورة أو عالية الدقة، والتي قام الخادم بتقديمها وتخزينها مؤقتًا بالفعل.

يحدث التقديم بالكامل على جانب الخادم. صورة البلاط التي تصل إلى المتصفح هي صورة منتهية، تم وضع البكسل بالفعل، والألوان بالفعل مطبوخة. وظيفة المتصفح هي ببساطة عرضها.

كيف تعمل خوادم بلاط النقطية

عادةً ما تبدو مكدس بلاط النقطية كما يلي:

1. يتم معالجة البيانات الجغرافية الخام (OpenStreetMap، البيانات الكادسترية، نماذج الارتفاع) في قاعدة بيانات.
2. يقوم محرك تقديم (Mapnik هو الخيار الكلاسيكي) بتقديم البلاط مسبقًا في كل مستوى تكبير إلى ذاكرة التخزين المؤقت للبلاط.
3. يخدم خادم البلاط (TileServer GL في وضع النقطية، أو CDN مدار) الصور المخزنة مؤقتًا بواسطة اتفاقية URL /{zoom}/{x}/{y}.png.

النتيجة بسيطة وسريعة وبدون حالة. يمكن لأي عميل HTTP طلب بلاط، متصفح، تطبيق جوال، عملية على جانب الخادم لإنشاء صورة خريطة، أو تطبيق GIS سطح المكتب.

نقاط قوة بلاط النقطية

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

نقاط ضعف بلاط النقطية

• أحجام الملفات الكبيرة. يتراوح حجم بلاطة PNG بأبعاد 256×256 بين بضعة كيلوبايتات فوق المناطق المفتوحة ونحو 40-45 كيلوبايت فوق وسط مدينة كثيف. بلاط Retina (512×512) أربعة أضعاف عدد البكسل.
• البكسلة على شاشات عالية DPI. بلاط معروض لشاشة 1x يبدو ضبابيًا على شاشة 2x Retina ما لم تقدم بلاط @2x، مما يضاعف عرض النطاق الترددي.
• لا توجد دوران أو إمالة. إذا قمت بتدوير خريطة نقطية، سيتم تدوير تسميات النص معها وتصبح غير قابلة للقراءة. لهذا السبب تُعرض الخرائط النقطية دائمًا تقريبًا والشمال في الأعلى.
• لا توجد تغييرات نمط جانب العميل. هل تريد تغيير لون الطريق أو إخفاء رموز POI أو التبديل إلى الوضع الداكن؟ تحتاج إلى مجموعة بلاط جديدة، معروضة مسبقًا على جانب الخادم.
• استيفاء التكبير. بين مستويات التكبير الصحيحة، يقوم المتصفح بقياس الصورة الموجودة، مما يطمسها. شعور "التكبير السلس" الذي تحصل عليه ببلاط المتجهات لا يوجد مع النقطية.

ما هي بلاط المتجهات؟

يحتوي بلاط المتجهات على البيانات الجغرافية الخام لمنطقة خريطة، وهندسات الطرق، وضلاع المباني، والأجسام المائية، ومناطق استخدام الأراضي، وبيانات وضع التسميات، المشفرة كثنائية مضغوطة (عادةً صيغة Mapbox Vector Tile، .mvt). البلاط لا يحتوي على بكسل. يصف ما موجود في تلك المنطقة، وليس كيف يجب أن يبدو.

يحدث التقديم بالكامل على جانب العميل، باستخدام WebGL. عند تحميل خريطة متوافقة مع Mapbox GL JS (مثل MapAtlas)، يطلب SDK بلاط المتجهات، يستقبل بيانات الهندسة، ويستخدم مواصفات النمط لديك لرسم كل طريق ومبنى وتسمية على عنصر <canvas> في الوقت الفعلي، بسرعة تصل إلى 60 إطارًا في الثانية على الأجهزة القادرة.

كيف يعمل تقديم بلاط المتجهات

Vector tile (.mvt) + Style JSON → WebGL shader → Canvas pixels

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

نقاط قوة بلاط المتجهات

• تنزيلات أقل أثناء التكبير. تُجلب بلاطة المتجهات حتى أقصى مستوى تكبير للمصدر (غالبًا 14) ثم يُعاد استخدامها لكل مستوى تكبير أقرب، بينما تجلب الخريطة النقطية أربع بلاطات جديدة عند كل خطوة تكبير. في مراكز المدن الكثيفة قد تكون بلاطة المتجهات الواحدة أكبر من نظيرتها النقطية، لذا يأتي التوفير من إعادة الاستخدام وليس من صغر حجم الملفات.
• حاد في أي دقة. تتسع هندسة المتجهات رياضيًا. تحصل شاشة Retina على نفس البلاط مثل شاشة قياسية، يقوم المعالج ببساطة بإخراج بكسل أكثر. لا حاجة إلى متغيرات بلاط @2x.
• تكبير سلس وتدوير. لأن المعالج يعمل على هندسة خام، يمكن استيفاء التكبير بشكل مستمر (وليس فقط عند مستويات صحيحة) ويمكن الخريطة أن تنحني وتدور مع التسميات دائمًا منتصبة.
• السيطرة الكاملة على نمط جانب العميل. غيّر أي خاصية بصرية، لون الطريق، خط التسمية، رؤية الطبقة، العتامة، عن طريق تحديث كائن النمط. لا توجد طلبات بلاط جديدة. الوضع الداكن هو تبديل JSON نمط، وليس مجموعة بلاط جديدة.
• امتداد المباني ثلاثي الأبعاد. تتضمن بلاط المتجهات بيانات ارتفاع المباني. يمكن للمعالجات بثق البلاط ثلاثي الأبعاد باستخدام WebGL. بلاط النقطية ليس لديها مفهوم الارتفاع.
• تصميم مدفوع بالبيانات. ألوان الطرق حسب حد السرعة، الظل استخدام الأراضي حسب الفئة، مؤشرات مقياس حسب السكان، كل ذلك مدفوع بخصائص البيانات في البلاط دون لمس الخادم.

نقاط ضعف بلاط المتجهات

• WebGL مطلوب. عدم وجود دعم WebGL يعني عدم وجود تقديم بلاط المتجهات. هذا يستبعد المتصفحات القديمة جدًا (IE11) وبيئات بدون أمراس معينة.
• حمل CPU/GPU على جانب العميل. يحدث التقديم على جهاز المستخدم. على هواتف Android منخفضة المستوى أو أجهزة سطح المكتب المحملة بشدة، يمكن لأنماط الخرائط المعقدة ذات الطبقات العديدة أن تسبب انخفاضات الإطارات.
• إعداد أولي أكثر تعقيدًا. تحتاج إلى مكتبة تقديم (Mapbox GL JS أو MapLibre GL أو SDK MapAtlas) و JSON نمط، وليس فقط علامة <img>.
• تحميل الخط والحروف الرسومية. يتطلب تقديم التسمية تقديم ملفات الحروف الرسومية بشكل منفصل. هذا يضيف عدة طلبات شبكة إضافية عند الحمل الأول.

مقارنة الأداء: أرقام حقيقية

لجعل المقايضة ملموسة، إليك مقارنة وسط أمستردام في مستوى التكبير 14 على خوادم البلاط العامة لـOpenStreetMap (تم القياس في سبتمبر 2026):

على نطاق واسع، يظهر الفرق في عدد الطلبات أكثر مما يظهر في حجم البيانات. وجد اختبار تحميل محكّم أن تفاعلات التكبير والتحريك جلبت بلاطة أو اثنتين من بلاط المتجهات مقابل 40 بلاطة نقطية، رغم أن بلاط المتجهات حمل بيانات أكثر. بالنسبة لتطبيق متوسط الحركة يولد 10 ملايين طلب بلاط شهريًا، فإن تقليل الطلبات مهم، لأن طلب البلاطة هو الوحدة التي تُحتسب عليها فواتير API الخرائط.

متى تستخدم بلاط النقطية

بلاط النقطية ليست عفا عليها الزمن. هناك سيناريوهات واضحة حيث تبقى الخيار الصحيح:

تكامل النظام الموروث. إذا كنت تدمج خريطة في تطبيق .NET WebForms أو عرض Rails معروض على الخادم، أو بيئة حيث تتحكم فقط في HTML وJavaScript الأساسية، فإن طبقة بلاط نقطية عبر Leaflet أو OpenLayers أبسط وأكثر موثوقية من إدخال معالج WebGL.

إنشاء صور الخريطة على جانب الخادم. إذا كنت بحاجة إلى تقديم لقطات خريطة على خادم Node.js لقوالب البريد الإلكتروني أو صادرات PDF أو صور الرسم البياني المفتوح، فإن التقديم النقطي بدون أمراس هو مسارك. تعمل أدوات مثل node-canvas بالإضافة إلى مصدر بلاط نقطي حيث لا يعمل WebGL.

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

حالات الاستخدام البسيطة جدًا. هل تقوم بتضمين خريطة موقع ثابتة على صفحة جهات الاتصال؟ إعداد Leaflet + OpenStreetMap النقطي البسيط يستغرق 20 دقيقة وليس له تعقيد JavaScript. الترقية إلى بلاط المتجهات ليست مبررة لدبوس موقع غير تفاعلي.

متى تستخدم بلاط المتجهات

اختر بلاط المتجهات لأي تطبيق ويب حديث حيث تهتم بـ:

• تصميم العلامة التجارية المخصص. إذا كان نظام التصميم الخاص بك يحتوي على ألوان محددة، فيجب أن تحتوي خريطتك أيضًا. بلاط المتجهات تجعل هذا تغيير JSON.
• دعم الوضع الداكن. JSON نمط داكن هو ملف تكوين واحد. التبديل بين الوضع الفاتح والداكن هو استدعاء map.setStyle().
• حدة عالية DPI / Retina. مهم بشكل خاص لتطبيقات الهاتف المحمول أولاً وأي واجهة مستخدم حيث يكون التقديم الحاد أولوية التصميم.
• تجربة المستخدم السلسة. استيفاء التكبير المستمر والتقديم السلس لخريطة متجهة يلاحظه المستخدمون على الفور. تشعر خرائط النقطية بالثقل عند المقارنة في السياقات التفاعلية.
• طبقات تصور البيانات. إضافة خريطة حرارة أو مخطط مناطق أو طبقة مجموعة إلى خريطة متجهة يتطلب فقط تكوين جانب العميل. على خريطة نقطية، ستقوم بتفجير بلاط جديد أو استخدام خدعة تراكب على القماش.
• المنظورات ثلاثية الأبعاد أو المائلة. يمكن تحقيقه فقط ببلاط المتجهات و WebGL.

البدء السريع: بلاط المتجهات مع MapAtlas

يقدّم MapAtlas بلاط المتجهات عبر API متوافق مع Mapbox GL JS. إذا سبق لك استخدام Mapbox GL JS، فإن الترحيل يقتصر على تغيير رابط النمط واستبدال مفتاح API. وإذا كنت تبدأ من الصفر، فإليك الإعداد الكامل.

تثبيت SDK

npm install @mapmetrics/mapmetrics-gl

أو عبر CDN لمشاريع HTML البسيطة:

<link rel="stylesheet" href="https://unpkg.com/@mapmetrics/mapmetrics-gl/dist/mapmetrics-gl.css" />
<script src="https://unpkg.com/@mapmetrics/mapmetrics-gl/dist/mapmetrics-gl.js"></script>

عرض خريطة متجهة

import mapmetricsgl from '@mapmetrics/mapmetrics-gl';
import '@mapmetrics/mapmetrics-gl/dist/mapmetrics-gl.css';

const map = new mapmetricsgl.Map({
  container: 'map',         // ID of your <div>
  style: 'https://gateway.mapmetrics-atlas.net/styles/?fileName=YOUR_STYLE_ID/style.json&token=YOUR_API_KEY',
  center: [4.9041, 52.3676], // [longitude, latitude], Amsterdam
  zoom: 12,
  pitch: 0,     // 0 = top-down, 60 = 3D tilted
  bearing: 0,   // 0 = north-up, any value = rotated
});

يشير رابط style إلى ملف JSON مستضاف على خوادم MapAtlas يعرّف جميع الطبقات والخطوط والمصادر. يمكنك أيضاً استضافة ملف style JSON مخصص بنفسك للتحكم في كل جانب مرئي من الخريطة، راجع دليل تصور الخرائط وتنسيقها.

التبديل إلى الوضع الداكن أثناء التشغيل

const LIGHT_STYLE = 'https://gateway.mapmetrics-atlas.net/styles/?fileName=YOUR_STYLE_ID/style.json&token=YOUR_API_KEY';
const DARK_STYLE  = 'https://gateway.mapmetrics-atlas.net/styles/?fileName=YOUR_DARK_STYLE_ID/style.json&token=YOUR_API_KEY';
let isDark = false;

document.getElementById('toggle-dark').addEventListener('click', () => {
  isDark = !isDark;
  map.setStyle(isDark ? DARK_STYLE : LIGHT_STYLE);
});

لا تُرسَل أي طلبات بلاط جديدة للبيانات المخزنة مؤقتاً بالفعل. يتغير النمط فقط، ويبقى البلاط بنفس الهندسة الثنائية، مع إعادة رسمه بألوان جديدة.

إضافة طبقة بيانات GeoJSON

من أكثر ميزات بلاط المتجهات فائدة عرض بياناتك الخاصة كطبقة منسقة فوق الخريطة:

map.on('load', () => {
  // Add your own data source
  map.addSource('delivery-zones', {
    type: 'geojson',
    data: {
      type: 'FeatureCollection',
      features: [
        {
          type: 'Feature',
          geometry: {
            type: 'Polygon',
            coordinates: [[[4.85, 52.34], [4.95, 52.34], [4.95, 52.40], [4.85, 52.40], [4.85, 52.34]]],
          },
          properties: { zone: 'Zone A', capacity: 150 },
        },
      ],
    },
  });

  // Style it as a colored fill layer
  map.addLayer({
    id: 'delivery-zones-fill',
    type: 'fill',
    source: 'delivery-zones',
    paint: {
      'fill-color': '#97C70A',
      'fill-opacity': 0.2,
    },
  });

  map.addLayer({
    id: 'delivery-zones-outline',
    type: 'line',
    source: 'delivery-zones',
    paint: {
      'line-color': '#97C70A',
      'line-width': 2,
    },
  });
});

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

الترحيل من النقطية إلى المتجهات

إذا كان لديك إعداد Leaflet + بلاط نقطي موجود وتريد الترقية، فإليك مسار الترحيل الأدنى:

1. استبدال Leaflet بـ MapAtlas SDK (أو MapLibre GL JS إذا كنت تفضل معالج مفتوح المصدر بالكامل).
2. استبدال عنوان URL البلاط بـ MapAtlas style JSON URL.
3. انقل الطبقات الفوقية من طبقات Leaflet إلى مصادر وطبقات GL JS.
4. الاختبار في بيئات بدون WebGL. أضف رسالة بديلة أو تدهور لطيف لنسبة صغيرة من المستخدمين الذين لن يكون لديهم WebGL متاحًا.

النتيجة الوظيفية هي خريطة تبدو أحدث، وتحميل أسرع، ويمكن إعادة تصميمها دون لمس الخادم.

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

لدفع النمط أبعد، الوضع الداكن وألوان العلامة التجارية والخطوط المخصصة وإزالة العلامة المائية، راجع كيفية تصميم خريطة مخصصة بعلامة تجارية.

وإذا كنت تقيم MapAtlas مقابل Google Maps من وجهة نظر التكلفة والميزات، فإن MapAtlas مقابل Google Maps: لماذا يقوم المطورون بالتبديل يغطي الاختلافات الرئيسية.

الملخص: إطار عمل القرار

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

هل تريد البناء ببلاط المتجهات؟ قم بالتسجيل للحصول على مفتاح MapAtlas API مجاني، بدون بطاقة ائتمان مطلوبة. يعمل مفتاحك عبر APIs للبلاط والترميز الجغرافي والتوجيه والتقسيم الزمني من اليوم الأول.