מפות חום

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

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

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

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

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

מפת חום במפה

הערה: אפשר להגדיר צבעים משלכם למפת החום באמצעות gradient לנכס. ראה כיצד להתאים אישית צבעים ומאפיינים אחרים של במפת החום שלכם.

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

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

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

הסרה של מפת חום

כדי להסיר מפת חום, צריך להפעיל את הפקודה GMUHeatmapTileLayer.map ולהעביר את nil.

Swift

heatmapLayer.map = nil
      

Objective-C

_heatmapLayer.map = nil;
      

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

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