نقشه های حرارتی

پلتفرم را انتخاب کنید: Android iOS JavaScript

این صفحه ابزار Heatmap را توضیح می‌دهد که در کتابخانه ابزار برای Maps SDK برای iOS موجود است. نقشه های حرارتی برای نمایش توزیع و چگالی نقاط داده روی نقشه مفید هستند.

در این ویدیو استفاده از نقشه های حرارتی به عنوان جایگزینی برای نشانگرها مورد بحث قرار می گیرد، زمانی که داده های شما به تعداد زیادی نقاط داده روی نقشه نیاز دارند.

نقشه های حرارتی درک توزیع و شدت نسبی نقاط داده روی نقشه را برای بینندگان آسان می کند. به جای قرار دادن یک نشانگر در هر مکان، نقشه های حرارتی از رنگ برای نمایش توزیع داده ها استفاده می کنند.

در مثال زیر، رنگ قرمز نشان دهنده مناطقی با تمرکز بالای ایستگاه های پلیس در ویکتوریا، استرالیا است.

نقشه حرارتی روی نقشه

توجه: با استفاده از ویژگی gradient ، می توانید رنگ های خود را برای نقشه حرارتی تنظیم کنید. نحوه سفارشی کردن رنگ ها و سایر ویژگی های نقشه حرارتی خود را ببینید.

اگر هنوز کتابخانه را راه‌اندازی نکرده‌اید، قبل از خواندن بقیه این صفحه ، راهنمای راه‌اندازی را دنبال کنید.

اضافه کردن یک نقشه حرارتی ساده

برای افزودن یک نقشه حرارتی به نقشه خود، به یک مجموعه داده متشکل از مختصات برای هر مکان مورد نظر نیاز دارید. ابتدا یک نمونه GMUHeatmapTileLayer ایجاد کنید و ویژگی map روی GMSMapView تنظیم کنید. این کار را در تابع viewDidLoad() برنامه خود انجام دهید تا مطمئن شوید که نقشه پایه قبل از کار با نقشه حرارتی بارگذاری شده است. سپس مجموعه ای از اشیاء GMUWeightedLatLng را به نمونه GMUHeatmapTileLayer ارسال کنید.

این ابزار کلاس GMUHeatmapTileLayer را تامین می کند که مجموعه ای از اشیاء GMUWeightedLatLng را می پذیرد. این تصاویر کاشی را برای سطوح مختلف زوم، بر اساس گزینه های شعاع، گرادیان و کدورت ارائه شده ایجاد می کند.

نگاهی به مراحل با جزئیات بیشتر:

1. یک نمونه GMUHeatmapTileLayer ایجاد کنید، ویژگی map روی یک GMSMapView تنظیم کنید (این کار را در viewDidLoad() برنامه خود انجام دهید).
2. مجموعه ای از اشیاء GMUWeightedLatLng را به نمونه GMUHeatmapTileLayer ارسال کنید.
3. با عبور از نمای نقشه، با GMUHeatmapTileLayer.map تماس بگیرید.

   سریع

   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
     }
   }
         

   هدف-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. Radius: اندازه تاری گاوسی اعمال شده بر روی نقشه حرارتی که بر حسب پیکسل بیان می شود. پیش فرض 20 است. باید بین 10 و 50 باشد. برای تنظیم شعاع از GMUHeatmapTileLayer.radius استفاده کنید.

2. گرادیان: طیفی از رنگ‌ها که نقشه حرارتی برای ایجاد نقشه رنگی خود از کمترین تا بالاترین شدت استفاده می‌کند. یک GMUGradient با استفاده از یک آرایه عدد صحیح حاوی رنگ‌ها، و یک آرایه شناور که نقطه شروع هر رنگ را نشان می‌دهد، به عنوان درصدی از حداکثر شدت، و به صورت کسری از 0 تا 1 بیان می‌شود. شما باید فقط یک رنگ را مشخص کنید. برای یک گرادیان تک رنگ، یا حداقل دو رنگ برای یک گرادیان چند رنگ. نقشه رنگی با استفاده از درون یابی بین آن رنگ ها ایجاد می شود. گرادیان پیش فرض دو رنگ دارد. پارامتر colorMapSize تعداد مراحل در گرادیان را مشخص می کند. اعداد بزرگتر منجر به گرادیان صاف‌تر می‌شوند، در حالی که اعداد کوچکتر انتقال واضح‌تری شبیه به نمودار کانتور ایجاد می‌کنند. از GMUHeatmapTileLayer.gradient برای تنظیم گرادیان استفاده کنید.

3. Opacity: این کدورت کل لایه Heatmap است و از 0 تا 1 متغیر است. پیش فرض 0.7 است. برای تنظیم مقدار opacity از GMUHeatmapTileLayer.opacity استفاده کنید.

به عنوان مثال، یک Gradient ایجاد کنید:

سریع

let gradientColors: [UIColor] = [.green, .red]
let gradientStartPoints: [NSNumber] = [0.2, 1.0]
heatmapLayer.gradient = GMUGradient(
  colors: gradientColors,
  startPoints: gradientStartPoints,
  colorMapSize: 256
)
      

هدف-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];
      

برای تغییر شفافیت یک نقشه حرارتی موجود:

سریع

heatmapLayer.opacity = 0.7
      

هدف-C

_heatmapLayer.opacity = 0.7;
      

یک گزینه موجود را به روز کنید

برای به روز رسانی گزینه ای که قبلاً تنظیم شده است، این مراحل را انجام دهید:

1. گزینه را به مقدار دلخواه به روز کنید.
2. GMUHeatmapTileLayer.clearTileCache() را فراخوانی کنید.

تغییر مجموعه داده

برای تغییر مجموعه داده ای که یک نقشه حرارتی بر اساس آن ساخته شده است:

1. مجموعه داده های خود را به روز کنید. از GMUHeatmapTileLayer.weightedData برای ارسال آرایه ای از GMUWeightedLatLng استفاده کنید.
2. GMUHeatmapTileLayer.clearTileCache() را فراخوانی کنید.

توجه: اگر می خواهید نقاطی را به Heatmap اضافه کنید یا نقاطی را از Heatmap حذف کنید، ابتدا مجموعه داده های خود را به روز کنید و سپس از GMUHeatmapTileLayer.weightedData استفاده کنید.

حذف نقشه حرارتی

برای حذف یک نقشه حرارتی، با عبور از nil ، GMUHeatmapTileLayer.map فراخوانی کنید.

سریع

heatmapLayer.map = nil
      

هدف-C

_heatmapLayer.map = nil;
      

برنامه دمو را ببینید

برای مثال دیگری از اجرای نقشه حرارتی، نگاهی به HeatmapViewController در برنامه آزمایشی که با کتابخانه ابزار ارسال می شود بیندازید. راهنمای راه اندازی به شما نشان می دهد که چگونه برنامه آزمایشی را اجرا کنید.