Isı Haritası

Platform seçin: Android iOS JavaScript

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 üzerindeki veri noktalarının dağılımını ve yoğunluğunu göstermek için kullanışlıdır.

Bu videoda, verileriniz haritada çok sayıda veri noktası gerektirdiğinde işaretçilere alternatif olarak ısı haritalarının kullanımı ele alınmaktadı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ı, her konuma bir işaretçi yerleştirmek yerine verilerin dağılımını göstermek için renkleri kullanır.

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

Polis karakollarının konumunu gösteren ısı haritasının bulunduğu harita
Harita üzerinde bir ısı haritası

Kitaplığı henüz ayarlamadıysanız bu sayfanın kalan kısmını okumadan önce kurulum kılavuzunu takip edin.

Basit bir ısı haritası ekleme

Haritanıza ısı haritası eklemek için, ilgilenilen her konumun koordinatlarını içeren bir veri kümesine ihtiyacınız vardır. İlk olarak map özelliğini GMSMapView olarak ayarlayarak bir GMUHeatmapTileLayer örneği oluşturun. Temel haritanın, ısı haritasıyla çalışmaya başlamadan önce yüklendiğinden emin olmak için uygulamanızın viewDidLoad() işlevinde bunu yapın. Ardından GMUHeatmapTileLayer örneğine GMUWeightedLatLng nesnelik bir koleksiyon 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 dayalı olarak çeşitli yakınlaştırma seviyeleri için karo görüntüleri oluşturur.

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

  1. map özelliğini bir GMSMapView olarak ayarlayarak bir GMUHeatmapTileLayer örneği oluşturun (bunu uygulamanızın viewDidLoad() işlevinde yapın).
  2. GMUHeatmapTileLayer örneğine GMUWeightedLatLng nesnelik bir koleksiyon 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 police_stations.json adlı bir JSON dosyasında depolanmaktadır. Dosyadan bir alıntı aşağıdadır:

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

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

  1. Yarıçap: Isı haritasına uygulanan Gauss bulanıklığının boyutu. Piksel cinsinden ifade edilir. 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 kendi renk haritasını oluşturmak için kullandığı, en düşük yoğunluktan en yüksek yoğunlukta olacak şekilde bir renk aralığı. Renkleri içeren bir tam sayı dizisi ve her rengin başlangıç noktasını gösteren bir kayan dizi (maksimum yoğunluğun yüzdesi olarak verilir) kullanılarak GMUGradient oluşturulur ve 0 ile 1 arasında bir kesir olarak ifade edilir. Tek renkli geç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şi iki renk içerir. colorMapSize parametresi, gradyandaki adım sayısını tanımlar. Büyük sayılar daha yumuşak bir geçiş sağlar. 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. Opaklı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. Şeffaflık değerini ayarlamak için GMUHeatmapTileLayer.opacity 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üncelle

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ğere güncelleyin.
  2. GMUHeatmapTileLayer.clearTileCache() Hizmetleri İçin Arayın.

Veri kümesini değiştirme

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

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

Isı haritasını kaldırma

Isı haritasını kaldırmak için GMUHeatmapTileLayer.map adlı kişiyi nil ileterek çağırın.

Swift

heatmapLayer.map = nil

Objective-C

_heatmapLayer.map = nil;

Demo uygulamayı göster

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