מפות חום

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

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