Isı haritası katmanı ekleme (Android SDK)

Nokta yoğunluğu haritaları olarak da bilinen ısı haritaları, bir veri görselleştirme t t'leridir. Bir renk aralığı kullanarak veri yoğunluğunu göstermek ve verileri haritada "sıcak noktalar" göstermek için kullanılır. Isı haritaları, veri kümelerini çok sayıda noktayla işlemenin harika bir yoludur.

Semboller olarak on binlerce nokta işleme, harita alanı çoğunu kapsıyor olabilir. Bu durum büyük olasılıkla birçok sembolün çakışmasıyla sonuç verir. Verileri daha iyi anlamayı zorlaştırarak. Ancak, aynı veri kümesine ısı haritasıyla görselleştirmek, her veri noktasının yoğunluğunu ve göreli yoğunluğunu görmeyi 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ık değerine yaklaşık tahminler sağlar.
  • Gürültü algılayıcıları için veriler: Algılayıcının bulunduğu yerde gürültünün yoğunluğunu değil aynı zamanda mesafenin dağılımı hakkında da içgörüler sağlar. Herhangi bir sitenin gürültü düzeyi yüksek olabilir. Birden çok algılayıcıdan gelen gürültü kapsamı alanı çakışıyorsa, bu çakışan alan daha yüksek gürültü düzeyleriyle karşılasabilir. Bu nedenle, çakışan alan ısı haritasında görünür olur.
  • GPS izlemesi: Her veri noktasının yoğunluğunun hıza bağlı olduğu ağırlıklı yükseklik haritası olarak hızı içerir. Örneğin bu işlevsellik, aracın hızının nerede olduğunu görmenin bir yolunu sağlar.

İpucu

Isı haritası katmanları varsayılan olarak bir veri kaynağında tüm geometrilerin koordinatlarını işler. Katmanı yalnızca nokta geometrisi özelliklerini işleyene kadar sınırlamak için filter katmanın seçeneğini olarak eq(geometryType(), "Point") ayarlayın. MultiPoint özelliklerini de eklemek için katmanın filter seçeneğini olarak any(eq(geometryType(), "Point"), eq(geometryType(), "MultiPoint")) ayarlayın.


Önkoşullar

Hızlı Başlangıç: Android uygulaması oluşturma belgesinde yer alan adımları tamamlayın. Bu makaledeki kod blokları haritalar olay onReady işleyicisine eklenebilir.

Isı haritası katmanı ekleme

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

Aşağıdaki kod örneği, geçen haftaki depremlerin GeoJSON beslemesini yükler ve bunları ısı haritası olarak işler. Her veri noktası, tüm yakınlaştırma düzeylerinde 10 piksel yarıçap ile işlenir. Daha iyi bir kullanıcı deneyimi sağlamak için ısı haritası etiket katmanının altında olduğundan etiketler net bir şekilde görünür durumda kalır. Bu örnekteki veriler USGS Deprem Tehlikeleri Programı'dır. Bu örnek, Veri kaynağı oluşturma belgesinde sağlanan veri içeri aktarma yardımcı program kod bloğu kullanılarak web'den GeoJSON verilerini yükler.

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

//Import the geojson data and add it to the data source.
source.importDataFromUrl("https://earthquake.usgs.gov/earthquakes/feed/v1.0/summary/all_week.geojson");

//Add data source to the map.
map.sources.add(source);

//Create a heat map layer.
HeatMapLayer layer = new HeatMapLayer(source,
  heatmapRadius(10f),
  heatmapOpacity(0.8f)
);

//Add the layer to the map, below the labels.
map.layers.add(layer, "labels");
//Create a data source and add it to the map.
val source = DataSource()

//Import the geojson data and add it to the data source.
source.importDataFromUrl("https://earthquake.usgs.gov/earthquakes/feed/v1.0/summary/all_week.geojson")

//Add data source to the map.
map.sources.add(source)

//Create a heat map layer.
val layer = HeatMapLayer(
    source,
    heatmapRadius(10f),
    heatmapOpacity(0.8f)
)

//Add the layer to the map, below the labels.
map.layers.add(layer, "labels")

Aşağıdaki ekran görüntüsünde yukarıdaki kodu kullanarak ısı haritası yükleyen bir harita gösterilir.

Son depremlerin ısı haritası katmanıyla harita

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

Önceki örnek, yarıçap ve opaklık seçeneklerini ayarerek ısı haritasını özelleştirdi. Isı haritası katmanı özelleştirme için aşağıdakiler dahil olmak üzere çeşitli seçenekler sağlar:

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

  • heatmapColor: Isı haritasının renklendirmeyi belirtir. Renk gradyan, ısı haritalarının yaygın bir özelliğidir. Etkiyi bir ifadeyle elde interpolate etmek için. Ayrıca ısı haritasını renklendirmek için bir ifade de kullanabilir, yoğunluğu görsel olarak bir yas veya radar stili haritaya benzeyen step aralıklara bölün. Bu renk paletleri minimumdan maksimum yoğunluk değerine kadar olan renkleri tanımlar.

    Isı haritaları için renk değerlerini değer üzerinde bir ifade olarak heatmapDensity belirtirsiniz. Verinin bulunduğu alan rengi, "İlişkilendirme" ifadesinin dizin 0'sinde veya "Adımlı" ifadenin varsayılan renginde tanımlanır. Bir arka plan rengi tanımlamak için bu değeri kullanabilirsiniz. Bu değer genellikle saydam veya yarı saydam siyah olarak ayarlanır.

    Renk ifadelerinin örnekleri aşağıda verilmiştir:

    İlişkilendirme renk ifadesi Adımlı renk ifadesi
    ilişkilendirme(
        linear(),
        heatmapDensity()),
        stop(0, color(Color.TRANSPARENT)),
        stop(0.01, color(Color.MAGENTA)),
        stop(0,5, color(parseColor("#fb00fb"))),
        stop(1, color(parseColor("#00c3ff")))
    )`
    step(
        heatmapDensity()),
        color(Color.TRANSPARENT),
        stop(0.01, color(parseColor("#000080")),
        stop(0,25, color(parseColor("#000080"))),
        stop(0,5, color(Color.GREEN)),
        stop(0,5, color(Color.YELLOW)),
        stop(1, color(Color.RED))
    )
  • heatmapOpacity: Isı haritası katmanının ne kadar opak veya saydam olduğunu belirtir.

  • heatmapIntensity: 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 ağırlığında bir farka neden olur ve görselleştirilenin daha kolay hale getirir.

  • heatmapWeight: Varsayılan olarak, tüm veri noktalarının ağırlığı 1 olur ve eşit olarak ağırlıklıdır. Ağırlık seçeneği bir çarpan gibi davranır ve bunu sayı veya ifade olarak ayarlayın. Bir sayı ağırlık olarak ayarlanırsa, her veri noktasını haritaya iki kez yerleştirme denkliğidir. Örneğin ağırlık ise yoğunluk 2 iki katına çıkar. Ağırlık seçeneğini bir sayı olarak ayarsanız ısı haritası, 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 göre olabilir. Örneğin, her veri noktasının bir depremi temsil ettiğini varsayalım. Büyüklük değeri, her deprem veri noktası için önemli bir ölçüm oldu. Depremler her zaman meydana gelir, ancak çoğu depremin büyüklüğü düşüktür ve farkeder. Her veri noktasına ağırlığı atamak için bir ifadede büyüklük değerini kullanın. Ağırlığı atamak için büyüklük değerini kullanarak ısı haritasında depremlerin öneminin daha iyi bir gösterimini elde ediyor oluruz.

  • minZoom ve maxZoom : Katmanın görüntüleniyor olması gereken yakınlaştırma düzeyi aralığı.

  • filter: Kaynaktan alınan ve katmanda işleneni sınırlamak için kullanılan filtre ifadesi.

  • sourceLayer: Katmana bağlı veri kaynağı bir vektör kutucuğu kaynağı ise, vektör kutucukları içinde bir kaynak katmanı belirtilmelidir.

  • visible: Katmanı gizler veya gösterir.

Bu aşağıda, düz renk gradyan oluşturmak için bir çizgi ilişkilendirme ifadesinin kullanılan bir ısı haritası örneği vere bir örnek vere kullanılmaktadır. Verilerde tanımlanan özellik, her bir veri noktasının ağırlığını veya ilgi düzeyini ayarlamak için üstel ilişkilendirme mag ile kullanılır.

HeatMapLayer layer = new HeatMapLayer(source,
    heatmapRadius(10f),

    //A linear interpolation is used to create a smooth color gradient based on the heat map density.
    heatmapColor(
        interpolate(
            linear(),
            heatmapDensity(),
            stop(0, color(Color.TRANSPARENT)),
            stop(0.01, color(Color.BLACK)),
            stop(0.25, color(Color.MAGENTA)),
            stop(0.5, color(Color.RED)),
            stop(0.75, color(Color.YELLOW)),
            stop(1, color(Color.WHITE))
        )
    ),

    //Using an exponential interpolation since earthquake magnitudes are on an exponential scale.
    heatmapWeight(
       interpolate(
            exponential(2),
            get("mag"),
            stop(0,0),

            //Any earthquake above a magnitude of 6 will have a weight of 1
            stop(6, 1)
       )
    )
);
val layer = HeatMapLayer(source,
    heatmapRadius(10f),

    //A linear interpolation is used to create a smooth color gradient based on the heat map density.
    heatmapColor(
        interpolate(
            linear(),
            heatmapDensity(),
            stop(0, color(Color.TRANSPARENT)),
            stop(0.01, color(Color.BLACK)),
            stop(0.25, color(Color.MAGENTA)),
            stop(0.5, color(Color.RED)),
            stop(0.75, color(Color.YELLOW)),
            stop(1, color(Color.WHITE))
        )
    ),

    //Using an exponential interpolation since earthquake magnitudes are on an exponential scale.
    heatmapWeight(
       interpolate(
            exponential(2),
            get("mag"),
            stop(0,0),

            //Any earthquake above a magnitude of 6 will have a weight of 1
            stop(6, 1)
       )
    )
)

Aşağıdaki ekran görüntüsünde yukarıdaki özel ısı haritası katmanı önceki ısı haritası örneğinde yer alan verileri gösterir.

Son depremlerin özel ısı haritası katmanıyla harita

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

Varsayılan olarak, ısı haritası katmanında işlenen veri noktalarının rady değeri tüm yakınlaştırma düzeyleri için sabit bir piksel yarıçapa sahiptir. Haritayı yakınlaştırırken veriler bir araya toplanmış ve ısı haritası katmanı farklı görünür. Aşağıdaki videoda haritayı yakınlaştırmak için piksel yarıçapını sürdüren ısı haritasının varsayılan davranışı gösterilir.

Tutarlı piksel boyutunu gösteren bir ısı haritası katmanıyla harita yakınlaştırmasını gösteren animasyon

Her bir veri noktasının haritanın aynı fiziksel alanına sahip olması için her yakınlaştırma düzeyi için zoom yarıçapı ölçeklendirmek üzere bir ifade kullanın. Bu ifade ısı haritası katmanının daha statik ve tutarlı görünür hale geldi. Haritanın her yakınlaştırma düzeyi, önceki yakınlaştırma düzeyine göre dikey ve yatay olarak iki kat fazla piksele sahip.

Yarıçapı her yakınlaştırma düzeyiyle iki katına çıkararak ölçeklendirmek, tüm yakınlaştırma düzeylerinde tutarlı görünen bir ısı haritası oluşturur. Bu ölçeklendirmeyi uygulamak için, zoom exponential interpolation En düşük yakınlaştırma düzeyi için piksel yarıçapı ve aşağıdaki örnekte gösterildiği gibi hesaplanan en yüksek yakınlaştırma düzeyi için ölçeklendirilmiş bir yarıçap ile birlikte bir taban 2 ifadesiyle kullanın 2 * Math.pow(2, minZoom - maxZoom) . Isı haritasının yakınlaştırma düzeyiyle nasıl ölçeklendirçalıştığını görmek için haritayı yakınlaştırın.

HeatMapLayer layer = new HeatMapLayer(source,
  heatmapRadius(
    interpolate(
      exponential(2),
      zoom(),

      //For zoom level 1 set the radius to 2 pixels.
      stop(1, 2f),

      //Between zoom level 1 and 19, exponentially scale the radius from 2 pixels to 2 * (maxZoom - minZoom)^2 pixels.
      stop(19, Math.pow(2, 19 - 1) * 2f)
    )
  ),
  heatmapOpacity(0.75f)
);
val layer = HeatMapLayer(source,
  heatmapRadius(
    interpolate(
      exponential(2),
      zoom(),

      //For zoom level 1 set the radius to 2 pixels.
      stop(1, 2f),

      //Between zoom level 1 and 19, exponentially scale the radius from 2 pixels to 2 * (maxZoom - minZoom)^2 pixels.
      stop(19, Math.pow(2.0, 19 - 1.0) * 2f)
    )
  ),
  heatmapOpacity(0.75f)
)

Aşağıdaki videoda, harita yakınlaştırma düzeylerinde tutarlı bir ısı haritası oluşturma işlemi oluşturmak için Haritayı yakınlaştırırken, yukarıdaki kodu çalıştıran bir harita gösterilmektedir.

Tutarlı bir jeo-uzamsal boyutu gösteren bir ısı haritası katmanıyla birlikte harita yakınlaştırması gösteren animasyon

zoomİfade yalnızca step ve interpolate ifadelerinde kullanılabilir. Aşağıdaki ifade, ölçü cinsinden bir yarıçapı yaklaşık olarak tahmin etmek için kullanılabilir. Bu ifade radiusMeters , istediğiniz yarıçap ile değiştirmeniz gereken bir yer tutucu kullanır. Bu ifade, yakınlaştırma düzeyi 0 ve 24 olan bir yakınlaştırma düzeyinin yaklaşık piksel yarıçapını hesaplar ve exponential interpolation Bu değerler arasında ölçeklendirmek için, eşlemdeki döşeme sistemi ile aynı şekilde bir ifade kullanır.

interpolate(
    exponential(2),
    zoom(),
    stop(1, product(radiusMeters, 0.000012776039596366526)),
    stop(24, product(radiusMeters, 214.34637593279402))
)

İpucu

Veri kaynağında kümelendirmeyi etkinleştirdiğinizde, birbirine yakın olan noktaları kümelenmiş bir nokta olarak birlikte gruplandırılır. Her kümenin nokta sayısını, ısı haritası için ağırlık ifadesi olarak kullanabilirsiniz. Bu, işlenecek noktaların sayısını önemli ölçüde azaltabilir. Bir kümenin nokta sayısı, point_count nokta özelliğinin bir özelliğinde depolanır:

HeatMapLayer layer = new HeatMapLayer(dataSource,
   heatmapWeight(get("point_count"))
);

Kümeleme yarıçapı yalnızca birkaç pikselden azsa, işlemede küçük bir görsel fark olur. Daha büyük bir yarıçap, her kümeye daha fazla işaret sağlar ve heatmap 'in performansını geliştirir.

interpolate(
    exponential(2),
    zoom(),
    stop(1, product(radiusMeters, 0.000012776039596366526)),
    stop(24, product(radiusMeters, 214.34637593279402))
)

İpucu

Veri kaynağında kümelendirmeyi etkinleştirdiğinizde, birbirine yakın olan noktaları kümelenmiş bir nokta olarak birlikte gruplandırılır. Her kümenin nokta sayısını, ısı haritası için ağırlık ifadesi olarak kullanabilirsiniz. Bu, işlenecek noktaların sayısını önemli ölçüde azaltabilir. Bir kümenin nokta sayısı, point_count nokta özelliğinin bir özelliğinde depolanır:

var layer = new HeatMapLayer(dataSource,
   heatmapWeight(get("point_count"))
)

Kümeleme yarıçapı yalnızca birkaç pikselden azsa, işlemede küçük bir görsel fark olur. Daha büyük bir yarıçap, her kümeye daha fazla işaret sağlar ve heatmap 'in performansını geliştirir.

Sonraki adımlar

Haritalarınıza eklenecek daha fazla kod örneği için aşağıdaki makalelere bakın: