Přidání vrstvy heat mapy (Android SDK)

  • Článek

Poznámka:

Vyřazení sady Azure Mapy Android SDK

Sada Azure Mapy Native SDK pro Android je teď zastaralá a bude vyřazena 31. 31. 25. Pokud se chcete vyhnout přerušení služeb, proveďte migraci do sady Azure Mapy Web SDK do 31. 31. 25. Další informace najdete v průvodci migrací sady Azure Mapy Android SDK.

Heat mapy, označované také jako mapy hustoty bodů, jsou typem vizualizace dat. Používají se k znázornění hustoty dat pomocí rozsahu barev a zobrazení "horkých míst" na mapě. Heat mapy představují skvělý způsob, jak vykreslit datové sady s velkým počtem bodů.

Vykreslení desítek tisíc bodů jako symbolů může pokrýt většinu oblasti mapy. Tento případ pravděpodobně vede k překrývání mnoha symbolů. Ztěžuje získání lepšího porozumění datům. Vizualizace této stejné datové sady jako heat mapa ale usnadňuje zobrazení hustoty a relativní hustoty jednotlivých datových bodů.

Heat mapy můžete používat v mnoha různých scénářích, mezi které patří:

  • Teplotní data: Poskytuje aproximace pro to, co je teplota mezi dvěma datovými body.
  • Data pro senzory šumu: Ukazuje nejen intenzitu šumu, kde je senzor, ale může také poskytnout přehled o rozptylu po vzdálenosti. Úroveň hluku na libovolném místě nemusí být vysoká. Pokud se oblast pokrytí šumu z více senzorů překrývají, je možné, že tato překrývající se oblast může zaznamenat vyšší úrovně šumu. V takovém případě by překrývající se oblast byla viditelná v heat mapě.
  • GPS trasování: Zahrnuje rychlost jako váženou výškovou mapu, kde intenzita každého datového bodu je založena na rychlosti. Tato funkce například poskytuje způsob, jak zjistit, kde se vozidlo urychlovalo.

Tip

Vrstvy heat mapy ve výchozím nastavení vykreslují souřadnice všech geometrií ve zdroji dat. Chcete-li omezit vrstvu tak, aby vykreslovat pouze funkce geometrie bodu, nastavte filter možnost vrstvy na eq(geometryType(), "Point"). Pokud chcete zahrnout i funkce Systému MultiPoint, nastavte filter možnost vrstvy na any(eq(geometryType(), "Point"), eq(geometryType(), "MultiPoint"))hodnotu .


Požadavky

Nezapomeňte dokončit kroky v rychlém startu : Vytvoření dokumentu aplikace pro Android. Bloky kódu v tomto článku lze vložit do obslužné rutiny události mapy onReady .

Přidání vrstvy heat mapy

Pokud chcete vykreslit zdroj dat bodů jako heat mapu, předejte zdroj dat do instance HeatMapLayer třídy a přidejte ho do mapy.

Následující ukázka kódu načte geoJSON kanál zemětřesení z minulého týdne a vykresluje je jako heat mapu. Každý datový bod se vykreslí s poloměrem 10 pixelů na všech úrovních přiblížení. Aby bylo zajištěno lepší uživatelské prostředí, heat mapa je pod vrstvou popisku, aby popisky zůstaly jasně viditelné. Data v této ukázce pocházejí z programu USGS Earthquake Hazards Program. Tato ukázka načte data GeoJSON z webu pomocí bloku kódu nástroje pro import dat, který je k dispozici v dokumentu Vytvoření zdroje dat.

//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")

Následující snímek obrazovky ukazuje mapu, která načítá heat mapu pomocí výše uvedeného kódu.

Mapa s vrstvou heat mapy nedávných zemětřesení

Přizpůsobení vrstvy heat mapy

Předchozí příklad přizpůsobil heat mapu nastavením možností poloměru a neprůhlednosti. Vrstva heat mapy nabízí několik možností přizpůsobení, včetně:

  • heatmapRadius: Definuje poloměr pixelu, ve kterém se má vykreslit každý datový bod. Poloměr můžete nastavit jako pevné číslo nebo jako výraz. Pomocí výrazu můžete škálovat poloměr na základě úrovně přiblížení a reprezentovat konzistentní prostorovou oblast na mapě (například poloměr 5 mil).

  • heatmapColor: Určuje, jak je heat mapa barevná. Barevný přechod je běžnou funkcí heat map. Efekt můžete dosáhnout výrazem interpolate . Můžete také použít step výraz pro obarvení heat mapy a vizuálně rozdělit hustotu do oblastí, které se podobají obrysové nebo paprskové mapě stylu. Tyto palety barev definují barvy od minimálního po maximální hodnotu hustoty.

    Hodnoty barev pro heat mapy zadáte jako výraz hodnoty heatmapDensity . Barva oblasti, ve které nejsou definována žádná data, je definována v indexu 0 výrazu Interpolace nebo výchozí barva výrazu "Stupňovité". Tuto hodnotu můžete použít k definování barvy pozadí. Tato hodnota je často nastavená na průhlednou nebo poloprůhlednou černou.

    Tady jsou příklady výrazů barev:

    Interpolační barevný výraz Stupňovité barevné výrazy
    interpolate(
        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: Určuje, jak neprůhledná nebo průhledná je vrstva heat mapy.

  • heatmapIntensity: Použije násobitel na váhu každého datového bodu, aby se zvýšila celková intenzita heat mapy. Způsobuje rozdíl v hmotnosti datových bodů, což usnadňuje vizualizaci.

  • heatmapWeight: Ve výchozím nastavení mají všechny datové body váhu 1 a jsou vážené stejně. Možnost váhy funguje jako násobitel a můžete ji nastavit jako číslo nebo výraz. Pokud je číslo nastaveno jako váha, jedná se o ekvivalenci umístění každého datového bodu na mapu dvakrát. Pokud je 2například váha , hustota se zdvojnásobí. Nastavení možnosti hmotnosti na číslo vykreslí heat mapu podobným způsobem jako použití možnosti intenzity.

    Pokud ale použijete výraz, může být váha každého datového bodu založená na vlastnostech každého datového bodu. Předpokládejme například, že každý datový bod představuje zemětřesení. Hodnota velikosti byla důležitou metrikou pro každý datový bod zemětřesení. Zemětřesení se děje po celou dobu, ale většina z nich má nízkou velikost a nejsou si všimli. Pomocí hodnoty velikosti ve výrazu přiřaďte váhu ke každému datovému bodu. Použitím hodnoty velikosti k přiřazení hmotnosti získáte lepší znázornění významu zemětřesení v heat mapě.

  • minZoom and maxZoom: Rozsah úrovně přiblížení, kde by měla být vrstva zobrazena.

  • filter: Výraz filtru použitý k omezení načteného ze zdroje a vykresleného ve vrstvě.

  • sourceLayer: Pokud je zdrojem dat připojeným k této vrstvě zdroj vektorové dlaždice, musí být zadaná zdrojová vrstva v rámci vektorových dlaždic.

  • visible: Skryje nebo zobrazí vrstvu.

Následující fragment kódu je příkladem heat mapy, kde se k vytvoření hladkého barevného přechodu používá interpolační výraz pro vložení. Vlastnost mag definovaná v datech se používá s exponenciální interpolací k nastavení váhy nebo relevance každého datového bodu.

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)
       )
    )
)

Následující snímek obrazovky ukazuje výše uvedenou vlastní vrstvu heat mapy pomocí stejných dat z předchozího příkladu heat mapy.

Mapa s vlastní vrstvou heat mapy nedávných zemětřesení

Konzistentní zoomable heat mapa

Ve výchozím nastavení mají paprsky datových bodů vykreslených ve vrstvě heat mapy pevný poloměr pixelů pro všechny úrovně přiblížení. Při přiblížení mapy se data agregují dohromady a vrstva heat mapy vypadá jinak. Následující video ukazuje výchozí chování heat mapy, kde při přiblížení mapy udržuje poloměr pixelů.

Animace znázorňující přiblížení mapy s vrstvou heat mapy zobrazující konzistentní velikost pixelů

zoom Pomocí výrazu můžete škálovat poloměr pro každou úroveň přiblížení, aby každý datový bod pokrývá stejnou fyzickou oblast mapy. Díky tomuto výrazu bude vrstva heat mapy vypadat staticky a konzistentněji. Každá úroveň přiblížení mapy má dvakrát tolik pixelů svisle a vodorovně jako předchozí úroveň přiblížení.

Změna velikosti poloměru tak, aby se zdvojnásobila s každou úrovní přiblížení, vytvoří heat mapu, která bude vypadat konzistentně na všech úrovních přiblížení. Chcete-li použít toto měřítko, použijte zoom se základním výrazem 2 exponential interpolation s pixelovým poloměrem nastaveným pro minimální úroveň přiblížení a měřítkem poloměru maximální úrovně přiblížení vypočítanou jako 2 * Math.pow(2, minZoom - maxZoom) v následujícím příkladu. Přiblížením mapy zjistíte, jak se heat mapa škáluje s úrovní přiblížení.

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)
)

Následující video ukazuje mapu s výše uvedeným kódem, která škáluje poloměr, zatímco se mapa přibližuje, aby se vytvořilo konzistentní vykreslování heat mapy napříč úrovněmi přiblížení.

Animace znázorňující přiblížení mapy s vrstvou heat mapy zobrazující konzistentní geoprostorovou velikost

Výraz zoom lze použít pouze ve step výrazech a interpolate ve výrazech. Následující výraz lze použít k odhadu poloměru v metrech. Tento výraz používá zástupný symbol radiusMeters, který byste měli nahradit požadovaným poloměrem. Tento výraz vypočítá přibližný poloměr pixelu pro úroveň přiblížení na rovníku pro úrovně přiblížení 0 a 24 a používá exponential interpolation výraz ke škálování mezi těmito hodnotami stejným způsobem, jakým funguje systém provazování v mapě.

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

Tip

Když povolíte clustering ve zdroji dat, body, které jsou blízko sebe, se seskupí jako skupinový bod. Počet bodů každého clusteru můžete použít jako výraz váhy pro heat mapu. To může výrazně snížit počet bodů, které se mají vykreslit. Počet bodů clusteru je uložený ve point_count vlastnosti funkce bodu:

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

Pokud je poloměr clusteringu jen pár pixelů, při vykreslování by byl malý vizuální rozdíl. Větší poloměr seskupí více bodů do každého clusteru a zlepší výkon heat mapy.

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

Tip

Když povolíte clustering ve zdroji dat, body, které jsou blízko sebe, se seskupí jako skupinový bod. Počet bodů každého clusteru můžete použít jako výraz váhy pro heat mapu. To může výrazně snížit počet bodů, které se mají vykreslit. Počet bodů clusteru je uložený ve point_count vlastnosti funkce bodu:

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

Pokud je poloměr clusteringu jen pár pixelů, při vykreslování by byl malý vizuální rozdíl. Větší poloměr seskupí více bodů do každého clusteru a zlepší výkon heat mapy.

Další kroky

Další příklady kódu pro přidání do map najdete v následujících článcích:

Vytvoření zdroje dat

Použití výrazů stylu řízených daty