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

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

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

نظرة عامة

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

تحميل مكتبة التمثيل البصري

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

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

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

عرض مثال