تحول الخريطة الحرارية سحابة من نقاط الإحداثيات إلى سطح كثافة يمكن قراءته فوراً. الألوان الساخنة تحدد المكان الذي تتجمع فيه الأحداث؛ الألوان الباردة تحدد المكان الذي تتناقص فيه. يفهم المستخدمون النمط قبل أن يقرأوا تسمية واحدة. لهذا السبب تعتبر الخرائط الحرارية الخيار الافتراضي لتحليل حركة المشاة وتنبؤات الطلب على التوصيل وأدوات الإبلاغ عن الجريمة وبحث أسعار الممتلكات.
ينشئ هذا البرنامج التعليمي خريطة حرارية تفاعلية من الصفر باستخدام MapAtlas SDK. ستنظم بيانات النقاط كـ GeoJSON مرجح، وترسم طبقة كثافة بتدرج ألوان مخصص، وتوصل منزلق الشدة، وتنتهي بمثال طلب تسليم حقيقي. في النهاية ستكون لديك نمط قابل لإعادة الاستخدام يمكنك إسقاطه في أي مشروع JavaScript أو React.
إذا كنت جديداً على MapAtlas SDK، اقرأ أولاً كيفية إضافة خرائط تفاعلية إلى موقعك. يغطي التثبيت وتهيئة الخريطة والعلامات. يبدأ هذا البرنامج التعليمي من حيث انتهى ذاك.
متى تستخدم الخريطة الحرارية
الخرائط الحرارية هي الأداة الصحيحة عندما يكون لديك مجموعة كبيرة من مواقع النقاط الفردية وتريد إيصال الكثافة وليس الهوية. تفقد العلامات الفردية معنى بعد بضع مئات من النقاط؛ تكشف الخريطة الحرارية عن بنية لا يمكن لأي قدر من الدبابيس أن يكشفها.
حالات الاستخدام الشائعة:
- تحليل حركة المشاة: اختيار موقع البيع بالتجزئة والتخطيط الحضري وتصميم نماذج الحشود. أسقط ping GPS لكل عميل مر عبر الباب والخريطة الحرارية تظهر أي مناطق المدينة أو مركز التسوق أو المكان يجذب معظم الناس.
- طلب التسليم: إجمالي أصول الطلب حسب الرمز البريدي أو الإحداثيات الخام لإظهار أجهزة الإرسال حيث يتركز الطلب. هذا يتغذى مباشرة في تخطيط المناطق وتخصيص السائقين.
- بيانات الجرائم والحوادث: لوحات معلومات تحليلات الشرطة وخرائط المخاطر التأمينية وأدوات الإبلاغ عن السلامة العامة تستخدم خرائط حرارية للكثافة لإيصال المخاطر المكانية دون إرهاق المستخدمين بعلامات فردية.
- تدرجات أسعار الممتلكات: عند دمجها مع القيم المرجحة، يمكن لخريطة حرارية أن تظهر أين تكون الأسعار أعلى في المدينة. انظر برنامج خريطة العقارات التعليمي لمزيد من المعلومات حول بناء أدوات خرائط موجهة نحو العقارات.
إذا كان سؤالك 'أين تحدث الأشياء بشكل أساسي؟' فالخريطة الحرارية هي إجابتك.
تنسيق البيانات: نقاط GeoJSON المرجحة
تقرأ طبقة الخريطة الحرارية MapAtlas قياسية GeoJSON FeatureCollection من ميزات Point. يمكن لكل ميزة أن تحمل خاصية weight التي تقيس مساهمتها في سطح الكثافة. يساهم أمر التسليم بقيمة 10 عناصر بحرارة أكثر من أمر عنصر واحد؛ محور النقل الرئيسي يولد حركة مشاة أكثر من شارع جانبي.
البيانات منسقة كما يلي، مع خصائص weight والمنطقة المحفوظة في الخصائص. قيمة weight بلا أبعاد، تطبيعها نسبة إلى نطاق مجموعة البيانات الخاصة بك. إذا كانت منطقة الطلب الأعلى لديك تولد 500 طلب وأهدأها تولد 10، فاربط تلك إلى مقياس من 1 إلى 10 قبل تمريرها. هذا يحافظ على الخريطة الحرارية ذات معنى بصري عبر مجموعات بيانات بها أعداد مطلقة مختلفة جداً.
بدون خاصية weight، تساهم كل نقطة بالتساوي وتعكس الخريطة الحرارية كثافة العد النقي.
المتطلبات الأساسية
قبل أن تبدأ:
- مفتاح MapAtlas API (سجل مجاناً، لا يتطلب بطاقة ائتمان)
- Node.js 18+ للمشاريع المستندة إلى npm، أو صفحة HTML عادية إذا كنت تفضل CDN
الخطوة 1: تثبيت وتهيئة الخريطة
ثبت SDK بأمر npm أو استخدم CDN. ثم نهيّئ الخريطة بـ Dark style حيث تبرز تدرجات الألوان بشكل أفضل.
import mapmetricsgl from '@mapmetrics/mapmetrics-gl';
import '@mapmetrics/mapmetrics-gl/dist/mapmetrics-gl.css';
const map = new mapmetricsgl.Map({
container: 'map',
style: 'https://tiles.mapatlas.eu/styles/dark/style.json?key=YOUR_API_KEY',
center: [4.9041, 52.3676], // Amsterdam
zoom: 12,
});
الخطوة 2: إضافة طبقة الخريطة الحرارية
سجل GeoJSON كمصدر، ثم أضف طبقة خريطة حرارية تقرأ منها. يضمن الاستدعاء map.on('load', ...) أن النمط انتهى من التحميل قبل تعديله.
ستوزن كل نقطة بخاصية الوزن الخاصة بها، مع نصف قطر الخريطة الحرارية بـ 30 بكسل وتعتيم 0.85. بعد هذه الخطوة سيكون لديك خريطة حرارية عاملة، الألوان الزرقاء الخضراء تشير إلى كثافة منخفضة والتدرج الافتراضي يتحول نحو الأصفر والأحمر عند الكثافة العالية.
الخطوة 3: تخصيص تدرج الألوان
خاصية heatmap-color تعيين قيم الكثافة (0 إلى 1) إلى ألوان باستخدام نفس تعبير interpolate المستخدم عبر نظام الرسم MapAtlas. الكثافة 0 شفافة حتى يظهر طبقة الخريطة الأساسية من خلالها في المناطق الفارغة.
يمكنك إنشاء تدرج مخصص يمتد من الأزرق (متفرق) من خلال الأخضر والأصفر إلى الأحمر (كثيف)، مطابقة النموذج الذهني الذي يحضره معظم المستخدمين من خرائط الطقس الرادارية والتصوير الحراري. استبدل قيم RGB بألوان العلامة الخاصة بك؛ المقارنة تتعامل مع الانتقالات الناعمة تلقائياً.
الخطوة 4: إضافة منزلق نصف القطر للتحكم التفاعلي
يتحكم نصف قطر الخريطة الحرارية في مدى تأثير كل نقطة. نصف قطر صغير (10 إلى 15 بكسل) يظهر مجموعات دقيقة الحبوب؛ نصف قطر كبير (50 إلى 80 بكسل) ينتج سطح أوسع وأسلس. حالات الاستخدام المختلفة تتطلب افتراضيات مختلفة.
امنح المستخدمين منزلق حتى يتمكنوا من التعديل أثناء التنقل. يتيح setPaintProperty تحديثاً حياً دون وميض. تعاد الخريطة الحرارية على GPU في نفس الإطار. هذا النمط يعمل مع أي خاصية رسم: التعتيم والشدة وتوقف الألوان.
الخطوة 5: تغيير الشدة حسب مستوى التكبير
عند مستويات التكبير المنخفضة (عرض على مستوى المدينة)، تتداخل النقاط القريبة بشكل كبير والخريطة الحرارية يمكن أن تبدو مشبعة بشكل موحد. عند التكبير العالي (مستوى الشارع)، تنتشر النقاط نفسها وسطح الكثافة يبدو قليلاً. تعويض الشدة المرتبط بالتكبير يبقي التصور قابلاً للقراءة في كل التكبير.
كلا الخاصيتين تستخدمان نفس تعبير interpolate عبر zoom. يتم استيفاء القيم بين التوقفات خطياً، لذا يكون الانتقال سلساً مع تكبير المستخدم.
مثال من العالم الحقيقي: خريطة حرارية لطلب التسليم
إليك تنفيذ كامل ومستقل بذاته لوحة معلومات طلب تسليم. تصل الأوامر من واجهة برمجية كـ FeatureCollection GeoJSON. تحدّث الخريطة الحرارية كلما غيّر المستخدم عامل التصفية الزمني.
يجلب setData على مصدر موجود GeoJSON بدون إعادة إضافة الطبقة. تعاد الخريطة الحرارية تلقائياً. هذا النمط يتسع إلى أي عامل تصفية زمني: ساعة من اليوم أو يوم من الأسبوع أو حالة طقس.
للطبقة المسار التي تصحب عادة خريطة حرارية لطلب التسليم، انظر برنامج Route Optimization API التعليمي. إن وضع مسار تسليم محسّن فوق سطح الطلب يعطي أجهزة الإرسال صورة تشغيلية كاملة في عرض واحد.
نصائح الأداء للمجموعات البيانات الكبيرة
تستخدم طبقة الخريطة الحرارية MapAtlas WebGL وترسم بسرعة، لكن خط أنابيب البيانات الذي يغذيها يمكن أن يصبح اختناقاً بالحجم.
قم بدمج البيانات مسبقاً على الخادم للمجموعات البيانات الضخمة جداً. إذا كان لديك ملايين GPS pings، فلا ترسلها جميعاً إلى المتصفح. شغّل تجميع مكاني من جانب الخادم (شبكة سداسية H3 أو quadtree أو تقريب شبكة بسيط) يقلل مليون نقطة خام إلى 10000 خلية شبكة بحقل count وweight. ستبدو الخريطة الحرارية متطابقة للمستخدم وستحمل في جزء من الوقت.
لبيانات الحيّة (حركة مشاة حقيقية الوقت، وضع طلب حيّة)، استخدم setData بنافذة متدحرجة من النقاط الحديثة بدلاً من تجميع كائن GeoJSON يتزايد باستمرار. حافظ على المصدر بحد أقصى ثابت من عدد النقاط وأبعد السجلات القديمة.
قلل تعقيد خاصية الرسم. كل توقف interpolate إضافي في تعبير الرسم يضيف تكلفة تقييم GPU لكل إطار. بالنسبة للتطبيقات الموجهة للأجهزة المحمولة، بسّط تدرج الألوان إلى ثلاثة أو أربعة توقفات وأسقط قياس نصف القطر/الشدة المرتبط بالتكبير على العروض الأقل أولوية.
التكامل مع React
دوّن الخريطة الحرارية في مكون React يتابع نفس النمط مثل أي خريطة MapAtlas: هيّئ في useEffect، اكشف حالة المنزلق والمرشح عبر useState، وقم بالتنظيف عند إلغاء التثبيت.
في Next.js، استورد هذا المكون بـ dynamic(() => import('./DeliveryHeatmap'), { ssr: false }) لتجنب أخطاء التصيير من جانب الخادم من SDK المقتصر على المتصفح.
ما يجب بناؤه بعد ذلك
الآن لديك خريطة حرارية تفاعلية عاملة بيانات مرجحة وتدرج ألوان مخصص ومنزلق نصف القطر وشدة مرتبطة بالتكبير. فيما يلي أين تأخذها:
- ضع طبقة توجيه فوق الخريطة الحرارية لإظهار مسارات التسليم المخطط لها مقابل سطح الطلب. يمرّ برنامج Route Optimization API التعليمي عبر التنفيذ الكامل.
- أضف رسم متحرك زمني: دورة عبر لقطات ساعية بحلقة
setIntervalتستدعيsetDataعلى المصدر. هذا يحول خريطة كثافة ثابتة إلى فترة زمنية لكيف يتحرك الطلب عبر اليوم. - دمج مع بيانات سعر الممتلكات لإظهار تدرجات الأسعار حسب الحي. يغطي برنامج خريطة العقارات التعليمي أنماط البيانات المرجحة لمنصات العقارات.
- فحص صفحة تسعير MapAtlas لإيجاد الخطة الصحيحة لحركة الإنتاج الخاصة بك.
أنا مراجع SDK كامل وأمثلة إضافية متاحة في docs.mapatlas.xyz.
قراءة ذات صلة:
