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ı, belirli bir değerdeki veri yoğunluğunu göstermek için kullanılan coğrafi noktalar. Isı Haritası Katmanı etkinleştirildiğinde, renkli bir yer paylaşımı harita üzerinde görünür. Varsayılan olarak, yoğunluğu yüksek olan alanlar renklendirilir 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üklenir. Görselleştirme sınıfları bağımsız bir kitaplıktır. Google Haritalar JavaScript API kodundan ayrı olmalıdır. İşlevleri kullanmak için içinde yer alıyorsa, öncelikle libraries parametresinden emin olun:

<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 oluşturmanız gerekir biçiminde bir nesnedir ve ona dizi veya simge biçiminde bir dizi coğrafi veri sağlar MVCArray[] nesne algılandı. Veriler, LatLng nesne veya bir WeightedLocation nesnesini tanımlayın. HeatmapLayer nesnesini örneklendirdikten sonra haritasını çıkarmak için setMap() yöntemini çağırın.

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 veya bunların bir birleşimini ifade eder. Her iki nesne de tek bir veriyi temsil eder haritada işaret, ancak WeightedLocation nesnesi ek olarak veri noktası için bir ağırlık belirtin. Bir veri noktasına ağırlık uygulamak WeightedLocation öğesinin şuna göre daha yoğun bir yoğunlukla oluşturulmasına neden olur: basit LatLng nesnesi. Ağırlık, doğrusal bir ölçektir ve burada her LatLng nesnenin örtülü ağırlığı 1'dir (tek bir WeightedLocation eklenir) / {location: new google.maps.LatLng(37.782, -122.441), weight: 3} google.maps.LatLng(37.782, -122.441) için üç kez eklemeyle aynı etkiye sahiptir. 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. Tek bir Ağırlığı 1.000 olan WeightedLocation nesne şundan daha hızlıdır: 1.000 LatLng nesnesi oluşturuluyor.
  • Rastgele değerlere göre verilerinize vurgu uygulama. Örneğin, deprem verilerini çizerken LatLng nesneleri kullanabilirsiniz, ancak kullanarak her bir depremin büyüklüğünü ölçmek için WeightedLocation kullanmak karar vermemiz gerekecek.
/* 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ını kullanarak ısı haritanızın nasıl görüntüleneceğini özelleştirebilirsiniz seçenekleri vardır. Bkz. HeatmapLayerOptions dokümanlarına göz atın.

  • dissipating: Yakınlaştırma yapıldığında ısı haritalarının dağılıp kaybolmayacağını belirtir. Zaman dağılım yanlıştır, etki yarıçapı yakınlaştırma düzeyiyle renk yoğunluğunun belirli bir coğrafi bölgede korunduğundan emin olmak konum. Varsayılan değer, doğru değerine ayarlanır.
  • gradient: Bir CSS dizisi olarak belirtilen, ısı haritasının renk gradyanı renk dizeleri anlamına gelir. Tüm CSS3 renkleri (RGBA dahil) genişletilmiş adlandırılmış renkler ve HSL(A) değerleriyle uyumlu olmalıdır.
  • maxIntensity: Isı haritasının maksimum yoğunluğu. Isı haritası varsayılan olarak renkler en yüksek konsantrasyon oranına göre dinamik olarak noktayı tıklayarak harita üzerinde herhangi bir piksele Bu özelliği kullanarak şunları yapabilirsiniz: Sabit bir maksimum değer belirtin. Maksimum yoğunluğu ayarlamak, veri kümeniz alışılmadık derecede yüksek yoğunluğa sahip birkaç aykırı değer içeriyor.
  • 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