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

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

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

نظرة عامة

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

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

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

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

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

عرض مثال