Haritaya ısı haritası katmanı ekleme

Nokta yoğunluğu haritaları olarak da bilinen ısı haritaları bir veri görselleştirme türüdür. Bunlar, bir renk aralığı kullanılarak veri yoğunluğunun gösterilmesi ve verilerin haritada "etkin noktalar" olarak gösterilmesi için kullanılır. Isı haritaları, çok sayıda nokta içeren veri kümelerini işlemek için harika bir yoldur.

On binlerce noktanın sembol olarak işlenmesi harita alanının büyük bölümünü kapsayabiliyor. Bu durum büyük olasılıkla birçok simgenin örtüşmesine neden olur. Verileri daha iyi anlamayı zorlaştırıyor. Ancak, bu veri kümesini ısı haritasıyla görselleştirmek, her veri noktasının yoğunluğu ve göreli yoğunluğunun görülmesini kolaylaştırır.

Isı haritalarını aşağıdakiler gibi birçok farklı senaryoda kullanabilirsiniz:

• Sıcaklık verileri: İki veri noktası arasındaki sıcaklığın ne olduğuna ilişkin tahminler sağlar.
• Gürültü algılayıcıları için veriler: Yalnızca algılayıcının bulunduğu gürültü yoğunluğunu göstermekle kalmaz, aynı zamanda uzaktan dağıtma hakkında içgörü de sağlayabilir. Herhangi bir sitedeki gürültü düzeyi yüksek olmayabilir. Birden çok algılayıcının gürültü kapsama alanı çakışıyorsa, bu çakışan alan daha yüksek gürültü düzeyleriyle karşılaşabilir. Bu nedenle, örtüşen alan ısı haritasında görülebilir.
• GPS izi: Hızı, her veri noktasının yoğunluğunun hıza bağlı olduğu ağırlıklı yükseklik haritası olarak içerir. Örneğin, bu işlevsellik bir aracın hızlandığını görmenin bir yolunu sağlar.

İpucu

Isı haritası katmanları varsayılan olarak bir veri kaynağındaki tüm geometrilerin koordinatlarını oluşturur. Katmanı yalnızca nokta geometrisi özelliklerini işleyebilecek şekilde sınırlandırmak için katmanın filter özelliğini olarak ['==', ['geometry-type'], 'Point']ayarlayın. MultiPoint özelliklerini de eklemek istiyorsanız, katmanın filter özelliğini olarak ['any', ['==', ['geometry-type'], 'Point'], ['==', ['geometry-type'], 'MultiPoint']]ayarlayın.

Isı haritası katmanı ekleme

Noktaların veri kaynağını ısı haritası olarak işlemek için veri kaynağınızı sınıfın HeatMapLayer bir örneğine geçirin ve haritaya ekleyin.

Aşağıdaki kodda, her ısı noktasının tüm yakınlaştırma düzeylerinde 10 piksel yarıçapı vardır. Daha iyi bir kullanıcı deneyimi sağlamak için ısı haritası etiket katmanının altındadır. Etiketler net bir şekilde görünür kalır. Bu örnekteki veriler USGS Deprem Tehlikeleri Programı'ndan alınmaktadır. Son 30 günde meydana gelen önemli depremlere yöneliktir.

//Create a data source and add it to the map.
var datasource = new atlas.source.DataSource();
map.sources.add(datasource);

//Load a dataset of points, in this case earthquake data from the USGS.
datasource.importDataFromUrl('https://earthquake.usgs.gov/earthquakes/feed/v1.0/summary/all_week.geojson');

//Create a heat map and add it to the map.
map.layers.add(new atlas.layer.HeatMapLayer(datasource, null, {
  radius: 10,
  opacity: 0.8
}), 'labels');

Basit Isı Haritası Katmanı örneği, bir nokta özellikleri veri kümesinden basit bir ısı haritasının nasıl oluşturulacağını gösterir. Bu örneğin kaynak kodu için bkz . Basit Isı Haritası Katmanı kaynak kodu.

Isı haritası katmanını özelleştirme

Önceki örnek, yarıçap ve opaklık seçeneklerini ayarlayarak ısı haritasını özelleştirdi. Isı haritası katmanı özelleştirme için çeşitli seçenekler sağlar, örneğin:

• radius: Her veri noktasının işlendiği piksel yarıçapını tanımlar. Yarıçapı sabit bir sayı veya ifade olarak ayarlayabilirsiniz. İfade kullanarak yarıçapı yakınlaştırma düzeyine göre ölçeklendirebilir ve haritada tutarlı bir uzamsal alanı (örneğin, 5 mil yarıçap) temsil edebilirsiniz.

• color: Isı haritasının nasıl renklendirildiği belirtir. Renk gradyanı, ısı haritalarının yaygın bir özelliğidir. Etkiyi bir interpolate ifadeyle elde edebilirsiniz. Isı haritasını renklendirerek yoğunluğu görsel olarak kontur veya radar stili haritaya benzeyen aralıklara bölmek için de bir ifade kullanabilirsiniz step . Bu renk paletleri renkleri minimumdan maksimum yoğunluk değerine kadar tanımlar.

  Isı eşlemeleri için renk değerlerini değer üzerinde heatmap-density bir ifade olarak belirtirsiniz. Veri bulunmayan alanın rengi, "İlişkilendirme" ifadesinin dizin 0'ında veya bir "Basamaklı" ifadenin varsayılan renginde tanımlanır. Arka plan rengi tanımlamak için bu değeri kullanabilirsiniz. Genellikle, bu değer saydam veya yarı saydam siyah olarak ayarlanır.

  Renk ifadelerine örnekler aşağıda verilmiştir:

  İlişkilendirme renk ifadesi	Basamaklı renk ifadesi
  [     'ilişkilendirilmiş',     ['doğrusal'],     ['heatmap-density'],     0, 'saydam',     0.01, 'mor',     0,5, '#fb00fb',     1, '#00c3ff' ]	[     'step',     ['heatmap-density'],     'saydam',     0.01, 'donanma',     0,25, 'yeşil',     0,50, 'sarı',     0,75, 'kırmızı' ]

• opacity: Isı haritası katmanının ne kadar opak veya saydam olduğunu belirtir.

• intensity: Isı haritasının genel yoğunluğunu artırmak için her veri noktasının ağırlığına çarpan uygular. Veri noktalarının kalınlığında bir farka neden olarak görselleştirmeyi kolaylaştırır.

• weight: Varsayılan olarak, tüm veri noktalarının ağırlığı 1'tir ve eşit ağırlıklıdır. Ağırlık seçeneği çarpan görevi görür ve bunu sayı veya ifade olarak ayarlayabilirsiniz. Bir sayı ağırlık olarak ayarlanırsa, her veri noktasını haritaya iki kez yerleştirmenin eşdeğeridir. Örneğin, ağırlık 2 ise, yoğunluk ikiye katlanır. Ağırlık seçeneğinin bir sayı olarak ayarlanması, ısı haritasını yoğunluk seçeneğini kullanmaya benzer şekilde işler.

  Ancak, bir ifade kullanırsanız, her veri noktasının ağırlığı her veri noktasının özelliklerine bağlı olabilir. Örneğin, her veri noktasının bir depremi temsil ediyor olduğunu varsayalım. Büyüklük değeri her deprem veri noktası için önemli bir ölçüm olmuştur. Depremler her zaman olur, ancak çoğu düşük bir büyüklüğe sahiptir ve fark edilemez. Her veri noktasına ağırlık atamak için ifadedeki büyüklük değerini kullanın. Ağırlığı atamak için büyüklük değerini kullanarak, ısı haritasında depremlerin önemini daha iyi bir şekilde ifade edersiniz.

• source ve source-layer: Veri kaynağını güncelleştirmenizi sağlar.

Isı Haritası Katmanı Seçenekleri örneği, ısı haritası katmanının işlemeyi etkileyen farklı seçeneklerini gösterir. Bu örneğin kaynak kodu için bkz . Isı Haritası Katman Seçenekleri kaynak kodu.

Tutarlı yakınlaştırılabilir ısı haritası

Varsayılan olarak, ısı haritası katmanında işlenen veri noktalarının yarıçapı tüm yakınlaştırma düzeyleri için sabit bir piksel yarıçapı vardır. Haritayı yakınlaştırdığınızda veriler bir araya toplanır ve ısı haritası katmanı farklı görünür.

Her yakınlaştırma düzeyi için yarıçapı ölçeklendirmek için bir zoom ifade kullanın; böylece her veri noktası haritanın aynı fiziksel alanını kaplar. Bu ifade ısı haritası katmanının daha statik ve tutarlı görünmesini sağlar. Haritanın her yakınlaştırma düzeyi, önceki yakınlaştırma düzeyinin iki katı kadar dikey ve yatay piksele sahiptir.

Yarıçapın her yakınlaştırma düzeyiyle ikiye katlanması için ölçeklendirilmesi, tüm yakınlaştırma düzeylerinde tutarlı görünen bir ısı haritası oluşturur. Bu ölçeklendirmeyi uygulamak için, aşağıdaki örnekte gösterildiği gibi 2 * Math.pow(2, minZoom - maxZoom) minimum yakınlaştırma düzeyi için piksel yarıçapı ayarlanmış ve maksimum yakınlaştırma düzeyi için ölçeklendirilmiş yarıçapı hesaplanan bir temel 2 exponential interpolation ifadesiyle kullanınzoom. Isı haritasının yakınlaştırma düzeyiyle nasıl ölçeklendirildiğini görmek için haritayı yakınlaştırın.

Tutarlı yakınlaştırılabilir Isı Haritası örneği, her veri noktasının yarıçapının yerdeki aynı fiziksel alanı kapladığı bir ısı haritası oluşturmayı gösterir ve haritayı yakınlaştırırken daha tutarlı bir kullanıcı deneyimi oluşturur. Bu örnekteki ısı haritası 10 ve 22 yakınlaştırma düzeyleri arasında tutarlı bir şekilde ölçeklendirilir. Haritanın her yakınlaştırma düzeyi, önceki yakınlaştırma düzeyinin iki katı kadar dikey ve yatay piksele sahiptir. Yarıçapı her yakınlaştırma düzeyiyle iki katına çıkararak tüm yakınlaştırma düzeylerinde tutarlı görünen bir ısı haritası oluşturulur. Bu örneğin kaynak kodu için bkz . Tutarlı yakınlaştırılabilir Isı Haritası kaynak kodu.

İfade zoom yalnızca ve interpolate ifadelerinde step kullanılabilir. Aşağıdaki ifade, metre olarak bir yarıçapı yaklaşık olarak ayarlamak için kullanılabilir. Bu ifade, yerine istediğiniz yarıçapı koyabileceğiniz bir yer tutucu radiusMeterskullanır. Bu ifade, 0 ve 24 yakınlaştırma düzeyleri için ekvatordaki yakınlaştırma düzeyinin yaklaşık piksel yarıçapını hesaplar ve haritadaki döşeme sisteminin çalıştığı gibi bu değerler arasında ölçeklendirme yapmak için bir exponential interpolation ifade kullanır.

[
    `'interpolate', 
    ['exponential', 2],
    ['zoom'],
    0, ['*', radiusMeters, 0.000012776039596366526],
    24, [`'*', radiusMeters, 214.34637593279402]
]

İpucu

Veri kaynağında kümelemeye olanak sağladığınızda birbirine yakın olan noktalar kümelenmiş nokta olarak birlikte gruplandırılır. Isı haritası için ağırlık ifadesi olarak her kümenin nokta sayısını kullanabilirsiniz. Bu, işlenecek nokta sayısını önemli ölçüde azaltabilir. Kümenin nokta sayısı, nokta özelliğinin bir point_count özelliğinde depolanır:

var layer = new atlas.layer.HeatMapLayer(datasource, null, {
   weight: ['get', 'point_count']
});

Kümeleme yarıçapı yalnızca birkaç pikselse, işlemede küçük bir görsel fark olacaktır. Daha büyük bir yarıçap, her kümede daha fazla nokta gruplandırır ve ısı haritasının performansını artırır.

Sonraki adımlar

Bu makalede kullanılan sınıflar ve yöntemler hakkında daha fazla bilgi edinin:

HeatMapLayer

HeatMapLayerOptions

Haritalarınıza ekleyeceğiniz diğer kod örnekleri için aşağıdaki makalelere bakın:

Veri kaynağı oluşturma

Veri temelli stil ifadeleri kullanma