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ı 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ıtma haritası katmanı etkinleştirildiğinde haritanın üstünde renkli bir yer paylaşımı görünür. Varsayılan olarak, yoğunluk değeri daha yüksek olan alanlar kırmızı, yoğunluk değeri daha düşük olan alanlar ise yeşil renkte 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ı, ana Maps JavaScript API kodundan ayrı, kendi kendine yeten bir kitaplıktır. Bu kitaplıktaki işlevleri kullanmak için öncelikle Maps JavaScript API önyükleme URL'sindeki libraries parametresini kullanarak kitaplığı 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ı Ekleme

Isıtma 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 LatLng veya WeightedLocation nesnesi olabilir. HeatmapLayer nesnesini örnekledikten sonra setMap() yöntemini çağırarak 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ı haritaları, LatLng veya WeightedLocation nesnelerini ya da ikisinin bir kombinasyonunu oluşturabilir. Her iki nesne de haritadaki tek bir veri noktasını temsil eder ancak WeightedLocation nesnesi, söz konusu veri noktası için bir ağırlık da belirtmenize olanak tanır. Bir veri noktasına ağırlık uygulamak, WeightedLocation öğesinin basit bir LatLng nesnesinden daha yoğun bir şekilde oluşturulmasına neden olur. Ağırlık, her LatLng nesnesinin 1 olan gizli ağırlığının yer aldığı doğrusal bir ölçektir. {location: new google.maps.LatLng(37.782, -122.441), weight: 3} değerine sahip tek bir WeightedLocation eklemek, google.maps.LatLng(37.782, -122.441) değerini üç kez eklemekle aynı etkiye sahiptir. weightedLocation ve LatLng nesnelerini tek bir diziye karıştırabilirsiniz.

LatLng yerine WeightedLocation nesnesi kullanmak aşağıdaki durumlarda faydalı olabilir:

  • Tek bir konuma büyük miktarda veri ekleme 1.000 ağırlığında tek bir WeightedLocation nesnesi oluşturmak, 1.000 LatLng nesnesi oluşturmaktan daha hızlıdır.
  • Verilerinize keyfi değerlere göre vurgu uygulama Örneğin, deprem verilerini noktayla gösterimde kullanırken LatLng nesnelerini kullanabilirsiniz ancak her depremin büyüklüğünü Richter ölçeğinde ölçmek için WeightedLocation kullanabilirsiniz.
/* 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çenekleriyle ısı haritanızın nasıl oluşturulacağını özelleştirebilirsiniz. Daha fazla bilgi için HeatmapLayerOptions belgelerini inceleyin.

  • dissipating: Isı haritalarının yakınlaştırma sırasında dağılıp dağılmayacağını belirtir. dağılım değeri yanlış olduğunda, renk yoğunluğu belirli bir coğrafi konumda korunması için etki yarıçapı yakınlaştırma düzeyiyle birlikte artar. Varsayılan olarak true değerine ayarlanır.
  • gradient: CSS renk dizesi dizisi olarak belirtilen ısı haritasının renk gradyanı. Genişletilmiş adlandırılmış renkler ve HSL(A) değerleri hariç olmak üzere RGBA dahil tüm CSS3 renkleri desteklenir.
  • maxIntensity: Isı haritasının maksimum yoğunluğu. Isı haritası renkleri varsayılan olarak haritada belirli bir pikselde bulunan en yüksek nokta yoğunluğuna göre dinamik olarak ölçeklendirilir. Bu özellik, sabit bir maksimum değer belirtmenize olanak tanır. Veri kümeniz alışılmadık derecede yüksek yoğunluğa sahip birkaç aykırı değer içeriyorsa maksimum yoğunluk ayarlamak yararlı 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 görüntüleyin