- 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ı, coğrafi noktalardaki veri 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 olan alanlar kırmızı, düşük yoğunluklu alanlar 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ı, Maps JavaScript API'nin ana kodundan ayrı olan bağımsız bir kitaplıktır. Bu kitaplıktaki işlevleri kullanmak için öncelikle Maps JavaScript API önyükleme 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ı
Isı Haritası Katmanı eklemek için önce yeni bir HeatmapLayer
nesnesi oluşturmanız ve ona dizi veya MVCArray[]
nesnesi biçiminde bazı coğrafi veriler sağlamanız gerekir. Veriler bir LatLng
nesnesi veya bir WeightedLocation
nesne olabilir. HeatmapLayer
nesnesini örneklendirdikten sonra setMap()
yöntemini çağırarak nesneyi 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ı haritası, LatLng
veya WeightedLocation
nesnelerini ya da bu ikisinin bir kombinasyonunu oluşturabilir. Her iki nesne de harita üzerinde tek bir veri noktasını temsil eder. Ancak WeightedLocation
nesnesi, söz konusu veri noktası için ek olarak ağırlık belirtmenize olanak tanır. Bir veri noktasına ağırlık uygulamak, WeightedLocation
öğesinin basit bir LatLng
nesnesine göre daha büyük bir yoğunlukla oluşturulmasına neden olur. Ağırlık, her LatLng
nesnesinin örtülü ağırlığı 1 olan doğrusal bir ölçektir. Bu durumda tek bir {location: new google.maps.LatLng(37.782, -122.441), weight: 3}
WeightedLocation
eklendiğinde, google.maps.LatLng(37.782, -122.441)
öğesinin üç kez eklenmesiyle aynı etkiye sahip olur.
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. Ağırlığı 1.000 olan tek bir
WeightedLocation
nesnesi oluşturmak, 1.000LatLng
nesnesi oluşturmaktan daha hızlıdır. - Rastgele değerlere göre verilerinize vurgu uygulama. Örneğin, deprem verilerini görüntülerken
LatLng
nesnelerini kullanabilirsiniz, ancak her depremin büyüklüğünü zengin ölçekte ölçmek içinWeightedLocation
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
Aşağıdaki ısı haritası seçeneklerini kullanarak ısı haritanızın nasıl oluşturulacağını özelleştirebilirsiniz. Daha fazla bilgi için HeatmapLayerOptions
belgelerini inceleyin.
dissipating
: Yakınlaştırma yapıldığında ısı haritalarının dağılıp kaybolmayacağını belirtir. Dağılım yanlış olduğunda etki yarıçapı, yakınlaştırma düzeyiyle birlikte artar. Böylece, renk yoğunluğu belirli bir coğrafi konumda korunur. Varsayılan değer, doğru değerine ayarlanır.gradient
: Bir CSS renk dizeleri dizisi olarak belirtilen, ısı haritasının renk gradyanı. Genişletilmiş adlandırılmış renkler ve HSL(A) değerleri hariç RGBA dahil tüm CSS3 renkleri desteklenir.maxIntensity
: Isı haritasının maksimum yoğunluğu. Isı haritası renkleri, varsayılan olarak haritadaki herhangi bir pikseldeki en yüksek nokta konsantrasyonu sayısına göre dinamik olarak ölçeklendirilir. Bu özellik, sabit bir maksimum belirtmenize olanak tanır. Maksimum yoğunluğu ayarlamak, veri kümeniz olağan dışı yüksek yoğunluğa sahip birkaç aykırı değer içeriyorsa faydalı 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.