Isı Haritası

Bu sayfada, iOS için Haritalar SDK'sına yönelik yardımcı program kitaplığında bulunan ısı haritası yardımcı programı açıklanmaktadır. Isı haritaları, harita üzerinde veri noktalarının dağılımını ve yoğunluğunu göstermek için kullanışlıdır.

Bu videoda, verileriniz harita üzerinde çok sayıda veri noktası gerektirdiğinde, işaretçilere alternatif olarak ısı haritalarının kullanımı anlatılmaktadır.

Isı haritaları, izleyicilerin harita üzerindeki veri noktalarının dağılımını ve göreceli yoğunluğunu anlamasını kolaylaştırır. Isı haritaları, verilerin dağılımını göstermek için her konuma işaretçi yerleştirmek yerine renklerden yararlanır.

Aşağıdaki örnekte kırmızı renk, Avustralya'nın Victoria kentindeki polis karakollarının yoğun olduğu bölgeleri temsil etmektedir.

Kitaplığı henüz kurmadıysanız bu sayfanın geri kalanını okumadan önce kurulum kılavuzunu uygulayın.

Basit bir ısı haritası ekleme

Haritanıza ısı haritası eklemek için, ilgilenilen her bir konumun koordinatlarını içeren bir veri kümesine ihtiyacınız vardır. Öncelikle map özelliğini GMSMapView olarak ayarlayarak bir GMUHeatmapTileLayer örneği oluşturun. Isı haritasıyla çalışmaya başlamadan önce temel haritanın yüklendiğinden emin olmak için bu işlemi uygulamanızın viewDidLoad() işlevinde yapın. Daha sonra, GMUHeatmapTileLayer örneğine GMUWeightedLatLng nesne koleksiyonunu iletin.

Yardımcı program, GMUWeightedLatLng nesne koleksiyonunu kabul eden GMUHeatmapTileLayer sınıfını sağlar. Sağlanan yarıçap, gradyan ve opaklık seçeneklerine göre çeşitli yakınlaştırma seviyeleri için karo resimleri oluşturur.

Adımları daha ayrıntılı olarak inceleyelim:

1. map özelliğini GMSMapView olarak ayarlayarak bir GMUHeatmapTileLayer örneği oluşturun (bunu uygulamanızın viewDidLoad() işlevinde yapın).
2. GMUHeatmapTileLayer örneğine GMUWeightedLatLng nesne koleksiyonunu iletin.
3. Harita görünümünden geçerek GMUHeatmapTileLayer.map numaralı telefonu arayın.

   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
         

Bu örnekte, veriler police_stations.json adlı JSON dosyasında depolanmaktadır. Dosyadan bir ayıklamayı burada bulabilirsiniz:

[
{"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 }
]

Isı haritasını özelleştirme

Isı haritasının özelleştirilebilir birkaç özelliği vardır. Seçenekleri, GMUHeatmapTileLayer örneğini oluştururken veya seçenek için yeni bir değer belirleyerek istediğiniz zaman ayarlayabilirsiniz.

Aşağıdaki seçenekler kullanılabilir:

1. Yarıçap: Isı haritasına uygulanan Gauss bulanıklığının piksel cinsinden boyutu. Varsayılan değer 20'dir. 10 ile 50 arasında olmalıdır. Yarıçapı ayarlamak için GMUHeatmapTileLayer.radius değerini kullanın.

2. Gradyan: Isı haritasının renk haritasını oluşturmak için kullandığı, en düşük yoğunluktan en yüksek yoğunluğa kadar değişen bir renk aralığı. Bir GMUGradient, renkleri içeren bir tam sayı dizisi ve her rengin başlangıç noktasını gösteren, maksimum yoğunluğun bir yüzdesi olarak verilen ve 0'dan 1'e kesirli olarak ifade edilen bir kayan dizi kullanılarak oluşturulur. Tek renkli renk geçişi için yalnızca bir renk, çok renkli bir renk geçişi için en az iki renk belirtmeniz gerekir. Renk haritası, bu renkler arasındaki interpolasyon kullanılarak oluşturulur. Varsayılan renk geçişinin iki rengi vardır. colorMapSize parametresi, renk geçişindeki adımların sayısını tanımlar. Büyük sayılar daha yumuşak bir gradyan sağlarken, küçük sayılar, kontur grafiğine benzer şekilde daha keskin geçişler sağlar. Renk geçişini ayarlamak için GMUHeatmapTileLayer.gradient öğesini kullanın.

3. Saydamlık: Bu, ısı haritası katmanının tamamının opaklığıdır ve 0 ile 1 arasında değişir. Varsayılan değer 0,7'dir. Opaklık değerini ayarlamak için GMUHeatmapTileLayer.opacity öğesini kullanın.

Örneğin, bir Gradient oluşturun:

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

NSArray<UIColor *> *gradientColors = @[UIColor.greenColor, UIColor.redColor];
NSArray<NSNumber *> *gradientStartPoints = @[@0.2, @1.0];
_heatmapLayer.gradient = [[GMUGradient alloc] initWithColors:gradientColors
                                                 startPoints:gradientStartPoints
                                                colorMapSize:256];
      

Mevcut bir ısı haritasının opaklığını değiştirmek için:

heatmapLayer.opacity = 0.7
      

_heatmapLayer.opacity = 0.7;
      

Mevcut bir seçeneği güncelleme

Önceden ayarlanmış bir seçeneği güncellemek için aşağıdaki adımları uygulayın:

1. Seçeneği istediğiniz değere güncelleyin.
2. GMUHeatmapTileLayer.clearTileCache() Hizmetleri İçin Arayın.

Veri kümesini değiştirme

Isı haritasını oluştururken temel alınan veri kümesini değiştirmek için:

1. Veri koleksiyonunuzu güncelleyin. GMUWeightedLatLng dizisini ileterek GMUHeatmapTileLayer.weightedData işlevini kullanın.
2. GMUHeatmapTileLayer.clearTileCache() Hizmetleri İçin Arayın.

Isı haritasını kaldırma

Bir ısı haritasını kaldırmak için nil adlı kişiyi ileterek GMUHeatmapTileLayer.map numaralı telefonu arayın.

heatmapLayer.map = nil
      

_heatmapLayer.map = nil;
      

Demo uygulamaya göz atın

Isı haritası uygulamasına dair başka bir örnek için, demo uygulamasında yardımcı program kitaplığıyla birlikte gönderilen HeatmapViewController öğesine göz atın. Kurulum kılavuzu, demo uygulamayı nasıl çalıştıracağınızı gösterir.