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

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

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

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

نظرة عامة

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

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

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

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

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

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