בדף הזה מתוארת הכלי של מפת החום שזמינה בספריית הכלים של מפות Google ל-iOS. בעזרת מפות חום אפשר לייצג את ההתפלגות והצפיפות של נקודות נתונים במפה.
בסרטון הזה מוסבר על השימוש במפות חום כחלופה לסמנים, במקרים שבהם נדרש מספר גדול של נקודות נתונים במפה.
מפות חום עוזרות לצופים להבין את ההתפלגות והעוצמה היחסית של נקודות הנתונים במפה. במקום להציב סמן בכל מיקום, במפות חום נעשה שימוש בצבע כדי לייצג את התפלגות הנתונים.
בדוגמה הבאה, אדום מייצג אזורים עם ריכוז גבוה של תחנות משטרה בוויקטוריה שבאוסטרליה.
אם עדיין לא הגדרתם את הספרייה, פעלו לפי מדריך ההגדרה לפני שתקראו את שאר המידע בדף הזה.
הוספת מפת חום פשוטה
כדי להוסיף מפת חום למפה, צריך מערך נתונים שמכיל את הקואורדינטות של כל מיקום רצוי. קודם כול יוצרים מכונת GMUHeatmapTileLayer
ומגדירים את הנכס map
כ-GMSMapView
.
צריך לעשות זאת בפונקציה viewDidLoad()
של האפליקציה, כדי לוודא שהמפה הבסיסית נטענת לפני העבודה עם מפת החום. לאחר מכן מעבירים אוסף של אובייקטים מסוג GMUWeightedLatLng
למכונה GMUHeatmapTileLayer
.
כלי העזר מספק את המחלקה GMUHeatmapTileLayer
, שמקבלת אוסף של GMUWeightedLatLng
אובייקטים. היא יוצרת תמונות משבצות לרמות שונות של מרחק התצוגה, על סמך אפשרויות הרדיוס, ההדרגתיות והאטימות שלהן.
סקירה מפורטת יותר של השלבים:
- יוצרים מופע של
GMUHeatmapTileLayer
ומגדירים את הנכסmap
כ-GMSMapView
(צריך לעשות זאת בפונקציהviewDidLoad()
של האפליקציה). - מעבירים אוסף של אובייקטים מסוג
GMUWeightedLatLng
למכונהGMUHeatmapTileLayer
. - התקשר אל
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
בפעם הראשונה, או בכל שלב על ידי הגדרת ערך חדש לאפשרות.
אלו האפשרויות הזמינות:
רדיוס: גודל הטשטוש הגאוסיאני שהוחל על מפת החום, מבוטא בפיקסלים. ערך ברירת המחדל הוא 20. מספר הפגישות ליום צריך להיות בין 10 ל-50. משתמשים בפונקציה
GMUHeatmapTileLayer.radius
על מנת להגדיר את הרדיוס.הצבע: מגוון צבעים שבהם מפת החום משתמשת כדי ליצור את מפת הצבעים, מהעוצמה הנמוכה ביותר ועד הגבוהה ביותר.
GMUGradient
נוצר באמצעות מערך של מספרים שלם שמכיל את הצבעים, ומערך צף שמציין את נקודת ההתחלה של כל צבע, מוצג כאחוז מהעוצמה המקסימלית ומבוטא כשבר בין 0 ל-1. עליך לציין רק צבע אחד להדרגתיות בצבע אחד, או לפחות שני צבעים להדרגתיות צבעונית. מפת הצבעים נוצרת באמצעות אינטרפולציה בין הצבעים האלה. כברירת מחדל למעבר ההדרגתיות יש שני צבעים. הפרמטרcolorMapSize
מגדיר את מספר השלבים בהדרגה. מספרים גדולים יותר יובילו להדרגתיות חלקה יותר, בעוד שמספרים קטנים יותר ייצרו מעברים חדים יותר, בדומה לתרשים קווי מתאר. משתמשים ב-GMUHeatmapTileLayer.gradient
כדי להגדיר את ההדרגתיות.אטימות: זוהי האטימות של כל שכבת מפת החום, והיא נעה בין 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;
עדכון אפשרות קיימת
כדי לעדכן אפשרות שכבר הוגדרה, מבצעים את השלבים הבאים:
- מעדכנים את האפשרות לערך הרצוי.
- התקשרו אל
GMUHeatmapTileLayer.clearTileCache()
.
שינוי מערך הנתונים
כדי לשנות את מערך הנתונים שעליו מתבססת מפת חום:
- מעדכנים את איסוף הנתונים. משתמשים ב-
GMUHeatmapTileLayer.weightedData
ומעבירים מערך שלGMUWeightedLatLng
. - התקשרו אל
GMUHeatmapTileLayer.clearTileCache()
.
הסרת מפת חום
כדי להסיר מפת חום, צריך להתקשר למספר GMUHeatmapTileLayer.map
ולהעביר אותו לכתובת nil
.
Swift
heatmapLayer.map = nil
Objective-C
_heatmapLayer.map = nil;
הצגת אפליקציית ההדגמה
דוגמה נוספת להטמעה של מפת חום תוכלו לראות את השדה HeatmapViewController
באפליקציית ההדגמה, שכוללת את ספריית הכלים.
במדריך ההגדרה מוסבר איך להפעיל את אפליקציית ההדגמה.