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