- סקירה כללית
- טעינה של ספריית הרכיבים החזותיים
- הוספת נקודות שקלול של נתונים
- התאמה אישית של שכבה במפת חום
שכבת מפת החום מספקת רינדור של מפות חום בצד הלקוח.
סקירה
מפת חום היא המחשה חזותית של עוצמת הנתונים בנקודות גיאוגרפיות. כשהאפשרות Heatmap Layer מופעלת, שכבת-על צבעונית מופיעה מעל המפה. כברירת מחדל, אזורים בעוצמה גבוהה יותר יהיו בצבע אדום, ואזורים בעוצמה נמוכה יותר יופיעו בירוק.
טעינה של ספריית הוויזואליזציה
שכבת מפת החום היא חלק מהספרייה google.maps.visualization
ולא נטענת כברירת מחדל. מחלקות הוויזואליזציה הם ספרייה בפני עצמה, בנפרד מהקוד הראשי של JavaScript API של מפות Google. כדי להשתמש בפונקציונליות שכלולה בספרייה הזו, קודם צריך לטעון אותה באמצעות הפרמטר libraries
בכתובת ה-URL של bootrap API של JavaScript במפות Google:
<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
, מוסיפים אותו למפה על ידי קריאה ל-method 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
: מציינת אם מפות החום מתפוגגות בשינוי מרחק התצוגה. אם ערך הפיזור הוא False, רדיוס ההשפעה גדל עם רמת הזום כדי להבטיח שעוצמת הצבע תישמר בכל מיקום גיאוגרפי נתון. ברירת המחדל היא True.gradient
: שיפוע הצבעים של מפת החום, שצוין כמערך מחרוזות צבעים של CSS. כל צבעי CSS3 – כולל RGBA – נתמכים למעט צבעים בעלי שם מורחבים וערכי HSL(A).maxIntensity
: העוצמה המקסימלית של מפת החום. כברירת מחדל, הגודל של צבעי מפת החום מותאם באופן דינמי לריכוז הגבוה ביותר של נקודות בפיקסל מסוים במפה. המאפיין הזה מאפשר לציין ערך מקסימלי קבוע. הגדרת העוצמה המקסימלית יכולה לעזור כשמערך הנתונים מכיל כמה חריגים בעוצמה גבוהה במיוחד.radius
: רדיוס ההשפעה של כל נקודה על הגרף, בפיקסלים.opacity
: האטימות של מפת החום, מבוטאת כמספר בין 0 ל-1.
בדוגמה הבאה מוצגות כמה מאפשרויות ההתאמה האישית הזמינות.