Een heatmaplaag toevoegen aan een kaart

  • Artikel

Een heatmap, heel soms ook wel een puntdichtheidskaart genoemd, is een type gegevensvisualisatie. Ze worden gebruikt om de dichtheid van gegevens weer te geven met behulp van een kleurenbereik en om de gegevens 'hotspots' op een kaart weer te geven. Heatmaps zijn een uitstekende manier om gegevenssets met een groot aantal punten weer te geven.

Het weergeven van tienduizenden punten als symbolen kan het grootste deel van het kaartgebied beslaan. Dit geval resulteert waarschijnlijk in veel symbolen die elkaar overlappen. Waardoor het moeilijk is om een beter inzicht te krijgen in de gegevens. Als u dezelfde gegevensset echter visualiseert als een heatmap, kunt u gemakkelijk de dichtheid en de relatieve dichtheid van elk gegevenspunt zien.

U kunt heatmaps gebruiken in veel verschillende scenario's, waaronder:

  • Temperatuurgegevens: biedt benaderingen voor de temperatuur tussen twee gegevenspunten.
  • Gegevens voor ruissensoren: toont niet alleen de intensiteit van de ruis waar de sensor zich bevindt, maar kan ook inzicht geven in de dissipatie over een afstand. Het geluidsniveau op één locatie is mogelijk niet hoog. Als het ruisdekkingsgebied van meerdere sensoren overlapt, is het mogelijk dat dit overlappende gebied hogere geluidsniveaus ondervindt. Als zodanig zou het overlappende gebied zichtbaar zijn in de heatmap.
  • GPS-trace: Bevat de snelheid als een gewogen hoogtekaart, waarbij de intensiteit van elk gegevenspunt is gebaseerd op de snelheid. Deze functionaliteit biedt bijvoorbeeld een manier om te zien waar een voertuig te snel reed.

Tip

Heatmaplagen geven standaard de coördinaten van alle geometrieën in een gegevensbron weer. Als u de laag wilt beperken zodat deze alleen puntengeometriefuncties weergeeft, stelt u de filter eigenschap van de laag in op ['==', ['geometry-type'], 'Point']. Als u ook MultiPoint-functies wilt opnemen, stelt u de filter eigenschap van de laag in op ['any', ['==', ['geometry-type'], 'Point'], ['==', ['geometry-type'], 'MultiPoint']].


Een heatmap-laag toevoegen

Als u een gegevensbron met punten wilt weergeven als een heatmap, geeft u de gegevensbron door aan een exemplaar van de HeatMapLayer klasse en voegt u deze toe aan de kaart.

In de volgende code heeft elk warmtepunt een straal van 10 pixels op alle zoomniveaus. Voor een betere gebruikerservaring bevindt de heatmap zich onder de labellaag. De labels blijven duidelijk zichtbaar. De gegevens in dit voorbeeld zijn afkomstig van het USGS Earthquake Hazards Program. Het is voor aanzienlijke aardbevingen die hebben plaatsgevonden in de afgelopen 30 dagen.

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

In het voorbeeld Simple Heat Map Layer ziet u hoe u een eenvoudige heatmap maakt op basis van een gegevensset met puntfuncties. Zie Simple Heat Map Layer source code (Simple Heat Map Layer source code) voor de broncode voor dit voorbeeld.

Schermopname van een kaart met een heatmap.

De heatmaplaag aanpassen

In het vorige voorbeeld is de heatmap aangepast door de opties voor radius en dekking in te stellen. De heatmaplaag biedt verschillende opties voor aanpassing, waaronder:

  • radius: Definieert een pixelradius waarin elk gegevenspunt moet worden weergegeven. U kunt de radius instellen als een vast getal of als een expressie. Met behulp van een expressie kunt u de radius schalen op basis van het zoomniveau en een consistent ruimtelijk gebied op de kaart weergeven (bijvoorbeeld een straal van 5 mijl).

  • color: Hiermee geeft u op hoe de heatmap wordt gekleurd. Een kleurovergang is een veelvoorkomende functie van heatmaps. U kunt het effect bereiken met een interpolate expressie. U kunt ook een step expressie gebruiken voor het inkleuren van de heatmap, waarbij de dichtheid visueel wordt opgesplitst in bereiken die lijken op een contour- of radarstijlkaart. Deze kleurenpaletten definiëren de kleuren van de minimum- tot de maximale dichtheidswaarde.

    U geeft kleurwaarden voor heatmaps op als expressie voor de heatmap-density waarde. De kleur van het gebied waar geen gegevens zijn, wordt gedefinieerd op index 0 van de expressie 'Interpolatie', of de standaardkleur van een 'Getrapte' expressie. U kunt deze waarde gebruiken om een achtergrondkleur te definiëren. Deze waarde wordt vaak ingesteld op transparant of een semitransparante zwarte waarde.

    Hier volgen enkele voorbeelden van kleurexpressies:

    Interpolatiekleurexpressie Getrapte kleurexpressie
    [
        "interpolate",
        ['linear'],
        ['heatmap-density'],
        0, "transparant",
        0,01, 'paars',
        0.5, '#fb00fb',
        1, '#00c3ff'
    ]    		 [
        'stap',
        ['heatmap-density'],
        "transparant",
        0.01, 'navy',
        0,25, 'groen',
        0,50, 'geel',
        0,75, 'rood'
    ]

  • opacity: Geeft aan hoe ondoorzichtig of transparant de heatmaplaag is.

  • intensity: Hiermee wordt een vermenigvuldiger toegepast op het gewicht van elk gegevenspunt om de algehele intensiteit van de heatmap te verhogen. Dit veroorzaakt een verschil in het gewicht van gegevenspunten, waardoor het gemakkelijker te visualiseren is.

  • weight: standaard hebben alle gegevenspunten een gewicht van 1 en worden ze gelijk gewogen. De optie gewicht fungeert als een vermenigvuldiger en u kunt deze instellen als een getal of een expressie. Als een getal wordt ingesteld als het gewicht, is dit de equivalentie van het tweemaal plaatsen van elk gegevenspunt op de kaart. Als het gewicht bijvoorbeeld 2 is, verdubbelt de dichtheid. Als u de optie gewicht instelt op een getal, wordt de heatmap op een vergelijkbare manier weergegeven als het gebruik van de intensiteitsoptie.

    Als u echter een expressie gebruikt, kan het gewicht van elk gegevenspunt worden gebaseerd op de eigenschappen van elk gegevenspunt. Stel dat elk gegevenspunt een aardbeving vertegenwoordigt. De waarde van de grootte is een belangrijke metrische waarde voor elk aardbevingsgegevenspunt. Aardbevingen gebeuren de hele tijd, maar de meeste hebben een lage omvang en worden niet opgemerkt. Gebruik de waarde voor de grootte in een expressie om het gewicht toe te wijzen aan elk gegevenspunt. Door de groottewaarde te gebruiken om het gewicht toe te wijzen, krijgt u een betere weergave van het belang van aardbevingen in de heatmap.

  • source en source-layer: hiermee kunt u de gegevensbron bijwerken.

In het voorbeeld van opties voor heatmaplagen ziet u hoe de verschillende opties van de heatmaplaag van invloed zijn op de weergave. Zie Broncode van heatmaplaagopties voor de broncode voor dit voorbeeld.

Schermopname van een kaart met een heatmap en een deelvenster met bewerkbare instellingen die laten zien hoe de verschillende opties van de heatmaplaag de weergave beïnvloeden.

Consistente inzoombare heatmap

Standaard hebben de radii van gegevenspunten die worden weergegeven in de heatmaplaag een vaste pixelradius voor alle zoomniveaus. Wanneer u op de kaart inzoomt, worden de gegevens samengevoegd en ziet de heatmaplaag er anders uit.

Gebruik een zoom expressie om de radius voor elk zoomniveau te schalen, zodat elk gegevenspunt hetzelfde fysieke gebied van de kaart beslaat. Met deze expressie ziet de heatmaplaag er statischer en consistenter uit. Elk zoomniveau van de kaart heeft twee keer zoveel pixels verticaal en horizontaal als het vorige zoomniveau.

Als u de radius zo schaalt dat deze met elk zoomniveau verdubbelt, wordt er een heatmap gemaakt die er consistent uitziet op alle zoomniveaus. Als u deze schaal wilt toepassen, gebruikt zoom u met een base 2-expressie exponential interpolation , waarbij de pixelradius is ingesteld voor het minimale zoomniveau en een geschaalde radius voor het maximale zoomniveau berekend zoals 2 * Math.pow(2, minZoom - maxZoom) wordt weergegeven in het volgende voorbeeld. Zoom in op de kaart om te zien hoe de heatmap wordt geschaald met het zoomniveau.

In het voorbeeld van consistent inzoombare heatmap ziet u hoe u een heatmap maakt waarbij de radius van elk gegevenspunt hetzelfde fysieke gebied op de grond beslaat, waardoor een consistentere gebruikerservaring ontstaat bij het inzoomen op de kaart. De heatmap in dit voorbeeld schaalt consistent tussen zoomniveaus 10 en 22. Elk zoomniveau van de kaart heeft twee keer zoveel pixels verticaal en horizontaal als het vorige zoomniveau. Als u de radius met elk zoomniveau verdubbelt, wordt er een heatmap gemaakt die er consistent uitziet op alle zoomniveaus. Zie Consistente inzoombare heatmap-broncode voor de broncode voor dit voorbeeld.

Schermopname van een kaart met een heatmap die gebruikmaakt van een zoomexpressie waarmee de radius voor elk zoomniveau wordt geschaald.

De zoom expressie kan alleen worden gebruikt in step expressies en interpolate . De volgende expressie kan worden gebruikt om een straal in meters te benaderen. Deze expressie maakt gebruik van een tijdelijke aanduiding radiusMeters, die u moet vervangen door de gewenste radius. Deze expressie berekent de geschatte pixelradius voor een zoomniveau op de evenaar voor zoomniveaus 0 en 24 en gebruikt een exponential interpolation expressie om tussen deze waarden te schalen op dezelfde manier als het tegelsysteem in de kaart werkt.

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

Tip

Wanneer u clustering inschakelt op de gegevensbron, worden punten die dicht bij elkaar liggen, gegroepeerd als een geclusterd punt. U kunt het aantal punten van elk cluster gebruiken als gewichtsexpressie voor de heatmap. Dit kan het aantal punten dat moet worden weergegeven, aanzienlijk verminderen. Het puntentelling van een cluster wordt opgeslagen in een point_count eigenschap van de puntfunctie:

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

Als de clusterradius slechts enkele pixels is, is er een klein visueel verschil in de weergave. Met een grotere radius worden meer punten in elk cluster gegroepeerd en worden de prestaties van de heatmap verbeterd.

Volgende stappen

Meer informatie over de klassen en methoden die worden gebruikt in dit artikel:

HeatMapLayer

HeatMapLayerOptions

Zie de volgende artikelen voor meer codevoorbeelden om aan uw kaarten toe te voegen:

Een gegevensbron maken

Gegevensgestuurde stijlexpressies gebruiken