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 üst kısmında renkli bir yer paylaşımı görünür. Varsayılan olarak, yoğunluğu yüksek alanlar kırmızı, düşük yoğunluklar 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ı, ana Maps JavaScript API kodundan ayrı olarak bağımsız bir kitaplıktır. Bu kitaplıkta yer alan işlevleri kullanmak için önce Maps JavaScript API önyükleme URL'sindeki libraries parametresini kullanarak bu işlevi 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ı ekleyin

Isı Haritası Katmanı eklemek için önce yeni bir HeatmapLayer nesnesi oluşturmanız ve bu nesneye bazı coğrafi verileri dizi veya MVCArray[] nesnesi biçiminde sağlamanız gerekir. Veriler bir LatLng nesnesi 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 ve WeightedLocation nesnelerini ya da bu 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 de olanak tanır. Bir veri noktasına ağırlık uygulamak, WeightedLocation öğesinin basit bir LatLng nesnesine göre daha yoğun bir yoğunlukta oluşturulmasına neden olur. Ağırlık, her LatLng nesnesinin örtülü ağırlığının 1 olduğu doğrusal bir ölçektir. Tek bir WeightedLocation eklemek, google.maps.LatLng(37.782, -122.441) değerini üç kez eklemekle aynı etkiye sahiptir.{location: new google.maps.LatLng(37.782, -122.441), weight: 3} Tek bir dizide weightedLocation ve LatLng nesnelerini birlikte kullanabilirsiniz.

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

  • Tek bir konuma büyük miktarda veri ekleme. Ağırlığı 1.000 olan tek bir WeightedLocation nesnesi oluşturmak, 1.000 LatLng nesne oluşturmaktan daha hızlıdır.
  • Rastgele değerleri temel alarak verilerinize vurgu yapma. Örneğin, deprem verilerinin grafiğini çizerken LatLng nesnelerini kullanabilir, ancak her depremin büyüklüğünü daha zengin ölçekte ölçmek için bir 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çeneklerini kullanarak ısı haritanızın nasıl görüneceğini özelleştirebilirsiniz. Daha fazla bilgi için HeatmapLayerOptions belgelerini inceleyin.

  • dissipating: Isı haritalarının zumda kaybolup kaybolmayacağını belirtir. Dağılım yanlış olduğunda renk yoğunluğunun herhangi bir coğrafi konumda korunmasını sağlamak için yakınlaştırma düzeyiyle etki yarıçapı artar. Varsayılan olarak true (doğru) değerine ayarlanır.
  • gradient: Isı haritasının, CSS renk dizelerinden oluşan bir dizi olarak belirtilen renk gradyanı. Genişletilmiş adlandırılmış renkler ve HSL(A) değerleri hariç tüm CSS3 renkleri (RGBA dahil) desteklenir.
  • maxIntensity: Isı haritasının maksimum yoğunluğu. Varsayılan olarak, ısı haritası renkleri, haritadaki herhangi bir pikseldeki en yüksek nokta konsantrasyonuna göre dinamik olarak ölçeklendirilir. Bu özellik, sabit bir maksimum değer belirlemenize olanak tanır. Veri kümenizde anormal derecede yüksek yoğunluklu birkaç aykırı değer varsa maksimum yoğunluğu ayarlamak yararlı olabilir.
  • radius: Her veri noktası için 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ılabilir özelleştirme seçeneklerinden bazıları gösterilmektedir.

Örneği görüntüleyin