- Genel Bakış
- Görselleştirme kitaplığını yükleme
- Ağırlıklı Veri Noktaları Ekleme
- 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
WeightedLocationnesne şundan daha hızlıdır: 1.000LatLngnesnesi oluşturuluyor. - Rastgele değerlere göre verilerinize vurgu uygulama. Örneğin,
deprem verilerini çizerken
LatLngnesneleri kullanabilirsiniz, ancak kullanarak her bir depremin büyüklüğünü ölçmek içinWeightedLocationkullanmak 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.