Hőtérkép-réteg hozzáadása térképhez

A hőtérképek, más néven pontsűrűség-térképek az adatvizualizációk egy típusa. Ezek az adatok sűrűségét jelölik egy színtartomány használatával, és megjelenítik a térképen a "gyakori pontok" adatokat. A hőtérképek kiválóan alkalmasak nagy számú ponttal rendelkező adathalmazok renderelésére.

Ha szimbólumként több tízezer pontot jelenít meg, az a térképterület nagy részét lefedi. Ez az eset valószínűleg számos szimbólum átfedését eredményezi. Megnehezíti az adatok jobb megértését. Ha azonban ugyanazt az adathalmazt vizualizálja, mint egy hőtérkép, könnyen láthatóvá válik az egyes adatpont sűrűsége és relatív sűrűsége.

A hőtérképek számos különböző forgatókönyvben használhatók, például:

• Hőmérsékleti adatok: Közelítéseket biztosít arról, hogy mi a hőmérséklet két adatpont között.
• Zajérzékelők adatai: Nem csak a zaj intenzitását jeleníti meg, ahol az érzékelő található, hanem betekintést is nyújt a távolságon keresztüli disszipációba. Előfordulhat, hogy egy helyen nem magas a zajszint. Ha több érzékelő zajlefedettségi területe átfedésben van, lehetséges, hogy ez az átfedésben lévő terület magasabb zajszintet tapasztal. Így az átfedésben lévő terület látható lenne a hőtérképen.
• GPS-nyomkövetés: A sebességet súlyozott magassági térképként tartalmazza, ahol az egyes adatpont intenzitása a sebességen alapul. Ez a funkció például lehetővé teszi a jármű sebességének megtekintését.

Hőtérképréteg hozzáadása

A pontok adatforrásának hőtérképként való megjelenítéséhez adja át az adatforrást az HeatMapLayer osztály egy példányába, és adja hozzá a térképhez.

Az alábbi kódban minden hőpontnak 10 képpontos sugara van minden nagyítási szinten. A jobb felhasználói élmény érdekében a hőtérkép a címkeréteg alatt található. A címkék jól láthatóak maradnak. A mintában szereplő adatok az USGS Földrengésveszély programból származnak. Ez a jelentős földrengések, hogy történt az elmúlt 30 napban.

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

Az Egyszerű hőtérkép réteg mintája bemutatja, hogyan hozhat létre egyszerű hőtérképet pontfunkciók adatkészletéből. A minta forráskódját a Simple Heat Map Layer forráskódja ismerteti.

A hőtérképréteg testreszabása

Az előző példa a sugár- és az átlátszatlansági beállítások beállításával testre szabta a hőtérképet. A hőtérkép-réteg számos testreszabási lehetőséget kínál, többek között a következőket:

• radius: Egy képpont sugarát határozza meg, amelyben az egyes adatpontokat rendereli. A sugarat beállíthatja rögzített számként vagy kifejezésként. Egy kifejezés használatával skálázhatja a sugarat a nagyítási szint alapján, és egységes térbeli területet jelölhet a térképen (például egy 5 mérföldes sugarat).

• color: A hőtérkép színezésének módját adja meg. A színátmenet a hőtérképek gyakori jellemzője. Az effektust egy interpolate kifejezéssel érheti el. A hőtérkép színezésére is használható step kifejezés, amely vizuálisan felbontja a sűrűséget olyan tartományokra, amelyek hasonlítanak egy körvonal- vagy sugárstílus-térképre. Ezek a színpaletták határozzák meg a színeket a minimálistól a maximális sűrűségértékig.

  Az érték kifejezéseként színértékeket adhat meg a heatmap-density hőtérképekhez. Annak a területnek a színe, ahol nincsenek adatok, az "Interpoláció" kifejezés 0. indexében vagy egy "Lépcsőzetes" kifejezés alapértelmezett színében van definiálva. Ezzel az értékkel háttérszínt határozhat meg. Ez az érték gyakran átlátszóra vagy félig átlátszó feketére van állítva.

  Íme néhány példa a színkifejezésekre:

  Interpolációs színkifejezés	Lépcsőzetes színkifejezés
  [     "interpolátum",     [lineáris],     "hőtérkép sűrűsége",     0, "transzparens",     0.01, "lila",     0.5, "#fb00fb",     1, "#00c3ff" ]	[     "lépés",     "hőtérkép sűrűsége",     "transzparens",     0.01, "haditengerészet",     0.25, "zöld",     0.50, "sárga",     0,75, "piros" ]

• opacity: Azt határozza meg, hogy a hőtérkép rétege átlátszatlan vagy átlátszó legyen.

• intensity: Szorzót alkalmaz az egyes adatpont súlyára a hőtérkép általános intenzitásának növelése érdekében. Ez különbséget okoz az adatpontok súlyában, így könnyebben megjeleníthetők.

• weight: Alapértelmezés szerint az összes adatpont súlya 1, és a súlyozásuk egyenlő. A súlyozási beállítás szorzóként működik, és megadható számként vagy kifejezésként. Ha egy szám súlyként van beállítva, az egyenértékű azzal, hogy az egyes adatpontokat kétszer helyezi el a térképen. Ha például a súly 2, akkor a sűrűség megduplázódik. A súlyozási beállítás számra állítása a hőtérképet az intenzitási beállításhoz hasonlóan jeleníti meg.

  Ha azonban kifejezést használ, az egyes adatpontok súlya az egyes adatpont tulajdonságain alapulhat. Tegyük fel például, hogy minden adatpont földrengést jelöl. A magnitúdó értéke fontos metrika volt minden földrengési adatponthoz. A földrengések mindig előfordulnak, de a legtöbbjük alacsony magnitúdójú, és nem észlelik. A kifejezésben szereplő nagyságérték használatával rendelje hozzá a súlyt az egyes adatpontokhoz. Ha a súlyt a magnitúdó értékével rendeli hozzá, jobban ábrázolja a földrengések jelentőségét a hőtérképen.

• source és source-layer: Lehetővé teszi az adatforrás frissítését.

A Hőtérkép réteg beállításai minta azt mutatja be, hogy a hőtérképréteg különböző lehetőségei hogyan befolyásolják a renderelést. A minta forráskódját lásd a Hőtérkép réteg beállításai forráskódban.

Konzisztens nagyítható hőtérkép

Alapértelmezés szerint a hőtérkép-rétegben renderelt adatpontok sugara rögzített képpont sugarú az összes nagyítási szinthez. A térkép nagyítása során az adatok összeaggadnak, és a hőtérkép rétege másként néz ki.

zoom Egy kifejezéssel skálázhatja az egyes nagyítási szintek sugarát, így minden adatpont a térkép ugyanazon fizikai területét fedi le. Ez a kifejezés statikusabbá és konzisztensebbé teszi a hőtérképréteget. A térkép minden nagyítási szintje kétszer annyi képponttal rendelkezik függőlegesen és vízszintesen, mint az előző nagyítási szint.

Ha úgy méretezi a sugarat, hogy az minden nagyítási szinttel duplázódjon, egy hőtérképet hoz létre, amely minden nagyítási szinten konzisztensnek tűnik. A skálázás alkalmazásához használjon zoom egy 2 exponential interpolation . alapkifejezést, amelyben a képpont sugara a minimális nagyítási szinthez van beállítva, és egy skálázott sugár a maximális nagyítási szinthez, ahogyan 2 * Math.pow(2, minZoom - maxZoom) az az alábbi példában látható. A térkép nagyításával megtekintheti, hogy a hőtérkép hogyan skálázható a nagyítási szinttel.

A konzisztens nagyítható hőtérkép-minta bemutatja, hogyan hozhat létre olyan hőtérképet, amelyen az egyes adatpont sugarai ugyanazt a fizikai területet fedik le a földön, így egységesebb felhasználói élményt hozhat létre a térkép nagyítása során. A minta hőtérképe következetesen skálázható a 10 és 22 közötti nagyítási szintek között. A térkép minden nagyítási szintje kétszer annyi képponttal rendelkezik függőlegesen és vízszintesen, mint az előző nagyítási szint. A sugár minden nagyítási szinttel való megduplázásával egy olyan hőtérkép jön létre, amely minden nagyítási szinten konzisztensnek tűnik. A minta forráskódját a Konzisztens nagyítható hőtérkép forráskódja című témakörben találhatja meg.

A zoom kifejezés csak kifejezésekben és kifejezésekben interpolate step használható. Az alábbi kifejezés egy sugár méterben való közelítésére használható. Ez a kifejezés egy helyőrzőt radiusMetershasznál, amelyet a kívánt sugárra kell cserélnie. Ez a kifejezés kiszámítja a 0 és 24 nagyítási szinthez tartozó nagyítási szint hozzávetőleges képpont sugarát, és egy exponential interpolation kifejezéssel skálázza ezeket az értékeket ugyanúgy, mint a térképen lévő burkolórendszer.

[
    'interpolate',
    ['exponential', 2],
    ['zoom'],
    0, ['*', radiusMeters, 0.000012776039596366526],
    24, ['*', radiusMeters, 214.34637593279402]
]

var layer = new atlas.layer.HeatMapLayer(datasource, null, {
   weight: ['get', 'point_count']
});

Következő lépések

További információ a cikkben használt osztályokról és módszerekről:

A térképekhez hozzáadandó további kód példákért tekintse meg az alábbi cikkeket: