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

اختيار النظام الأساسي: Android iOS JavaScript

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

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

نظرة عامة

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

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

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

<script async
    src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&loading=async&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 واحد بوزن 1000 أسرع من عرض 1000 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: لتحديد ما إذا كانت خرائط الحرارة تتلاشى عند التكبير. عندما يكون التبدّد غير صحيح، يزداد نصف قطر تأثير اللون مع مستوى التكبير للحفاظ على كثافة اللون في أي موقع جغرافي معيّن. الإعداد التلقائي هو true.
• gradient: تدرج الألوان في خريطة الحرارة، ويتم تحديده كصفيف من سلاسل ألوان CSS. يمكن استخدام جميع ألوان CSS3 ، بما في ذلك RGBA، باستثناء الألوان المُسمّاة الموسّعة وقيم HSL(A).
• maxIntensity: الحد الأقصى لكثافة الخريطة الحرارية يتمّ بشكلٍ تلقائي تغيير حجم ألوان خريطة التمثيل اللوني ديناميكيًا وفقًا لأكبر تركيز للنقاط في أيّ بكسل معيّن على الخريطة. تتيح لك هذه السمة تحديد حدّ أقصى ثابت. يمكن أن يكون ضبط الحد الأقصى للكثافة مفيدًا عندما تحتوي مجموعة البيانات على بعض القيم الشاذة ذات الكثافة العالية بشكل غير معتاد.
• radius: نصف قطر تأثير كل نقطة بيانات، بالبكسل
• opacity: شفافية خريطة الحرارة، يتم التعبير عنها كعدد بين 0 و1.

يعرض المثال أدناه بعض خيارات التخصيص المتاحة.

عرض مثال