إضافة طبقة خريطة تمثيل لوني إلى خريطة

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

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

يمكنك استخدام خرائط التمثيل اللوني في العديد من السيناريوهات المختلفة، بما في ذلك:

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

إضافة طبقة خريطة حرارية

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

في التعليمات البرمجية التالية، كل نقطة تمثيل لوني لها نصف قطرها 10 بكسل على جميع مستويات التكبير/التصغير. لضمان تجربة مستخدم أفضل، تكون خريطة التمثيل اللوني أسفل طبقة التسمية. تظل التسميات مرئية بوضوح. البيانات الواردة في هذه العينة مأخوذة من برنامج USGS Earthquake Hazards. إنه مخصص للزلازل الكبيرة التي حدثت في آخر 30 يوماً.

//Create a data source and add it to the map.
var datasource = new atlas.source.DataSource();
map.sources.add(datasource);

//Load a dataset of points, in this case earthquake data from the USGS.
datasource.importDataFromUrl('https://earthquake.usgs.gov/earthquakes/feed/v1.0/summary/all_week.geojson');

//Create a heat map and add it to the map.
map.layers.add(new atlas.layer.HeatMapLayer(datasource, null, {
  radius: 10,
  opacity: 0.8
}), 'labels');

يوضح نموذج Simple Heat Map Layer كيفية إنشاء خريطة حرارية بسيطة من مجموعة بيانات من ميزات النقطة. للحصول على التعليمات البرمجية المصدر لهذا النموذج، راجع التعليمات البرمجية المصدر لطبقة خريطة التمثيل اللوني البسيطة.

تخصيص طبقة خريطة التمثيل اللوني

قام المثال السابق بتخصيص خريطة التمثيل اللوني عن طريق تعيين خيارات نصف القطر والتعتيم. توفر طبقة خريطة التمثيل اللوني عدة خيارات للتخصيص، بما في ذلك:

• radius: يحدد نصف قطر البكسل لعرض جميع نقاط البيانات. يمكنك تعيين نصف القطر كرقم ثابت أو كتعبير. باستخدام تعبير، يمكنك قياس نصف القطر استناداً إلى مستوى التكبير/التصغير، وتمثيل منطقة مكانية متناسقة على الخريطة (على سبيل المثال، نصف قطر 5 أميال).

• color: يحدد كيفية تلوين خريطة التمثيل اللوني. تدرج اللون هو سمة شائعة من خرائط التمثيل اللوني. يمكنك تحقيق التأثير باستخدام تعبير interpolate. يمكنك أيضاً استخدام تعبير step لتلوين خريطة التمثيل اللوني، وتقسيم الكثافة بصرياً إلى نطاقات تشبه مخطط نمط محيط أو نسيجي. تحدد لوحات الألوان هذه الألوان من الحد الأدنى إلى قيمة الكثافة القصوى.

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

  فيما يلي أمثلة لتعبيرات الألوان:

  تعبير لون الاستنتاج	تعبير اللون المتدرج
  [     'interpolate',     ['linear'],     ['heatmap-density'],     0, 'transparent',     0.01, 'purple',     0.5, '#fb00fb',     1, '#00c3ff' ]	[     'step',     ['heatmap-density'],     'transparent',     0.01, 'navy',     0.25, 'green',     0.50, 'yellow',     0.75, 'red' ]

• opacity: يحدد مدى تعتيم أو شفافية طبقة خريطة التمثيل اللوني.

• intensity: يطبق مُضاعِفاً على وزن كل نقطة بيانات لزيادة الكثافة الإجمالية لخريطة التمثيل اللوني. فهو يسبب فرقاً في وزن نقاط البيانات، ما يسهل تصوره.

• weight: بشكلٍ افتراضي، يكون وزن جميع نقاط البيانات 1، ويتم ترجيحها بالتساوي. يعمل خيار الوزن كمُضاعِف، ويمكنك تعيينه كرقم أو تعبير. إذا تم تعيين رقم على أنه الوزن، فإنه يعادل وضع كل نقطة بيانات على الخريطة مرتين. على سبيل المثال، إذا كان الوزن هو 2، فستتضاعف الكثافة. يؤدي تعيين خيار الوزن إلى رقم إلى عرض خريطة التمثيل اللوني بطريقة مماثلة لاستخدام خيار الكثافة.

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

• source وsource-layer: تُمكّنك من تحديث مصدر البيانات.

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

خريطة التمثيل اللوني المتسقة القابلة للتكبير

بشكل افتراضي، يحتوي radii لنقاط البيانات المعروضة في طبقة خريطة التمثيل اللوني على نصف قطر بكسل ثابت لجميع مستويات التكبير. أثناء تكبير الخريطة، تجمع البيانات معاً وتبدو طبقة خريطة التمثيل اللوني مُختلفة.

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

يؤدي تحجيم نصف القطر، بحيث يتضاعف مع كل مستوى تكبير، إلى إنشاء خريطة حرارية تبدو متسقة على جميع مستويات التكبير. لتطبيق هذا القياس، استخدم zoom مع تعبير أساسي 2 exponential interpolation، مع تعيين نصف قطر البكسل لأدنى مستوى تكبير ونصف قطر محسوب لأقصى مستوى تكبير محسوب كـ 2 * Math.pow(2, minZoom - maxZoom) كما هو موضح في النموذج التالي. قم بتكبير الخريطة لمعرفة كيفية تحجيم خريطة التمثيل اللوني مع مستوى التكبير/التصغير.

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

لا يمكن استخدام التعبير zoom إلا في التعبيرات step وinterpolate. يمكن استخدام التعبير التالي لتقريب نصف قطر بالأمتار. يستخدم هذا التعبير عنصر نائب radiusMeters، والذي يجب استبداله نصف القطر المطلوب. يحسب هذا التعبير نصف قطر البكسل التقريبي لمستوى التكبير/التصغير في خط الاستواء لمستويات التكبير/التصغير 0 و24، ويستخدم تعبيراً exponential interpolation للتحجيم بين هذه القيم بنفس الطريقة التي يعمل بها نظام التجانب في الخريطة.

[
    'interpolate',
    ['exponential', 2],
    ['zoom'],
    0, ['*', radiusMeters, 0.000012776039596366526],
    24, ['*', radiusMeters, 214.34637593279402]
]

var layer = new atlas.layer.HeatMapLayer(datasource, null, {
   weight: ['get', 'point_count']
});

الخطوات التالية

تعرّف على المزيد حول الفئات والأساليب المُستخدمة في هذه المقالة:

لمزيدٍ من أمثلة التعليمات البرمجية لإضافتها إلى الخرائط، راجع المقالات التالية: