Přidání vrstvy heat mapy do mapy

Heat mapy, označované také jako mapy hustoty bodů, jsou typem vizualizace dat. Používají se k reprezentaci hustoty dat pomocí řady barev a k zobrazení "aktivních míst" dat 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 mapové oblasti. V tomto případě se pravděpodobně překrývá mnoho symbolů. Ztěžuje získání lepšího porozumění datům. Vizualizace stejné datové sady jako heat mapy však usnadňuje zobrazení hustoty a relativní hustoty jednotlivých datových bodů.

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

• Data o teplotě: Poskytuje aproximaci teploty mezi dvěma datovými body.
• Data pro snímače šumu: Zobrazují nejen intenzitu šumu, kde se senzor nachází, ale mohou také poskytnout přehled o rozptylu na vzdálenost. Úroveň hluku na libovolném místě nemusí být vysoká. Pokud se oblast pokrytí šumu z více senzorů překrývá, je možné, že tato překrývající se oblast může zaznamenat vyšší úrovně šumu. Překrývající se oblast by proto byla viditelná v heat mapě.
• Trasování GPS: Zahrnuje rychlost jako mapu vážené výšky, kde intenzita každého datového bodu je založena na rychlosti. Tato funkce například poskytuje způsob, jak zjistit, kde vozidlo řídilo rychlost.

Tip

Vrstvy heat map ve výchozím nastavení vykreslují souřadnice všech geometrií ve zdroji dat. Pokud chcete omezit vrstvu tak, aby vykreslovat pouze prvky geometrie bodů, 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']].

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ý topný 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 popisků. Popisky zůstanou jasně viditelné. Data v této ukázce pocházejí z programu NEBEZPEČÍ ZEMĚTŘESENÍ USGS. Jedná se o významné zemětřesení, ke kterým došlo v posledních 30 dnech.

//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 vrstvy jednoduché heat mapy ukazuje, jak vytvořit jednoduchou heat mapu z datové sady bodových funkcí. Zdrojový kód pro tuto ukázku najdete v tématu Zdrojový kód simple heat map layer.

Přizpůsobení vrstvy heat mapy

Předchozí příklad upravil heat mapu nastavením možností poloměru a krytí. Vrstva heat mapy poskytuje několik možností pro přizpůsobení, mezi které patří:

• radius: Definuje poloměr pixelů, 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 představovat konzistentní prostorovou oblast na mapě (například poloměr 5 km).

• color: Určuje, jak se má heat mapa zbarvit. Barevný přechod je běžnou funkcí heat map. Efektu můžete dosáhnout pomocí výrazu interpolate . Můžete také použít step výraz pro vybarvení heat mapy, které vizuálně rozdělí hustotu na oblasti, které se podobají obrysové nebo paprskové mapě. Tyto palety barev definují barvy od minimální po maximální hodnotu hustoty.

  Hodnoty barev pro heat mapy zadáte jako výraz pro hodnotu heatmap-density . Barva oblasti, ve které nejsou žádná data, je definována v indexu 0 výrazu interpolace nebo výchozí barvě výrazu "Stepd". 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	Výraz stupňovité barvy
  [     "interpolovat",     ['lineární'],     ['heatmap-density'],     0, "transparentní",     0,01, "fialová",     0.5, "#fb00fb",     1, "#00c3ff" ]	[     'krok',     ['heatmap-density'],     "transparentní",     0.01, 'navy',     0,25, "zelená",     0,50, "žlutá",     0,75, 'červená' ]

• opacity: Určuje neprůhlednou nebo průhlednou vrstvu heat mapy.

• intensity: Použije násobitel na váhu každého datového bodu, aby se zvýšila celková intenzita heatmapy. 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 mají stejnou váhu. Možnost hmotnosti funguje jako násobitel a můžete ji nastavit jako číslo nebo výraz. Pokud je jako váha nastaveno číslo, jedná se o ekvivalenci umístění každého datového bodu na mapu dvakrát. Pokud je například hmotnost 2, hustota se zdvojnásobí. Nastavením možnosti hmotnosti na číslo se heat mapa vykreslí podobným způsobem jako u možnosti intenzity.

  Pokud ale použijete výraz, může být váha každého datového bodu založena na vlastnostech každého datového bodu. Předpokládejme například, že každý datový bod představuje zemětřesení. Hodnota magnitudy je důležitou metrikou pro každý datový bod zemětřesení. K zemětřesením dochází pořád, ale většina z nich má nízkou velikost a nevšimne se. Pomocí hodnoty magnitudy ve výrazu přiřaďte váhu každému datovému bodu. Použitím hodnoty magnitudy k přiřazení hmotnosti získáte lepší reprezentaci významu zemětřesení v heat mapě.

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

Ukázka Možností vrstvy heat map ukazuje, jak různé možnosti vrstvy heat map ovlivňují vykreslování. Zdrojový kód pro tuto ukázku najdete v tématu Zdrojový kód Možnosti vrstvy heat map.

Konzistentní heat mapa s možností přiblížení

Ve výchozím nastavení mají poloměry 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í a vrstva heat map vypadá jinak.

Pomocí výrazu zoom můžete škálovat poloměr pro každou úroveň přiblížení tak, 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í.

Měřítkem poloměru tak, aby se s každou úrovní přiblížení zdvojnásobil, se vytvoří heat mapa, která bude vypadat konzistentně na všech úrovních přiblížení. Chcete-li použít toto měřítko, použijte zoom s výrazem base 2 exponential interpolation s poloměrem pixelů nastaveným pro minimální úroveň přiblížení a se škálovaným poloměrem pro maximální úroveň přiblížení vypočítaným, jak 2 * Math.pow(2, minZoom - maxZoom) je znázorněno v následující ukázce. Přiblížením mapy zjistíte, jak se heat mapa škáluje s úrovní přiblížení.

Ukázka konzistentní heat mapy s možností přiblížení ukazuje, jak vytvořit heat mapu, kde poloměr každého datového bodu pokrývá stejnou fyzickou oblast na zemi, a vytváří tak 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 najdete v tématu Zdrojový kód heat mapy s konzistentním přiblížením.

Výraz zoom lze použít pouze ve step výrazech a interpolate . 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 pixelů 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 jako systém dlaždic na 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 navzájem, se seskupí jako clusterovaný bod. Počet bodů každého clusteru můžete použít jako výraz váhy pro heat mapu. Tím se 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 má poloměr clusteringu pouze několik pixelů, bude ve vykreslování malý vizuální rozdíl. Větší poloměr seskupuje více bodů do každého clusteru a zlepšuje výkon heat mapy.

Další kroky

Další informace o třídách a metodách použitý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ů pro styly založené na datech