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 verilerin yoğunluğunun gösterilmesi ve verilerin haritada "sık erişimli noktalar" olarak gösterilmesi için kullanılır. Isı haritaları, çok sayıda noktaya sahip veri kümelerini işlemenin harika bir yoludur.

On binlerce noktanın sembol olarak işlenmesi harita alanının çoğunu kapsayabilir. Bu durum büyük olasılıkla birçok simgenin örtüşmesine neden olur. Verilerin daha iyi anlaşılmasını zorlaştırıyor. Ancak bu veri kümesini bir ı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 dahil olmak üzere 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ğılma hakkında da içgörü 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 örtüşen alan daha yüksek gürültü düzeyleriyle karşılaşabilir. Bu nedenle, çakışan alan ısı haritasında görülebilir.
• GPS izlemesi: 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şlev bir aracın hız yaptığı yeri görmenin bir yolunu sağlar.

İpucu

Isı haritası katmanları varsayılan olarak bir veri kaynağındaki tüm geometrilerin koordinatlarını işler. 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 yarıçapı tüm yakınlaştırma düzeylerinde 10 pikseldir. 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 depremler içindir.

//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 kümesinden basit bir ısı haritası oluşturmayı 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 aşağıdakiler dahil olmak üzere çeşitli seçenekler sağlar:

• radius: Her veri noktasının işlendiği bir piksel yarıçapı 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 renklendirilme şeklini belirtir. Renk gradyanı, ısı haritalarının yaygın bir özelliğidir. Etkiyi bir interpolate ifadeyle elde edebilirsiniz. Ayrıca ısı haritasını renklendirerek yoğunluğu görsel olarak kontur veya radar stili haritaya benzeyen aralıklara ayırmak için bir ifade de 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 "Basamaklı" ifadesinin varsayılan renginde tanımlanır. Arka plan rengi tanımlamak için bu değeri kullanabilirsiniz. Bu değer genellikle saydam veya yarı saydam siyah olarak ayarlanır.

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

  İlişkilendirme renk ifadesi	Basamaklı renk ifadesi
  [     'interpolate',     ['doğrusal'],     ['ısı haritası-yoğunluk'],     0, 'saydam',     0,01, 'mor',     0,5, '#fb00fb',     1, '#00c3ff' ]	[     'step',     ['ısı haritası-yoğunluk'],     '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 bir çarpan uygular. Veri noktalarının kalınlığında 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 olarak 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ştirme eşdeğerliğidir. Örneğin, ağırlık 2 ise, yoğunluk ikiye katlanır. Ağırlık seçeneğinin bir sayıya ayarlanması, ısı haritasını yoğunluk seçeneğini kullanmaya benzer bir şekilde işler.

  Ancak, bir ifade kullanırsanız, her veri noktasının ağırlığı her veri noktasının özelliklerine göre olabilir. Örneğin, her veri noktasının bir depremi temsil ettiği 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 farkedilmez. 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 temsil 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ıkça veriler bir araya toplanır ve ısı haritası katmanı farklı görünür.

Her bir veri noktasının haritanın aynı fiziksel alanını kaplaması için her yakınlaştırma düzeyinin yarıçapını ölçeklendirmek için bir zoom ifade kullanın. 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) en düşük 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ı olan bir temel 2 exponential interpolation ifadesi 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ı ve haritayı yakınlaştırırken daha tutarlı bir kullanıcı deneyimi oluşturmayı gösterir. Bu örnekteki ısı haritası, yakınlaştırma düzeyleri 10 ile 22 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 ikiye katlama, tüm yakınlaştırma düzeylerinde tutarlı görünen bir ısı haritası oluşturur. 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, bir yarıçapı metre olarak 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 bir 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çeklendirmek 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 olabilir. Daha büyük bir yarıçap, her kümede daha fazla nokta gruplandırarak ı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 eklenecek diğer kod örnekleri için aşağıdaki makalelere bakın:

Veri kaynağı oluşturma

Veri temelli stil ifadeleri kullanma