מפות חום

בחירת פלטפורמה: 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 באפליקציית ההדגמה (דמו) ששולחת את ספריית התשתיות. במדריך ההגדרה מוסבר איך להריץ את אפליקציית ההדגמה.