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ı, bir haritada 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ı ele alınmaktadır.

Isı haritaları, izleyicilere bir haritada veri noktalarının dağılımını ve göreceli yoğunluğunu anlamalarını kolaylaştırır. Isı haritaları, her konuma bir işaretçi yerleştirmek yerine verilerin dağılımını renklerle gösterir.

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ının yer aldığı harita
Haritada bir ısı haritası

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

Basit bir ısı haritası ekleme

Haritanıza bir ısı haritası eklemek için ilgilendiğiniz her konumun koordinatlarından oluşan 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ışmadan önce ana haritanın yüklenmesini sağlamak için bunu uygulamanızın viewDidLoad() işlevinde yapın. Ardından, GMUWeightedLatLng nesnelerinin bir koleksiyonunu GMUHeatmapTileLayer örneğine iletin.

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

Adımları daha ayrıntılı bir şekilde inceleyelim:

  1. map mülkünü GMSMapView olarak ayarlayarak bir GMUHeatmapTileLayer örneği oluşturun (Bunu uygulamanızın viewDidLoad() işlevinde yapın).
  2. GMUWeightedLatLng nesnesi koleksiyonunu GMUHeatmapTileLayer örneğine iletin.
  3. Harita görünümünü ileterek GMUHeatmapTileLayer.map işlevini çağırı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ı bir JSON dosyasında depolanmıştır. Dosyadan bir alıntı:

[
{"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 ilk kez oluştururken veya istediğiniz zaman seçenek için yeni bir değer ayarlayarak belirleyebilirsiniz.

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

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

  2. Gradyan: Isı haritasının renk haritasını oluşturmak için kullandığı, en düşükten en yükseğe kadar yoğunluktaki renk aralığı. Renkleri içeren bir tam sayı dizisi ve her rengin başlangıç noktasını belirten, maksimum yoğunluğun yüzdesi olarak verilen ve 0 ile 1 arasında bir kesir olarak ifade edilen bir kayan nokta dizisi kullanılarak bir GMUGradient oluşturulur. Tek renkli bir degrade için yalnızca bir renk, çok renkli bir degrade için ise en az iki renk belirtmeniz gerekir. Renk haritası, bu renkler arasında ara değerleme kullanılarak oluşturulur. Varsayılan gradyan iki renkten oluşur. colorMapSize parametresi, gradyandaki adım sayısını tanımlar. Daha büyük sayılar daha yumuşak bir degrade oluştururken daha küçük sayılar, kontur grafiğine benzer daha keskin geçişler sağlar. Gradyanı ayarlamak için GMUHeatmapTileLayer.gradient simgesini kullanın.

  3. Opaklık: Isı haritası katmanının tamamının opaklığıdır ve 0 ile 1 arasındadır. Varsayılan değer 0,7'dir. Opaklığı 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

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

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

Veri kümesini değiştirme

Isı haritasının oluşturulduğu veri kümesini değiştirmek için:

  1. Veri toplama işleminizi güncelleyin. GMUHeatmapTileLayer.weightedData kullanın ve GMUWeightedLatLng dizisi gönderin.
  2. GMUHeatmapTileLayer.clearTileCache() Hizmetleri İçin Arayın.

Isı haritasını kaldırma

Bir ısı haritasını kaldırmak için nil parametresini ileterek GMUHeatmapTileLayer.map işlevini çağırın.

Swift

heatmapLayer.map = nil

Objective-C

_heatmapLayer.map = nil;

Demo uygulamayı göster

Isı haritası uygulama örneği için yardımcı program kitaplığıyla birlikte gönderilen demo uygulamadaki HeatmapViewController bölümüne bakın. Kurulum kılavuzunda demo uygulamanın nasıl çalıştırılacağı gösterilmektedir.