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 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 kaplama görünür. Varsayılan olarak, daha yüksek yoğunluklu alanlar kırmızı, daha düşük yoğunluklu 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ı, bağımsız bir kitaplıktır. Bu kitaplıkta yer alan işlevleri kullanmak için öncelikle Maps JavaScript API başlatma 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ı ekleme

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

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

/* 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 nesneleri ya da ikisinin bir kombinasyonunu oluşturabilir. Her iki nesne de haritada tek bir veri noktasını temsil eder ancak WeightedLocation nesnesi, bu veri noktası için ek olarak bir ağırlık belirtmenize olanak tanır. Bir veri noktasına ağırlık uygulandığında WeightedLocation, basit bir LatLng nesnesine göre daha yoğun bir şekilde oluşturulur. Ağırlık, doğrusal bir ölçek olup her LatLng nesnenin örtülü bir ağırlığı vardır. Tek bir WeightedLocation {location: new google.maps.LatLng(37.782, -122.441), weight: 3} eklemek, google.maps.LatLng(37.782, -122.441) öğesini üç kez eklemekle aynı etkiye sahiptir. Tek bir dizide weightedLocation ve LatLng nesnelerini karıştırabilirsiniz.

LatLng yerine WeightedLocation nesnesi kullanmak şu durumlarda faydalı olabilir:

  • Tek bir konuma büyük miktarda veri ekleme Ağırlığı 1.000 olan tek bir WeightedLocation nesnesini oluşturmak, 1.000 LatLng nesnesini oluşturmaktan daha hızlıdır.
  • Verilerinize rastgele değerlere göre vurgu uyguluyorsanız. Örneğin, deprem verilerini çizerken LatLng nesnelerini kullanabilirsiniz ancak her depremin Richter ölçeğindeki büyüklüğünü ö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

Isı haritanızın nasıl oluşturulacağını aşağıdaki ısı haritası seçenekleriyle ö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ğıtma özelliği devre dışı olduğunda, renk yoğunluğunun herhangi bir coğrafi konumda korunmasını sağlamak için etki yarıçapı yakınlaştırma düzeyiyle birlikte artar. Varsayılan olarak true değerine ayarlanır.
  • gradient: Isı haritasının renk gradyanı, CSS renk dizeleri dizisi olarak belirtilir. 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. Varsayılan olarak, ısı haritası renkleri, haritadaki herhangi bir pikselde 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ümenizde alışılmadık derecede yüksek yoğunluğa sahip birkaç aykırı değer olduğunda maksimum yoğunluğu 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