שכבת מפת חום

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

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

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

סקירה

מפת חום היא המחשה חזותית של עוצמת הנתונים בנקודות גיאוגרפיות. כשהאפשרות 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.

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

להצגת דוגמה