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