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

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

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