Isı Haritası

Koleksiyonlar ile düzeninizi koruyun İçeriği tercihlerinize göre kaydedin ve kategorilere ayırın.
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ı, haritadaki veri noktalarının dağılımını ve yoğunluğunu temsil etmek 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ılması ele alınmaktadır.

Isı haritaları, izleyicilerin haritadaki veri noktalarının dağılımını ve göreli yoğunluğunu anlamalarını kolaylaştırır. Isı haritaları, verilerin dağılımını göstermek için her bir konuma işaretçi yerleştirmek yerine rengi kullanır.

Aşağıdaki örnekte kırmızı, Avustralya, Victoria'da polis merkezlerinin yoğun olduğu alanları temsil etmektedir.

Polis karakollarının yerini gösteren ısı haritasına sahip harita
Haritada ısı haritası

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

Basit bir ısı haritası ekleme

Haritanıza bir ısı haritası eklemek için, ilgilendiğiniz 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. Bunu, uygulamanızın viewDidLoad() işlevinde yapın. Bunu yapmak için, ısı haritasıyla çalışmadan önce temel haritanın yüklendiğinden emin olun. Ardından, bir GMUWeightedLatLng nesne koleksiyonunu GMUHeatmapTileLayer örneğine 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 bağlı olarak çeşitli yakınlaştırma seviyeleri için karo resimleri oluşturur.

Adımları daha ayrıntılı bir şekilde incelemek için:

  1. GMUHeatmapTileLayer özelliğini oluşturarak map özelliğini GMSMapView olarak ayarlayın (bunu uygulamanızın viewDidLoad() işlevinde yapın).
  2. GMUWeightedLatLng nesnesinden oluşan bir koleksiyonu GMUHeatmapTileLayer örneğine iletin.
  3. Harita görünümünden 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 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ında özelleştirilebilir birden çok özellik vardır. Bu seçenekleri, başlangıçta GMUHeatmapTileLayer örneğini oluştururken veya 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 öğesini kullanın.

  2. Gradyan: Isı haritasının renk haritasını oluşturmak için kullanılan ve en düşükten en yüksek yoğunluka kadar değişen renk aralığı. Renkler içeren bir tam sayı dizisi ve her bir rengin başlangıç noktasının maksimum yoğunluğun yüzdesi olarak verildiği ve 0 ile 1 arasında bir kesir olarak ifade edilen bir kayan dizi kullanılarak GMUGradient oluşturulur. Tek renkli renk geçişi için yalnızca bir renk veya çok renkli 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 gradyanın iki rengi vardır. colorMapSize parametresi, gradyandaki adım sayısını tanımlar. Büyük sayılar daha yumuşak bir gradyanla, küçük sayılar ise kontur grafiğine benzer daha keskin geçişler sağlar. Renk geçişi ayarlamak için GMUHeatmapTileLayer.gradient 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. Saydamlı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

Ayarlanmış olan 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 işleminizi güncelleyin. GMUWeightedLatLng dizisi ile GMUHeatmapTileLayer.weightedData kullanın.
  2. GMUHeatmapTileLayer.clearTileCache() Hizmetleri İçin Arayın.

Isı haritasını çıkarma

Bir ısı haritasını kaldırmak için nil numarasını ileterek GMUHeatmapTileLayer.map numarasını arayın.

Swift

heatmapLayer.map = nil
      

Objective-C

_heatmapLayer.map = nil;
      

Demo uygulamasını inceleyin

Başka bir ısı haritası uygulaması örneği için, yardımcı program kitaplığıyla birlikte gönderilen demo uygulamasındaki HeatmapViewController öğesini inceleyin. Kurulum kılavuzu, demo uygulamasının nasıl çalıştırılacağını gösterir.