Isı haritaları

Platform seçin: Android iOS

Bu sayfada, iOS için Haritalar SDK'sı yardımcı program kitaplığında bulunan ısı haritası yardımcı programı açıklanmaktadır. Isı haritaları, veri noktalarının bir harita üzerindeki 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ı, izleyicilerin bir haritadaki 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 renk kullanır.

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

Polis merkezlerinin konumunu gösteren ısı haritası içeren bir harita
Harita üzerinde ısı haritası

Kitaplığı henüz ayarlamadıysanız bu sayfanın geri kalanını okumadan önce kurulum kılavuzundaki adımları uygulayın.

Basit bir ısı haritası ekleme

Haritanıza ısı haritası eklemek için ilgilenilen her konumun koordinatlarından oluşan bir veri kümesine ihtiyacınız vardır. İlk olarak bir GMUHeatmapTileLayer örneği oluşturun ve map özelliğini GMSMapView olarak ayarlayın. Isı haritasıyla çalışmadan önce temel haritanın yüklendiğinden emin olmak için bu işlemi uygulamanızın viewDidLoad() işlevinde yapın. Ardından GMUWeightedLatLng nesnelerinden oluşan bir koleksiyonu GMUHeatmapTileLayer örneğine geçirin.

Yardımcı program, GMUWeightedLatLng nesnelerinden oluşan bir koleksiyonu kabul eden GMUHeatmapTileLayer sınıfını sağlar. Sağlanan yarıçap, renk geçişi 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ı 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 bir GMUWeightedLatLng nesnesi koleksiyonu iletin.
  3. Harita görünümünü ileterek GMUHeatmapTileLayer.map yöntemini ç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 depolanı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 özelleştirilebilir birkaç özelliği vardır. Seçenekleri, GMUHeatmapTileLayer örneğini ilk oluşturduğunuzda 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 kullanın.

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

  3. Opaklık: Bu, tüm ısı haritası katmanı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 kullanın.

Örneğin, 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ğere 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 ayarınızı güncelleyin. GMUHeatmapTileLayer.weightedData yöntemini kullanın ve GMUWeightedLatLng dizisi iletin.
  2. GMUHeatmapTileLayer.clearTileCache() Hizmetleri İçin Arayın.

Isı haritasını kaldırma

Isı haritasını kaldırmak için GMUHeatmapTileLayer.map işlevini çağırın ve nil değerini iletin.

Swift

heatmapLayer.map = nil

Objective-C

_heatmapLayer.map = nil;

Demo uygulamayı inceleyin

Isı haritası uygulamasının başka bir örneği için yardımcı program kitaplığıyla birlikte gelen demo uygulamasındaki HeatmapViewController bölümüne göz atın. Kurulum kılavuzunda demo uygulamasını nasıl çalıştıracağınız gösterilir.