Isı Haritası

Platform seçin: Android iOS JavaScript

Bu sayfada, iOS için Haritalar SDK'sının 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 yararlı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 bir haritadaki veri noktalarının dağılımını ve göreli yoğunluğunu anlamasını kolaylaştırır. Isı haritaları, her konuma işaretçi yerleştirmek yerine, verilerin dağılımını göstermek için renklerden yararlanır.

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

Polis karakollarının konumunu gösteren bir ısı haritası içeren harita
Harita üzerindeki bir ısı haritası

Kitaplığı henüz oluşturmadıysanız bu sayfanın geri kalanını okumadan önce kurulum kılavuzunu takip edin.

Basit bir ısı haritası ekleme

Haritanıza bir ı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. Verilen yarıçap, gradyan ve opaklık seçeneklerine bağlı olarak, ç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 değerine 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ünü 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 bir JSON dosyasında (police_stations.json) depolanı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 çeşitli özelleştirilebilir özellikleri 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ığı. GMUGradient, renkleri içeren bir tam sayı dizisi ve her rengin başlangıç noktasını gösteren bir kayan dizi kullanılarak oluşturulur. Bu dizi, maksimum yoğunluğun yüzdesi olarak verilir ve 0'dan 1'e kadar bir kesir olarak ifade edilir. Tek renkli renk geçişi için yalnızca bir renk veya ç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ım 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. Gradyanı ayarlamak için GMUHeatmapTileLayer.gradient öğesini kullanın.

  3. Saydamlık: Isı 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:

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];

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

Swift

heatmapLayer.opacity = 0.7

Objective-C

_heatmapLayer.opacity = 0.7;

Mevcut bir seçeneği güncelleme

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 kullanılan 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 üzerinden GMUHeatmapTileLayer.map numaralı telefonu arayın.

Swift

heatmapLayer.map = nil

Objective-C

_heatmapLayer.map = nil;

Demo uygulamaya göz atın

Başka bir ısı haritası uygulaması örneği için, demo uygulamasında yardımcı program kitaplığıyla birlikte gelen HeatmapViewController öğesine göz atın. Kurulum kılavuzu, demo uygulamanın nasıl çalıştırılacağını gösterir.