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