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

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

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