מפות חום

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

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