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

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

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

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

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

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

بلاط النقطية عبارة عن صورة 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 بحجم 30 إلى 200 كيلوبايت حسب كثافة المحتوى. بلاط 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. يمكن تغيير النمط في وقت التشغيل، دون جلب بلاط جديدة.

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

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

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

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

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

لجعل المقايضة ملموسة، فيما يلي القياسات الواقعية لبلاط خريطة وسط أمستردام في مستوى التكبير 14:

بناءً على الحجم، تقلل بلاط المتجهات عرض النطاق الترددي المتعلق بالخريطة بنسبة 60 إلى 80 في المائة. بالنسبة لتطبيق حركة متوسط يولد 10 ملايين طلب بلاط شهريًا، يقلل هذا الفرق بشكل كبير من تكاليف خروج CDN.

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

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

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

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

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

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

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

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

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

Quick Start: Vector Tiles with MapAtlas

MapAtlas serves vector tiles via a Mapbox GL JS-compatible API. If you've used Mapbox GL JS before, migration is a style URL change and an API key swap. If you're starting fresh, here's the complete setup.

Install the SDK

npm install @mapmetrics/mapmetrics-gl

Or via CDN for plain HTML projects:

<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>

Render a vector map

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://tiles.mapatlas.eu/styles/basic/style.json?key=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
});

The style URL points to a JSON file hosted on MapAtlas servers that defines all layers, fonts, and sources. You can also host a custom style JSON yourself to control every visual aspect of the map, see the Map Visualization & Styling guide.

Switch to dark mode at runtime

document.getElementById('toggle-dark').addEventListener('click', () => {
  const isDark = map.getStyle().name?.includes('dark');
  map.setStyle(
    isDark
      ? 'https://tiles.mapatlas.eu/styles/basic/style.json?key=YOUR_API_KEY'
      : 'https://tiles.mapatlas.eu/styles/dark/style.json?key=YOUR_API_KEY'
  );
});

No new tile requests are triggered for data that's already cached. Only the style changes, the tiles remain the same binary geometry, re-rendered with new colors.

Add a GeoJSON data layer

One of the most powerful vector tile features is overlaying your own data as a styled layer:

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,
    },
  });
});

This pattern, add a source, add a layer, paint with style expressions, is the same for heatmaps, route lines, isochrone polygons, and choropleth maps. It works because vector tiles give the renderer raw geometry, not finished pixels.

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

إذا كان لديك إعداد 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 للبلاط والترميز الجغرافي والتوجيه والتقسيم الزمني من اليوم الأول.