خرائط التمثيل اللوني

تصف هذه الصفحة الأداة المساعدة لخريطة التمثيل اللوني المتوفرة في مكتبة الأدوات المساعدة لحزمة تطوير البرامج (SDK) للخرائط في نظام التشغيل 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:

let gradientColors: [UIColor] = [.green, .red]
let gradientStartPoints: [NSNumber] = [0.2, 1.0]
heatmapLayer.gradient = GMUGradient(
  colors: gradientColors,
  startPoints: gradientStartPoints,
  colorMapSize: 256
)
      

NSArray<UIColor *> *gradientColors = @[UIColor.greenColor, UIColor.redColor];
NSArray<NSNumber *> *gradientStartPoints = @[@0.2, @1.0];
_heatmapLayer.gradient = [[GMUGradient alloc] initWithColors:gradientColors
                                                 startPoints:gradientStartPoints
                                                colorMapSize:256];
      

لتغيير تعتيم خريطة التمثيل اللوني الحالية:

heatmapLayer.opacity = 0.7
      

_heatmapLayer.opacity = 0.7;
      

تعديل خيار حالي

لتحديث خيار تم تعيينه من قبل، يُرجى اتباع الخطوات التالية:

1. عدِّل الخيار إلى القيمة المطلوبة.
2. تواصل هاتفيًا مع "GMUHeatmapTileLayer.clearTileCache()".

تغيير مجموعة البيانات

لتغيير مجموعة البيانات التي سيتم إنشاء خريطة التمثيل اللوني عليها:

1. حدِّث جمع البيانات. استخدِم GMUHeatmapTileLayer.weightedData مع تمرير مجموعة من GMUWeightedLatLng.
2. تواصل هاتفيًا مع "GMUHeatmapTileLayer.clearTileCache()".

إزالة خريطة التمثيل اللوني

لإزالة خريطة التمثيل اللوني، عليك الاتصال بالرقم GMUHeatmapTileLayer.map، مع اجتياز nil.

heatmapLayer.map = nil
      

_heatmapLayer.map = nil;
      

الاطّلاع على التطبيق التجريبي

للاطّلاع على مثال آخر حول تنفيذ خريطة التمثيل اللوني، يُرجى إلقاء نظرة على HeatmapViewController في التطبيق التجريبي الذي يتضمّن مكتبة الأدوات. يوضّح لك دليل الإعداد كيفية تشغيل التطبيق التجريبي.