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 tarafında oluşturulmasını sağlar.

Genel bakış

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

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ı, Maps JavaScript API'nin ana kodundan ayrı olan bağımsız bir kitaplıktır. Bu kitaplıktaki işlevleri 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&loading=async&libraries=visualization&callback=initMap">
</script>

Isı Haritası Katmanı

Isı Haritası Katmanı eklemek için önce yeni bir HeatmapLayer nesnesi oluşturmanız ve ona dizi veya MVCArray[] nesnesi biçiminde bazı coğrafi veriler sağlamanız gerekir. Veriler bir LatLng nesnesi veya bir WeightedLocation nesne olabilir. HeatmapLayer nesnesini örneklendirdikten 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ı Ekleme

Isı haritası, LatLng veya WeightedLocation nesnelerini ya da bu ikisinin bir kombinasyonunu oluşturabilir. Her iki nesne de harita üzerinde tek bir veri noktasını temsil eder. Ancak WeightedLocation nesnesi, söz konusu veri noktası için ek olarak ağırlık belirtmenize olanak tanır. Bir veri noktasına ağırlık uygulamak, WeightedLocation öğesinin basit bir LatLng nesnesine göre daha büyük bir yoğunlukla oluşturulmasına neden olur. Ağırlık, her LatLng nesnesinin örtülü ağırlığı 1 olan doğrusal bir ölçektir. Bu durumda tek bir {location: new google.maps.LatLng(37.782, -122.441), weight: 3} WeightedLocation eklendiğinde, google.maps.LatLng(37.782, -122.441) öğesinin üç kez eklenmesiyle aynı etkiye sahip olur. weightedLocation ve LatLng nesnelerini tek bir dizide karıştırabilirsiniz.

LatLng yerine WeightedLocation nesnesinin kullanılması ş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.
  • Rastgele değerlere göre verilerinize vurgu uygulama. Örneğin, deprem verilerini görüntülerken LatLng nesnelerini kullanabilirsiniz, ancak her depremin büyüklüğünü zengin ölçekte ölçmek için 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 belgelerini inceleyin.

  • dissipating: Yakınlaştırma yapıldığında ısı haritalarının dağılıp kaybolmayacağını belirtir. Dağılım yanlış olduğunda etki yarıçapı, yakınlaştırma düzeyiyle birlikte artar. Böylece, renk yoğunluğu belirli bir coğrafi konumda korunur. Varsayılan değer, doğru değerine ayarlanır.
  • gradient: Bir CSS renk dizeleri dizisi olarak belirtilen, ısı haritasının renk gradyanı. Genişletilmiş adlandırılmış renkler ve HSL(A) değerleri hariç RGBA dahil tüm CSS3 renkleri desteklenir.
  • maxIntensity: Isı haritasının maksimum yoğunluğu. Isı haritası renkleri, varsayılan olarak haritadaki herhangi bir pikseldeki en yüksek nokta konsantrasyonu sayısına göre dinamik olarak ölçeklendirilir. Bu özellik, sabit bir maksimum belirtmenize olanak tanır. Maksimum yoğunluğu ayarlamak, veri kümeniz olağan dışı yüksek yoğunluğa sahip birkaç aykırı değer içeriyorsa faydalı olabilir.
  • radius: Her veri noktasının etki yarıçapı (piksel cinsinden).
  • opacity: Isı haritasının opaklığı. 0 ile 1 arasında bir sayı olarak ifade edilir.

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

Örneği inceleyin