توفر طبقة خريطة التمثيل اللوني عرضًا من جانب العميل لخرائط التمثيل اللوني.
نظرة عامة
خريطة التمثيل اللوني هي مؤثر عرض مرئي يُستخدَم لتصوير كثافة البيانات في النقاط الجغرافية. عند تمكين طبقة خريطة التمثيل اللوني، سيظهر تراكب ملون أعلى الخريطة. بشكل افتراضي، يتم تلوين المناطق ذات الكثافة الأعلى باللون الأحمر، وتظهر المناطق ذات الكثافة الأقل باللون الأخضر.
تحميل مكتبة العروض المرئية
تُعدّ طبقة خريطة التمثيل اللوني جزءًا من مكتبة google.maps.visualization
ولا يتم تحميلها تلقائيًا. تُعد فئات التصور مكتبة مستقلة،
منفصلة عن كود API الرئيسي لـ JavaScript للخرائط. لاستخدام الوظيفة
الواردة في هذه المكتبة، يجب أولاً تحميلها باستخدام المعلمة libraries
في عنوان URL للتشغيل في واجهة برمجة تطبيقات JavaScript لـ "خرائط Google":
<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
واحد وزنه 1,000 سيكون أسرع من عرض 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، باستثناء قيم Exended المسماة وHSL(A).maxIntensity
: الحد الأقصى لكثافة خريطة التمثيل اللوني بشكل افتراضي، يتم تحديد ألوان خريطة التمثيل اللوني ديناميكيًا وفقًا لأكبر تركيز للنقاط في أي بكسل معين على الخريطة. تتيح لك هذه السمة تحديد حد أقصى ثابت يمكن أن يكون تحديد الحد الأقصى للكثافة مفيدًا عندما تحتوي مجموعة البيانات الخاصة بك على عدد قليل من القيم الاستثنائية ذات كثافة عالية بشكل غير عادي.radius
: نصف قطر التأثير لكل نقطة بيانات، بالبكسل.opacity
: تعتيم خريطة التمثيل اللوني، ويتم التعبير عنه برقم يتراوح بين 0 و1.
يوضح المثال التالي بعض خيارات التخصيص المتاحة.