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

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