توفر طبقة خريطة التمثيل اللوني عرضًا من جهة العميل لخرائط التمثيل اللوني.
نظرة عامة
خريطة التمثيل اللوني هي تصور يستخدم لتصوير كثافة البيانات في النقاط الجغرافية. عند تفعيل "طبقة خريطة التمثيل اللوني"، سيظهر تراكب ملوّن أعلى الخريطة. بشكل افتراضي، سيتم تلوين المناطق ذات الكثافة الأعلى باللون الأحمر، وستظهر المناطق الأقل كثافة باللون الأخضر.
تحميل مكتبة العروض المرئية
تشكّل طبقة خريطة التمثيل اللوني جزءًا من مكتبة 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.
يوضح المثال التالي بعض خيارات التخصيص المتاحة.