שכבת מפת חום

בחירת פלטפורמה: Android iOS JavaScript
  1. סקירה כללית
  2. טעינת ספריית הוויזואליזציה
  3. הוספה של נקודות נתונים משוקללות
  4. התאמה אישית של שכבת מפת חום

שכבת מפת החום מספקת עיבוד של מפות חום בצד הלקוח.

סקירה כללית

מפת חום היא תצוגה חזותית שמשמשת לתיאור עוצמת הנתונים בנקודות גיאוגרפיות. כשמפעילים את שכבת מפת החום, שכבת על צבעונית מופיעה מעל המפה. כברירת מחדל, אזורים בעוצמה גבוהה יותר יהיו בצבע אדום, ואזורים בעוצמה נמוכה יותר יהיו בצבע ירוק.

טעינת ספריית הוויזואליזציה

שכבת מפת החום היא חלק מהספרייה google.maps.visualization, והיא לא נטענת כברירת מחדל. מחלקות הוויזואליזציה הן ספרייה עצמאית, נפרדת מקוד ה-API הראשי של JavaScript במפות Google. כדי להשתמש בפונקציונליות של הספרייה הזו, צריך קודם לטעון אותה באמצעות הפרמטר libraries בכתובת ה-URL של bootstrap של Maps JavaScript API:

<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: מציין אם מפות הצפיפות מתפזרות בזום. אם הערך של המאפיין dissipating הוא false, רדיוס ההשפעה גדל עם רמת הזום כדי להבטיח שעוצמת הצבע תישמר בכל מיקום גיאוגרפי. ברירת המחדל היא True.
  • ‫gradient: מדרג הצבעים של מפת החום, שמוגדר כמערך של מחרוזות צבע ב-CSS. יש תמיכה בכל הצבעים ב-CSS3, כולל RGBA, למעט צבעים עם שמות מורחבים וערכי HSL(A).
  • ‫maxIntensity: העוצמה המקסימלית של מפת החום. כברירת מחדל, הצבעים במפת החום מותאמים באופן דינמי בהתאם לריכוז הגבוה ביותר של הנקודות בכל פיקסל מסוים במפה. המאפיין הזה מאפשר לכם לציין ערך מקסימלי קבוע. הגדרת עוצמה מקסימלית יכולה לעזור אם מערך הנתונים מכיל כמה ערכים חריגים עם עוצמה גבוהה באופן חריג.
  • ‫radius: רדיוס ההשפעה של כל נקודת נתונים, בפיקסלים.
  • ‫opacity: רמת השקיפות של מפת החום, שמוצגת כמספר בין 0 ל-1.

בדוגמה שלמטה מוצגות חלק מאפשרויות ההתאמה האישית שזמינות.

לצפייה בדוגמה