Isı Haritası

Platform seçin: Android iOS JavaScript

Bu sayfada, Yardımcı programda bulunan bu kitap için iOS için Haritalar SDK'sı Isı haritaları, havanın dağılımını göstermek için veri noktalarının yoğunluğunu gösterir.

Bu videoda, aşağıdaki durumlarda işaretçilere alternatif olarak ısı haritalarının kullanımı harita üzerinde çok sayıda veri noktası bulunması gerektiğini unutmayın.

Isı haritaları, izleyicilerin dağılımı ve göreli konum dağılımını anlamasını kolaylaştırır haritadaki veri noktalarının yoğunluğuna göre değişir. Her panele işaretçi yerleştirmek yerine, verilerin dağılımını göstermek için renkleri kullanırlar.

Aşağıdaki örnekte kırmızı, polisin en yoğun olduğu bölgeleri temsil eder Victoria, Avustralya’daki istasyonlar.

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 kurulum rehberini okumanızı öneririz. bu sayfada.

Basit bir ısı haritası ekleme

Haritanıza ısı haritası eklemek için aşağıdakileri içeren bir veri kümesi gerekir: koordinatlarıyla birlikte çalışır. İlk olarak, GMUHeatmapTileLayer örneği için map özelliği bir GMSMapView olarak ayarlanıyor. Uygulamanızın viewDidLoad() işlevinde bunu yaparak temel haritanın önce yüklendiğini görüyorsunuz. Ardından, GMUHeatmapTileLayer örneğine GMUWeightedLatLng nesne eklendi.

Yardımcı program, kabul eden GMUHeatmapTileLayer sınıfını sağlar: GMUWeightedLatLng nesne koleksiyonu. Dört haftada bir karo yarıçap, gradyan ve opaklık seçeneklerine göre çeşitli yakınlaştırma seviyeleri sağlanır.

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

  1. map özelliğiniGMUHeatmapTileLayer GMSMapView (bunu uygulamanızın viewDidLoad() işlevinde yapın).
  2. GMUWeightedLatLng nesneden oluşan bir koleksiyonu şuraya geçirin: GMUHeatmapTileLayer örneği.
  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. Aşağıdaki durumlarda seçenekleri GMUHeatmapTileLayer örneğini oluşturarak veya dilediğiniz zaman seçenek için yeni bir değer ayarlayarak.

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

  1. Yarıçap: Isı haritasına uygulanan Gauss bulanıklığının boyutu. piksel cinsinden belirtin. Varsayılan değer 20'dir. 10 ile 50 arasında olmalıdır. Tekliflerinizi otomatikleştirmek ve optimize etmek için Yarıçapı ayarlamak için GMUHeatmapTileLayer.radius tuşlarına basın.

  2. Gradyan: Isı haritasının rengini oluşturmak için kullandığı bir renk aralığı değişiklik gösterir. GMUGradient, renkleri içeren bir tam sayı dizisi ve maksimum yoğunluğun yüzdesi olarak verilen, her rengin başlangıç noktası ve 0 ile 1 arasında bir kesir olarak ifade edilir. Her öğe için yalnızca bir renk belirtmelisiniz tek renkli gradyan veya çok renkli için en az iki renk kullanabilirsiniz. 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ı. Büyük sayılar daha doğru sonuçlar verir renk geçişi gibi daha küçük sayılar ise çizgi grafiğidir. 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 arasında yer alır. Varsayılan değer 0,7'dir. Şu ayarı yapmak için GMUHeatmapTileLayer.opacity düğmesini kullanın: opaklık değeri için de geçerlidir.

Ö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. GMUHeatmapTileLayer.weightedData hesabını kullan, geçen GMUWeightedLatLng dizisidir.
  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 ilişkin başka bir örnek için HeatmapViewController: Yardımcı program kitaplığıyla birlikte gönderilen demo uygulamada. Kurulum kılavuzu, aşağıdakilerin nasıl yapılacağını gösterir: demo uygulamasını çalıştırın.