שכבת מפת חום

בחירת פלטפורמה: Android iOS JavaScript

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

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

סקירה כללית

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

טעינת ספריית התצוגה החזותית

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

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

להצגת דוגמה