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

اختيار النظام الأساسي: Android iOS

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