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

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