توضّح هذه الصفحة الأداة المساعدة الخاصة بخريطة التمثيل اللوني المتوفّرة في مكتبة الخدمات لحزمة تطوير البرامج (SDK) في "خرائط Google" لنظام التشغيل iOS. تُعدّ خرائط التمثيل اللوني مفيدة لتمثيل توزيع وكثافة نقاط البيانات على الخريطة.
يناقش هذا الفيديو استخدام خرائط التمثيل اللون بديلاً عن العلامات، عندما تتطلب بياناتك عددًا كبيرًا من نقاط البيانات على الخريطة.
يسهّل تطبيق خريطة التمثيل اللوني على المشاهدين فهم توزيع نقاط البيانات وكثافتها النسبية على الخريطة. بدلاً من وضع علامة على كل موقع، تستخدم خرائط الحرارة اللون لتمثيل توزيع البيانات.
في المثال أدناه، يمثّل اللون الأحمر مناطق مركزية مرتفعة لمراكز الشرطة في فيكتوريا، أستراليا.

إذا لم يسبق لك إعداد المكتبة، اتّبِع دليل الإعداد قبل قراءة بقية هذه الصفحة.
إضافة خريطة تمثيل لونية بسيطة
لإضافة خريطة التمثيل اللوني إلى خريطتك، ستحتاج إلى مجموعة بيانات تتألف من إحداثيات كل موقع جغرافي مهم. أولاً، أنشئ مثيل GMUHeatmapTileLayer
، مع ضبط السمة map
على GMSMapView
.
يمكنك إجراء ذلك في وظيفة viewDidLoad()
لتطبيقك، لضمان تحميل الخريطة الأساسية قبل العمل مع خريطة التمثيل اللوني. بعد ذلك، مرِّر مجموعة من
عناصر GMUWeightedLatLng
إلى المثيل GMUHeatmapTileLayer
.
تعمل الأداة على توفير فئة GMUHeatmapTileLayer
التي تقبل مجموعة من العناصر GMUWeightedLatLng
. ويؤدي هذا إلى إنشاء صور مقسّمة لمستويات تكبير/تصغير مختلفة، استنادًا إلى خيارات النطاق الجغرافي والتدرج والتعتيم المتاحة.
في ما يلي شرح مفصّل للخطوات التالية:
- أنشئ مثيل
GMUHeatmapTileLayer
، مع ضبط السمةmap
علىGMSMapView
(نفِّذ ذلك في وظيفةviewDidLoad()
لتطبيقك). - تمرير مجموعة من الكائنات
GMUWeightedLatLng
إلى المثيلGMUHeatmapTileLayer
. - الاتصال بـ
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
في البداية، أو في أي وقت عن طريق
إعداد قيمة جديدة للخيار.
تتوفّر الخيارات التالية:
النطاق الجغرافي: هو حجم التمويه الغاوسي الذي تم تطبيقه على خريطة التمثيل اللوني، ويتم التعبير عنه بالبكسل. يكون العدد التلقائي هو 20. يجب أن تتراوح القيمة بين 10 و50. استخدِم
GMUHeatmapTileLayer.radius
لضبط النطاق الجغرافي.الألوان: مجموعة من الألوان التي تستخدمها خريطة التمثيل اللوني لإنشاء خريطة ألوانها، وتتراوح من أدنى درجة إلى أعلى كثافة. يتم إنشاء
GMUGradient
باستخدام مصفوفة عدد صحيح تحتوي على الألوان ومصفوفة عائمة تشير إلى نقطة البداية لكل لون، ويتم تقديمها كنسبة مئوية من الحد الأقصى من الكثافة ويتم التعبير عنها ككسر من 0 إلى 1. يجب تحديد لون واحد فقط للتدرّج الأحادي اللون أو لونَين على الأقل للتدرّج المتعدد الألوان. يتم إنشاء خريطة الألوان باستخدام ميزة الاستجواب بين هذه الألوان. يحتوي التدرّج التلقائي على لونَين. تُحدِّد المعلَمةcolorMapSize
عدد الخطوات في التدرّج الهرمي. وسيؤدي استخدام عدد أكبر من الأرقام إلى تدرج أكثر سلاسة، في حين تؤدي الأرقام الأصغر إلى عمليات نقل أكثر وضوحًا مثل رسم بياني كونتور. استخدِمGMUHeatmapTileLayer.gradient
لضبط التدرج.التعتيم: هو تعتيم طبقة الخريطة الحرارية بالكامل ويتراوح بين 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;
تعديل خيار حالي
لتعديل خيار سبق ضبطه، اتّبِع الخطوات التالية:
- عدِّل الخيار إلى القيمة المطلوبة.
- تواصل هاتفيًا مع "
GMUHeatmapTileLayer.clearTileCache()
".
تغيير مجموعة البيانات
لتغيير مجموعة البيانات التي تم إنشاء خريطة التمثيل اللوني عليها:
- عدِّل جمع البيانات. استخدِم
GMUHeatmapTileLayer.weightedData
، مع إدراج مصفوفة منGMUWeightedLatLng
. - تواصل هاتفيًا مع "
GMUHeatmapTileLayer.clearTileCache()
".
إزالة خريطة التمثيل اللوني
لإزالة خريطة تمثيل لوني، يُرجى الاتصال بـ GMUHeatmapTileLayer.map
مرورًا بـ nil
.
Swift
heatmapLayer.map = nil
Objective-C
_heatmapLayer.map = nil;
الاطّلاع على التطبيق التجريبي
للاطّلاع على مثال آخر حول تنفيذ خريطة التمثيل اللوني، يمكنك الاطّلاع على
HeatmapViewController
في التطبيق التجريبي الذي يتم شحنه إلى مكتبة الخدمات.
يعرض دليل الإعداد كيفية تشغيل التطبيق التجريبي.