Een heatmaplaag toevoegen aan een kaart

Een heatmap, heel soms ook wel een puntdichtheidskaart genoemd, is een type gegevensvisualisatie. Ze worden gebruikt om de dichtheid van gegevens aan te geven met behulp van een reeks kleuren en om de 'hotspots' van gegevens 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 omvatten. Dit geval resulteert waarschijnlijk in veel symbolen die overlappen. Waardoor het moeilijk is om een beter inzicht te krijgen in de gegevens. Door dezelfde gegevensset als een heatmap te visualiseren, kunt u echter eenvoudig de dichtheid en de relatieve dichtheid van elk gegevenspunt zien.

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

• Temperatuurgegevens: biedt benaderingen voor wat de temperatuur is tussen twee gegevenspunten.
• Gegevens voor ruissensoren: geeft niet alleen de intensiteit weer van de ruis waar de sensor zich in de sensor zich in heeft, maar kan ook inzicht geven in de afsipting over een afstand. Het niveau van ruis op één site is mogelijk niet hoog. Als het gebied voor de dekking van ruis van meerdere sensoren overlapt, is het mogelijk dat dit overlappende gebied hogere ruisniveaus kan ervaren. Als zodanig zou het overlappende gebied zichtbaar zijn in de heatmap.
• GPS-trace: bevat de snelheid als een kaart met gewogen hoogte, waarbij de intensiteit van elk gegevenspunt is gebaseerd op de snelheid. Deze functionaliteit biedt bijvoorbeeld een manier om te zien waar een voertuig te hardde.

Een heatmap-laag toevoegen

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

In de volgende code heeft elk heat point een radius van 10 pixels op alle zoomniveaus. Voor een betere gebruikerservaring staat de heatmap onder de labellaag. De labels blijven duidelijk zichtbaar. De gegevens in dit voorbeeld zijn afkomstig van het usgs-programma voor aardbevingen. Het is voor aanzienlijke aardbevingen die zijn opgetreden 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');

Hier is het volledige codevoorbeeld van de voorgaande code.

De heatmaplaag aanpassen

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

• radius: Definieert een pixel radius waarin elk gegevenspunt wordt 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 ruimtegebied op de kaart weergeven (bijvoorbeeld een radius 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 expressie gebruiken voor het kleuren van de heatmap, door de dichtheid visueel op te breken in reeksen die lijken op een kaart in de vorm van een contour of step radar. Deze kleurenpalet definiëren de kleuren van het minimum tot de maximale dichtheidswaarde.

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

  Hier zijn voorbeelden van kleurexpressie:

  Interpolatiekleurexpressie	Expressie met getrapte kleur
  [     'interpoleren',     ['lineair' ] ,     ['heatmap-density' ] ,     0, 'transparant',     0,01, 'paars',     0,5, '#fb00fb',     1, '#00c3ff' ]	[     'stap',     ['heatmap-density' ] ,     'transparant',     0.01, '!',     0,25, 'groen',     0,50, 'geel',     0,75, 'rood' ]

• opacity: hiermee geeft u op hoe ondoorzichtig of transparant de heatmaplaag is.

• intensity: Hiermee wordt een vermenigvuldigingscoëfficiënt toegepast op het gewicht van elk gegevenspunt om de algehele intensiteit van de heatmap te verhogen. Het veroorzaakt een verschil in het gewicht van gegevenspunten, waardoor het eenvoudiger te visualiseren is.

• weight: Standaard hebben alle gegevenspunten een gewicht van 1 en worden ze gelijkmatig gewogen. De optie gewicht fungeert als vermenigvuldiger en u kunt deze instellen als een getal of een expressie. Als een getal is ingesteld als het gewicht, is dit de equivalentie van het tweemaal plaatsen van elk gegevenspunt op de kaart. Als het gewicht bijvoorbeeld 2 is, wordt de dichtheid verdubbeld. Als u de gewichtsoptie instelt op een getal, wordt de heatmap op een vergelijkbare manier weergegeven als bij 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 bijvoorbeeld dat elk gegevenspunt een aardbeving vertegenwoordigt. De magnitudewaarde is een belangrijk metrisch gegeven voor elk gegevenspunt voor aardbevingen. Aardbevingen doen zich altijd voor, maar de meeste hebben een lage magnitude en worden niet opgemerkt. Gebruik de magnitudewaarde in een expressie om het gewicht toe te wijzen aan elk gegevenspunt. Door de magnitudewaarde 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 : U in staat stellen om de gegevensbron bij te werken.

Hier is een hulpprogramma om de verschillende opties voor heatmaplagen te testen.

Consistente inzoombare heatmap

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

Gebruik een expressie om de radius voor elk zoomniveau te schalen, zodat elk zoom gegevenspunt hetzelfde fysieke gebied van de kaart dekt. 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 wordt verdubbeld, wordt er een heatmap gemaakt die consistent is op alle zoomniveaus. Als u deze schaalbaarheid wilt toepassen, gebruikt u met een base 2-expressie, met de pixel radius ingesteld voor het minimale zoomniveau en een geschaalde radius voor het maximale zoomniveau dat is berekend, zoals wordt weergegeven in het volgende zoom exponential interpolation 2 * Math.pow(2, minZoom - maxZoom) voorbeeld. Zoom op de kaart in om te zien hoe de heatmap wordt geschaald met het zoomniveau.

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

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

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

Volgende stappen

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

Zie de volgende artikelen voor meer codevoorbeelden die u aan uw kaarten kunt toevoegen: