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

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