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

توضّح هذه الصفحة أداة الخريطة الحرارية المتوفّرة في مكتبة برامج الخدمات الخاصة بحزمة تطوير البرامج بالاستناد إلى بيانات "خرائط 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:

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 في التطبيق التجريبي الذي يتم شحنه مع مكتبة الأدوات المساعدة. يوضّح لك دليل الإعداد كيفية تشغيل التطبيق التجريبي.