שכבת מפת חום

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

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

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

סקירה כללית

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

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

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

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

להצגת דוגמה