Sdílet prostřednictvím

Přidání vrstvy heat mapy do mapy

  • Článek

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 vlastnosti geometrie bodu, nastavte filter vlastnost vrstvy na ['==', ['geometry-type'], 'Point']. Pokud chcete zahrnout i funkce MultiPointu, nastavte filter vlastnost vrstvy na ['any', ['==', ['geometry-type'], 'Point'], ['==', ['geometry-type'], 'MultiPoint']]hodnotu .


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.

V následujícím kódu má každý heat bod poloměr 10 pixelů na všech úrovních přiblížení. Aby se zajistilo lepší uživatelské prostředí, je heat mapa pod vrstvou popisku. Popisky zůstanou jasně viditelné. Data v této ukázce pocházejí z programu USGS Earthquake Hazards Program. Jedná se o významné zemětřesení, ke kterým došlo během posledních 30 dnů.

//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');

Ukázka jednoduché vrstvy heat mapy ukazuje, jak vytvořit jednoduchou heat mapu z datové sady bodů funkcí. Zdrojový kód pro tuto ukázku najdete ve zdrojovém kódu jednoduché vrstvy heat mapy.

Snímek obrazovky znázorňující mapu zobrazující heat mapu

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ě:

  • radius: 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).

  • color: 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 heatmap-density . 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
    [
        "interpolace",
        ['lineární'],
        ['heatmap-density'],
        0, "transparentní",
        0.01, "fialová",
        0.5, "#fb00fb",
        1, "#00c3ff"
    ]    		 [
        "step",
        ['heatmap-density'],
        "transparentním",
        0.01, 'navy',
        0.25, "zelená",
        0,50, "žlutá",
        0.75, "červená"
    ]

  • opacity: Určuje, jak neprůhledná nebo průhledná je vrstva heat mapy.

  • intensity: 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.

  • weight: 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 například váha 2, 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ě.

  • source a source-layer: Umožňuje aktualizovat zdroj dat.

Ukázka možností vrstvy heat mapy ukazuje, jak různé možnosti vrstvy heat mapy, která ovlivňuje vykreslování. Zdrojový kód pro tuto ukázku najdete ve zdrojovém kódu možnosti vrstvy heat mapy.

Snímek obrazovky znázorňující mapu zobrazující heat mapu a panel s upravitelným nastavením, který ukazuje, jak různé možnosti vrstvy heat mapy ovlivňují vykreslování

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.

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í.

Ukázka konzistentní zoomovatelné heat mapy ukazuje, jak vytvořit heat mapu, kde poloměr každého datového bodu pokrývá stejnou fyzickou oblast na zemi, což vytváří konzistentnější uživatelské prostředí při přiblížení mapy. Heat mapa v této ukázce se konzistentně škáluje mezi úrovněmi přiblížení 10 a 22. Každá úroveň přiblížení mapy má dvakrát tolik pixelů svisle a vodorovně jako předchozí úroveň přiblížení. Zdvojnásobení poloměru s každou úrovní přiblížení vytvoří heat mapu, která vypadá konzistentně napříč všemi úrovněmi přiblížení. Zdrojový kód pro tuto ukázku naleznete ve zdrojovém kódu Konzistentní přiblížení heat mapy.

Snímek obrazovky znázorňující mapu zobrazující heat mapu, která používá výraz přiblížení, který škáluje poloměr pro každou úroveň přiblížení

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'],
    0, ['*', radiusMeters, 0.000012776039596366526],
    24, ['*', 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 atlas.layer.HeatMapLayer(datasource, null, {
   weight: ['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ší informace o třídách a metodách používaných v tomto článku:

HeatMapLayer

HeatMapLayerOptions

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