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

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

تصف هذه الصفحة أداة خريطة التمثيل اللوني المتوفرة في مكتبة المرافق لحزمة تطوير البرامج (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:

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.map واجتياز nil.

Swift

heatmapLayer.map = nil

Objective-C

_heatmapLayer.map = nil;

الاطّلاع على التطبيق التجريبي

للحصول على مثال آخر لتنفيذ خريطة التمثيل اللوني، يمكنك الاطّلاع على HeatmapViewController في التطبيق التجريبي المتوفّر مع مكتبة المرافق. يوضح لك دليل الإعداد كيفية تشغيل التطبيق التجريبي.