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

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

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

نظرة عامة

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

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

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

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

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