- 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 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.000LatLng
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 birWeightedLocation
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.