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

1. نظرة عامّة
2. تحميل مكتبة العروض المرئية
3. إضافة نقاط بيانات مُرجّحة
4. تخصيص طبقة خريطة التمثيل اللوني

توفر طبقة خريطة التمثيل اللوني عرضًا من جانب العميل لخرائط التمثيل اللوني.

نظرة عامة

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

تحميل مكتبة العروض المرئية

تُعدّ طبقة خريطة التمثيل اللوني جزءًا من مكتبة google.maps.visualization ولا يتم تحميلها تلقائيًا. تُعد فئات التصور مكتبة مستقلة، منفصلة عن كود API الرئيسي لـ JavaScript للخرائط. لاستخدام الوظيفة الواردة في هذه المكتبة، يجب أولاً تحميلها باستخدام المعلمة libraries في عنوان URL للتشغيل في واجهة برمجة تطبيقات JavaScript لـ "خرائط Google":

<script async
    src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&libraries=visualization&callback=initMap">
</script>

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

لإضافة طبقة خريطة تمثيل لوني، يجب أولاً إنشاء كائن HeatmapLayer جديد وتوفير بعض البيانات الجغرافية له على شكل مصفوفة أو كائن MVCArray[]. قد تكون البيانات إما كائن LatLng أو كائن WeightedLocation. بعد إنشاء مثيل للكائن HeatmapLayer، يمكنك إضافته إلى الخريطة عن طريق استدعاء طريقة setMap().

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

/* Data points defined as an array of LatLng objects */
var heatmapData = [
  new google.maps.LatLng(37.782, -122.447),
  new google.maps.LatLng(37.782, -122.445),
  new google.maps.LatLng(37.782, -122.443),
  new google.maps.LatLng(37.782, -122.441),
  new google.maps.LatLng(37.782, -122.439),
  new google.maps.LatLng(37.782, -122.437),
  new google.maps.LatLng(37.782, -122.435),
  new google.maps.LatLng(37.785, -122.447),
  new google.maps.LatLng(37.785, -122.445),
  new google.maps.LatLng(37.785, -122.443),
  new google.maps.LatLng(37.785, -122.441),
  new google.maps.LatLng(37.785, -122.439),
  new google.maps.LatLng(37.785, -122.437),
  new google.maps.LatLng(37.785, -122.435)
];

var sanFrancisco = new google.maps.LatLng(37.774546, -122.433523);

map = new google.maps.Map(document.getElementById('map'), {
  center: sanFrancisco,
  zoom: 13,
  mapTypeId: 'satellite'
});

var heatmap = new google.maps.visualization.HeatmapLayer({
  data: heatmapData
});
heatmap.setMap(map);

إضافة نقاط بيانات مُرجحة

يمكن لخريطة التمثيل اللوني عرض عناصر LatLng أو WeightedLocation أو مزيج من الاثنين. ويمثل كلا الكائنين نقطة بيانات واحدة على الخريطة، ولكن يتيح لك كائن WeightedLocation تحديد وزن لنقطة البيانات هذه بالإضافة إلى ذلك. وسيؤدي تطبيق قيمة وزن على نقطة بيانات إلى عرض WeightedLocation بدرجة كثافة أكبر من كائن LatLng بسيط. الوزن هو مقياس خطي، يكون لكل كائن LatLng وزن ضمني يبلغ 1، وتؤدي إضافة WeightedLocation واحد من {location: new google.maps.LatLng(37.782, -122.441), weight: 3} إلى التأثير نفسه الناتج عن إضافة google.maps.LatLng(37.782, -122.441) ثلاث مرات. يمكنك الجمع بين عناصر weightedLocation وLatLng في مصفوفة واحدة.

يمكن الاستفادة من استخدام كائن WeightedLocation بدلاً من LatLng في الحالات التالية:

• إضافة كميات كبيرة من البيانات في مكان واحد. إنّ عرض عنصر WeightedLocation واحد وزنه 1,000 سيكون أسرع من عرض 1,000 عنصر LatLng.
• تطبيق التوكيد على بياناتك بناءً على القيم العشوائية. على سبيل المثال، يمكنك استخدام الكائنات LatLng عند التخطيط لبيانات الزلازل، ولكنك قد تحتاج إلى استخدام WeightedLocation لقياس قوة كل زلزال على مقياس الأثرياء.

/* Data points defined as a mixture of WeightedLocation and LatLng objects */
var heatMapData = [
  {location: new google.maps.LatLng(37.782, -122.447), weight: 0.5},
  new google.maps.LatLng(37.782, -122.445),
  {location: new google.maps.LatLng(37.782, -122.443), weight: 2},
  {location: new google.maps.LatLng(37.782, -122.441), weight: 3},
  {location: new google.maps.LatLng(37.782, -122.439), weight: 2},
  new google.maps.LatLng(37.782, -122.437),
  {location: new google.maps.LatLng(37.782, -122.435), weight: 0.5},

  {location: new google.maps.LatLng(37.785, -122.447), weight: 3},
  {location: new google.maps.LatLng(37.785, -122.445), weight: 2},
  new google.maps.LatLng(37.785, -122.443),
  {location: new google.maps.LatLng(37.785, -122.441), weight: 0.5},
  new google.maps.LatLng(37.785, -122.439),
  {location: new google.maps.LatLng(37.785, -122.437), weight: 2},
  {location: new google.maps.LatLng(37.785, -122.435), weight: 3}
];

var sanFrancisco = new google.maps.LatLng(37.774546, -122.433523);

map = new google.maps.Map(document.getElementById('map'), {
  center: sanFrancisco,
  zoom: 13,
  mapTypeId: 'satellite'
});

var heatmap = new google.maps.visualization.HeatmapLayer({
  data: heatMapData
});
heatmap.setMap(map);

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

يمكنك تخصيص طريقة عرض خريطة التمثيل اللوني باستخدام خيارات خريطة التمثيل اللوني التالية. اطّلِع على مستندات HeatmapLayerOptions لمزيد من المعلومات.

• dissipating: لتحديد ما إذا كانت خرائط التمثيل اللوني تتلاشى عند التكبير أو التصغير. عندما يكون التشتت خطأ، يزداد نصف قطر التأثير مع زيادة مستوى التكبير/التصغير لضمان الحفاظ على كثافة اللون في أي موقع جغرافي محدد. وتكون الإعدادات التلقائية على "صحيح".
• gradient: تدرج اللون لخريطة التمثيل اللوني، والمحدد كمصفوفة من سلاسل ألوان CSS. ويمكن استخدام جميع ألوان CSS3، بما في ذلك RGBA، باستثناء قيم Exended المسماة وHSL(A).
• maxIntensity: الحد الأقصى لكثافة خريطة التمثيل اللوني بشكل افتراضي، يتم تحديد ألوان خريطة التمثيل اللوني ديناميكيًا وفقًا لأكبر تركيز للنقاط في أي بكسل معين على الخريطة. تتيح لك هذه السمة تحديد حد أقصى ثابت يمكن أن يكون تحديد الحد الأقصى للكثافة مفيدًا عندما تحتوي مجموعة البيانات الخاصة بك على عدد قليل من القيم الاستثنائية ذات كثافة عالية بشكل غير عادي.
• radius: نصف قطر التأثير لكل نقطة بيانات، بالبكسل.
• opacity: تعتيم خريطة التمثيل اللوني، ويتم التعبير عنه برقم يتراوح بين 0 و1.

يوضح المثال التالي بعض خيارات التخصيص المتاحة.

الاطّلاع على مثال