שכבת מפת חום

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

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

סקירה כללית

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

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

שכבת מפת החום היא חלק מהספרייה google.maps.visualization, והיא לא נטענת כברירת מחדל. הכיתות של התצוגה החזותית הן ספרייה עצמאית, נפרדת מהקוד הראשי של Maps JavaScript API. כדי להשתמש בפונקציונליות שמכילה הספרייה הזו, צריך קודם לטעון אותה באמצעות הפרמטר 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.

בדוגמה הבאה מוצגות כמה מאפשרויות ההתאמה האישית הזמינות.

להצגת דוגמה