מפות חום

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

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

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

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

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

מפה עם מפת חום שמראה את המיקום של תחנות משטרה
מפת חום על גבי מפה

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

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

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

Swift

heatmapLayer.map = nil

Objective-C

_heatmapLayer.map = nil;

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

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