Isı Haritası Katmanı

Platform seçin: Android iOS JavaScript
  1. Genel Bakış
  2. Görselleştirme kitaplığını yükleme
  3. Ağırlıklı Veri Noktaları Ekleme
  4. Isı Haritası Katmanını Özelleştirme

Isı Haritası Katmanı, ısı haritalarının istemci taraflı olarak oluşturulmasını sağlar.

Genel bakış

Isı haritası, coğrafi noktalardaki verilerin yoğunluğunu göstermek için kullanılan bir görselleştirmedir. Isı Haritası Katmanı etkinleştirildiğinde, haritanın üzerinde renkli bir yer paylaşımı görünür. Varsayılan olarak, daha yüksek yoğunluklu alanlar kırmızı renkle, daha düşük yoğunluklu alanlar ise yeşil renkte görünür.

Görselleştirme kitaplığını yükleme

Isı Haritası Katmanı, google.maps.visualization kitaplığının bir parçasıdır ve varsayılan olarak yüklenmez. Görselleştirme sınıfları, ana Maps JavaScript API kodundan ayrı, bağımsız bir kitaplıktır. Bu kitaplıkta bulunan işlevi kullanmak için öncelikle Maps JavaScript API önyükleme URL'sindeki libraries parametresini kullanarak yüklemeniz gerekir:

<script async
    src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&libraries=visualization&callback=initMap">
</script>

Isı Haritası Katmanı Ekle

Isı Haritası Katmanı eklemek için önce yeni bir HeatmapLayer nesnesi oluşturmanız ve bu nesneye dizi veya MVCArray[] nesnesi biçiminde bazı coğrafi veriler sağlamanız gerekir. Veriler bir LatLng nesnesi veya bir WeightedLocation nesnesi olabilir. HeatmapLayer nesnesini örnekledikten sonra setMap() yöntemini çağırarak nesneyi haritaya ekleyin.

Aşağıdaki örnekte San Francisco haritasına 14 veri noktası eklenmiştir.

/* Data points defined as an array of LatLng objects */
var heatmapData = [
  new google.maps.LatLng(37.782, -122.447),
  new google.maps.LatLng(37.782, -122.445),
  new google.maps.LatLng(37.782, -122.443),
  new google.maps.LatLng(37.782, -122.441),
  new google.maps.LatLng(37.782, -122.439),
  new google.maps.LatLng(37.782, -122.437),
  new google.maps.LatLng(37.782, -122.435),
  new google.maps.LatLng(37.785, -122.447),
  new google.maps.LatLng(37.785, -122.445),
  new google.maps.LatLng(37.785, -122.443),
  new google.maps.LatLng(37.785, -122.441),
  new google.maps.LatLng(37.785, -122.439),
  new google.maps.LatLng(37.785, -122.437),
  new google.maps.LatLng(37.785, -122.435)
];

var sanFrancisco = new google.maps.LatLng(37.774546, -122.433523);

map = new google.maps.Map(document.getElementById('map'), {
  center: sanFrancisco,
  zoom: 13,
  mapTypeId: 'satellite'
});

var heatmap = new google.maps.visualization.HeatmapLayer({
  data: heatmapData
});
heatmap.setMap(map);

Ağırlıklı Veri Noktaları Ekle

Isı haritası, LatLng veya WeightedLocation nesnesini ya da ikisinin bir kombinasyonunu oluşturabilir. Her iki nesne de harita üzerinde tek bir veri noktasını temsil eder ancak WeightedLocation nesnesi, bu veri noktası için bir ağırlık belirtmenize de olanak tanır. Veri noktasına ağırlık uygulandığında WeightedLocation, basit bir LatLng nesnesinden daha yüksek bir yoğunlukla oluşturulur. Ağırlık, doğrusal bir ölçektir. Her LatLng nesnesinin dolaylı ağırlığı 1'dir. {location: new google.maps.LatLng(37.782, -122.441), weight: 3} tek bir WeightedLocation eklemek, google.maps.LatLng(37.782, -122.441) üç kez eklemekle aynı etkiye sahiptir. Tek bir dizide weightedLocation ve LatLng nesnelerini karıştırabilirsiniz.

LatLng yerine bir WeightedLocation nesnesi kullanmak şu durumlarda yararlı olabilir:

  • Tek bir konuma büyük miktarda veri ekleme. Ağırlığı 1.000 olan tek bir WeightedLocation nesnesi oluşturmak, 1.000 LatLng nesnesi oluşturmaktan daha hızlıdır.
  • Verilerinizi isteğe bağlı değerlere göre vurgulamak. Örneğin, deprem verilerini çizerken LatLng nesnelerini kullanabilirsiniz, ancak daha büyük ölçekte her bir depremin büyüklüğünü ölçmek için bir WeightedLocation kullanmak isteyebilirsiniz.
/* Data points defined as a mixture of WeightedLocation and LatLng objects */
var heatMapData = [
  {location: new google.maps.LatLng(37.782, -122.447), weight: 0.5},
  new google.maps.LatLng(37.782, -122.445),
  {location: new google.maps.LatLng(37.782, -122.443), weight: 2},
  {location: new google.maps.LatLng(37.782, -122.441), weight: 3},
  {location: new google.maps.LatLng(37.782, -122.439), weight: 2},
  new google.maps.LatLng(37.782, -122.437),
  {location: new google.maps.LatLng(37.782, -122.435), weight: 0.5},

  {location: new google.maps.LatLng(37.785, -122.447), weight: 3},
  {location: new google.maps.LatLng(37.785, -122.445), weight: 2},
  new google.maps.LatLng(37.785, -122.443),
  {location: new google.maps.LatLng(37.785, -122.441), weight: 0.5},
  new google.maps.LatLng(37.785, -122.439),
  {location: new google.maps.LatLng(37.785, -122.437), weight: 2},
  {location: new google.maps.LatLng(37.785, -122.435), weight: 3}
];

var sanFrancisco = new google.maps.LatLng(37.774546, -122.433523);

map = new google.maps.Map(document.getElementById('map'), {
  center: sanFrancisco,
  zoom: 13,
  mapTypeId: 'satellite'
});

var heatmap = new google.maps.visualization.HeatmapLayer({
  data: heatMapData
});
heatmap.setMap(map);

Isı Haritası Katmanını Özelleştirme

Aşağıdaki ısı haritası seçeneklerini kullanarak ısı haritanızın nasıl oluşturulacağını özelleştirebilirsiniz. Daha fazla bilgi için HeatmapLayerOptions dokümanlarına bakın.

  • dissipating: Isı haritalarının yakınlaştırmada görünüp görünmeyeceğini belirler. Dağılım yanlış olduğunda, belirli bir coğrafi konumda renk yoğunluğunun korunduğundan emin olmak için etki düzeyi yarıçapı yakınlaştırma düzeyiyle artırılır. Varsayılan olarak doğru değerine ayarlanır.
  • gradient: Isı haritasının renk gradyanı. Bir dizi CSS renk dizesiyle belirtilir. Uzatılmış adlandırılmış renkler ve HSL(A) değerleri dışındaki tüm CSS3 renkler (RGBA dahil) desteklenir.
  • maxIntensity: Isı haritasının maksimum yoğunluğu. Varsayılan olarak, ısı haritası renkleri, haritadaki herhangi bir pikselde bulunan noktaların en yüksek yoğunluğuna göre dinamik olarak ölçeklendirilir. Bu özellik, sabit bir maksimum değer belirtmenizi sağlar. Maksimum yoğunluğu ayarlamak, veri kümenizde olağan dışı bir şekilde yüksek yoğunluklu birkaç aykırı değer olduğunda faydalı olabilir.
  • radius: Her bir veri noktasının piksel cinsinden etki yarıçapı.
  • opacity: Isı haritasının opaklığı, 0 ile 1 arasında bir sayı olarak ifade edilir.

Aşağıdaki örnekte, mevcut özelleştirme seçeneklerinden bazıları gösterilmektedir.

Örneği göster