מפות חום

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

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

בסרטון הזה מוסבר איך להשתמש במפות חום כחלופה לסמנים, כשהנתונים שלכם דורשים מספר גדול של נקודות על הגרף במפה.

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

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

מפת חום על גבי מפה

הערה: אתם יכולים להגדיר צבעים משלכם למפת החום באמצעות המאפיין gradient. איך מתאימים אישית את הצבעים ומאפיינים אחרים של מפת החום

אם עדיין לא הגדרתם את הספרייה, עליכם לפעול לפי מדריך ההגדרה לפני שתמשיכו לקרוא את שאר הדף הזה.

הוספת מפת חום פשוטה

כדי להוסיף מפת חום למפה, צריך קבוצת נתונים שמכילה את הקואורדינטות של כל מיקום שהתעניינו בו. קודם כל, יוצרים מופע של GMUHeatmapTileLayer ומגדירים את המאפיין map ל-GMSMapView. כדי לוודא שהמפה הבסיסית נטענת לפני שמתחילים לעבוד עם מפת החום, צריך לעשות את זה בפונקציה viewDidLoad() של האפליקציה. אחר כך מעבירים אוסף של אובייקטים מסוג GMUWeightedLatLng למכונה של GMUHeatmapTileLayer.

הכלי מספק את המחלקה GMUHeatmapTileLayer, שמקבלת אוסף של אובייקטים מסוג GMUWeightedLatLng. הוא יוצר את תמונות המשבצות לרמות זום שונות, על סמך אפשרויות הרדיוס, השיפוע והאטימות שסופקו.

פירוט השלבים:

1. יוצרים מופע של GMUHeatmapTileLayer ומגדירים את המאפיין map ל-GMSMapView (עושים את זה בפונקציה viewDidLoad() של האפליקציה).
2. מעבירים אוסף של אובייקטים מסוג GMUWeightedLatLng למכונה של GMUHeatmapTileLayer.
3. מפעילים את GMUHeatmapTileLayer.map ומעבירים את תצוגת המפה.

   Swift

   class Heatmap: UIViewController {
   
     private var mapView: GMSMapView!
     private var heatmapLayer: GMUHeatmapTileLayer!
   
     override func viewDidLoad() {
       super.viewDidLoad()
       heatmapLayer = GMUHeatmapTileLayer()
       heatmapLayer.map = mapView
     }
   
     // ...
   
     func addHeatmap() {
   
       // Get the data: latitude/longitude positions of police stations.
       guard let path = Bundle.main.url(forResource: "police_stations", withExtension: "json") else {
         return
       }
       guard let data = try? Data(contentsOf: path) else {
         return
       }
       guard let json = try? JSONSerialization.jsonObject(with: data, options: []) else {
         return
       }
       guard let object = json as? [[String: Any]] else {
         print("Could not read the JSON.")
         return
       }
   
       var list = [GMUWeightedLatLng]()
       for item in object {
         let lat = item["lat"] as! CLLocationDegrees
         let lng = item["lng"] as! CLLocationDegrees
         let coords = GMUWeightedLatLng(
           coordinate: CLLocationCoordinate2DMake(lat, lng),
           intensity: 1.0
         )
         list.append(coords)
       }
   
       // Add the latlngs to the heatmap layer.
       heatmapLayer.weightedData = list
     }
   }
         

   Objective-C

   @implementation Heatmap {
     GMSMapView *_mapView;
     GMUHeatmapTileLayer *_heatmapLayer;
   }
   
   - (void)viewDidLoad {
     [super viewDidLoad];
     _heatmapLayer = [[GMUHeatmapTileLayer alloc] init];
     _heatmapLayer.map = _mapView;
   }
   
   // ...
   
   - (void) addHeatmap {
   
     // Get the data: latitude/longitude positions of police stations.
     NSURL *path = [NSBundle.mainBundle URLForResource:@"police_stations" withExtension:@"json"];
     NSData *data = [NSData dataWithContentsOfURL:path];
     NSArray *json = [NSJSONSerialization JSONObjectWithData:data options:0 error:nil];
   
     NSMutableArray<GMUWeightedLatLng *> *list = [[NSMutableArray alloc] init];
     [json enumerateObjectsUsingBlock:^(id  _Nonnull obj, NSUInteger idx, BOOL * _Nonnull stop) {
       NSDictionary *item = (NSDictionary *)obj;
       CLLocationDegrees lat = [(NSNumber *) [item valueForKey:@"lat"] doubleValue];
       CLLocationDegrees lng = [(NSNumber *) [item valueForKey:@"lng"] doubleValue];
       GMUWeightedLatLng *coords = [[GMUWeightedLatLng alloc] initWithCoordinate:CLLocationCoordinate2DMake(lat, lng)
                                                                       intensity:1.0];
       [list addObject:coords];
     }];
   
   
     // Add the latlngs to the heatmap layer.
     _heatmapLayer.weightedData = list;
   }
   @end
         

בדוגמה הזו, הנתונים מאוחסנים בקובץ JSON,‏ police_stations.json. הנה קטע מהקובץ:

[
{"lat" : -37.1886, "lng" : 145.708 } ,
{"lat" : -37.8361, "lng" : 144.845 } ,
{"lat" : -38.4034, "lng" : 144.192 } ,
{"lat" : -38.7597, "lng" : 143.67 } ,
{"lat" : -36.9672, "lng" : 141.083 }
]

התאמה אישית של מפת החום

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

אלה האפשרויות הזמינות:

1. רדיוס: גודל הטשטוש הגאוסיאני שמוחל על מפת החום, בפיקסלים. ערך ברירת המחדל הוא 20. הערך צריך להיות בין 10 ל-50. משתמשים ב-GMUHeatmapTileLayer.radius כדי להגדיר את הרדיוס.

2. מעבר צבעים: טווח הצבעים שמשמש ליצירת מפת הצבעים של מפת החום, מהעוצמה הנמוכה ביותר ועד לעוצמה הגבוהה ביותר. כדי ליצור GMUGradient, משתמשים במערך של מספרים שלמים שמכיל את הצבעים, ובמערך של מספרים ממשיים שמציין את נקודת ההתחלה של כל צבע, שניתנת כאחוז מהעוצמה המקסימלית ומבוטאת כשבר מ-0 עד 1. צריך לציין רק צבע אחד למעבר צבעים בצבע יחיד, או לפחות שני צבעים למעבר צבעים בכמה צבעים. מפת הצבעים נוצרת באמצעות אינטרפולציה בין הצבעים האלה. במעבר הצבעים שמוגדר כברירת מחדל יש שני צבעים. הפרמטר colorMapSize מגדיר את מספר השלבים במעבר הצבעים. מספרים גדולים יותר יגרמו למעבר חלק יותר, ומספרים קטנים יותר יגרמו למעברים חדים יותר, בדומה לגרף קווי מתאר. משתמשים ב-GMUHeatmapTileLayer.gradient כדי להגדיר את השיפוע.

3. אטימות: האטימות של כל שכבת מפת החום, בטווח שבין 0 ל-1. ערך ברירת המחדל הוא 0.7. משתמשים ב-GMUHeatmapTileLayer.opacity כדי להגדיר את ערך האטימות.

לדוגמה, יוצרים Gradient:

Swift

let gradientColors: [UIColor] = [.green, .red]
let gradientStartPoints: [NSNumber] = [0.2, 1.0]
heatmapLayer.gradient = GMUGradient(
  colors: gradientColors,
  startPoints: gradientStartPoints,
  colorMapSize: 256
)
      

Objective-C

NSArray<UIColor *> *gradientColors = @[UIColor.greenColor, UIColor.redColor];
NSArray<NSNumber *> *gradientStartPoints = @[@0.2, @1.0];
_heatmapLayer.gradient = [[GMUGradient alloc] initWithColors:gradientColors
                                                 startPoints:gradientStartPoints
                                                colorMapSize:256];
      

כדי לשנות את האטימות של מפת חום קיימת:

Swift

heatmapLayer.opacity = 0.7
      

Objective-C

_heatmapLayer.opacity = 0.7;
      

עדכון אפשרות קיימת

כדי לעדכן אפשרות שכבר הוגדרה:

1. מעדכנים את האפשרות לערך הרצוי.
2. התקשרו אל GMUHeatmapTileLayer.clearTileCache().

שינוי של קבוצת הנתונים

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

1. מעדכנים את איסוף הנתונים. משתמשים ב-GMUHeatmapTileLayer.weightedData ומעבירים מערך של GMUWeightedLatLng.
2. התקשרו אל GMUHeatmapTileLayer.clearTileCache().

הערה: אם רוצים להוסיף נקודות למפת החום או להסיר ממנה נקודות, קודם צריך לעדכן את אוסף הנתונים ואז להשתמש ב-GMUHeatmapTileLayer.weightedData.

הסרה של מפת חום

כדי להסיר מפת חום, מפעילים את GMUHeatmapTileLayer.map ומעבירים את nil.

Swift

heatmapLayer.map = nil
      

Objective-C

_heatmapLayer.map = nil;
      

לצפייה באפליקציית ההדגמה

דוגמה נוספת להטמעה של מפת חום מופיעה בקובץ HeatmapViewController באפליקציית ההדגמה שמגיעה עם ספריית הכלים. במדריך ההגדרה מוסבר איך להפעיל את אפליקציית ההדגמה.