Aggiungere un livello mappa termica a una mappa

Le mappe termiche, note anche come mappe di densità dei punti, sono un tipo di visualizzazione dei dati. Vengono usate per rappresentare la densità dei dati mediante una gamma di colori e mostrano gli "hot spot" dei dati su una mappa. Le mappe termiche sono un ottimo modo per eseguire il rendering dei set di dati con un numero elevato di punti.

Il rendering di decine di migliaia di punti come simboli può coprire la maggior parte dell'area della mappa. In questo caso è probabile che molti simboli si sovrappongano. In questo modo risulta più difficile comprendere meglio i dati. Tuttavia, la visualizzazione dello stesso set di dati di una mappa termica semplifica la visualizzazione della densità, inclusa quella relativa di ogni punto dati.

È possibile usare mappe termiche in molti scenari diversi, tra cui:

• Dati di temperatura: fornisce approssimazioni per la temperatura compresa tra due punti dati.
• Dati per i sensori di rumore: mostra non solo l'intensità del rumore in cui si trova il sensore, ma può anche fornire informazioni dettagliate sulla dissipazione lungo la distanza. Il livello di rumore in un sito potrebbe non essere elevato. Se l'area di copertura del rumore di più sensori si sovrappone, è possibile che questa area sovrapposta possa riscontrare livelli di rumore più elevati. Di conseguenza, l'area sovrapposta sarebbe visibile nella mappa termica.
• Traccia GPS: include la velocità come mappa dell'altezza ponderata, in cui l'intensità di ogni punto dati si basa sulla velocità. Ad esempio, questa funzionalità offre un modo per vedere dove un veicolo era in eccesso di velocità.

Suggerimento

Per impostazione predefinita, i livelli della mappa termica eseguiranno il rendering delle coordinate di tutte le geometrie in un'origine dati. Per limitare il livello e poter eseguire il rendering solo delle funzionalità della geometria dei punti, impostare la proprietà filter del livello su ['==', ['geometry-type'], 'Point']. Per includere anche le funzionalità MultiPoint, impostare la proprietà filter del livello su ['any', ['==', ['geometry-type'], 'Point'], ['==', ['geometry-type'], 'MultiPoint']].

Aggiungere un livello mappa termica

Per eseguire il rendering di un'origine dati di punti come una mappa termica, è sufficiente trasferire l'origine dati in un'istanza della classe HeatMapLayer e aggiungerla alla mappa.

Nel codice seguente, ogni punto di calore ha un raggio di 10 pixel in tutti i livelli di zoom. Per garantire un'esperienza utente migliore, la mappa termica è al di sotto del livello etichetta. Le etichette rimangono chiaramente visibili. I dati in questo esempio provengono dall'USGS Earthquake Hazards Program. Si tratta di terremoti significativi che si sono verificati negli ultimi 30 giorni.

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

L'esempio Livello mappa termica semplice illustra come creare una mappa termica semplice da un set di dati di caratteristiche punto. Per il codice sorgente per questo esempio, vedere Codice sorgente del livello mappa termica semplice.

Personalizzare il livello per le mappe termiche

Nell'esempio precedente viene personalizzata la mappa termica impostando le opzioni di radius e opacità. Il livello per le mappe termiche offre diverse opzioni per la personalizzazione, tra cui:

• radius: definisce un raggio di pixel in cui eseguire il rendering di ogni punto dati. È possibile impostare il raggio come numero fisso o come espressione. Mediante l'uso di un'espressione è possibile ridimensionare il raggio in base al livello di zoom tramite la rappresentazione di un'area spaziale coerente sulla mappa (ad esempio, un raggio di 8 km circa).

• color: specifica come viene colorata la mappa termica. Una sfumatura di colore è una caratteristica comune delle mappe termiche. È possibile ottenere l'effetto con un'espressione interpolate. È anche possibile usare un'espressione step per colorare la mappa termica, suddividendo visivamente la densità in intervalli simili a una mappa dello stile di contorno o radar. Queste tavolozze di colori definiscono i colori dal valore di densità minima a quello massimo.

  Specificare i valori di colore per le mappe termiche come espressione nel valore heatmap-density. Il colore dell'area in cui non sono presenti dati è definito in corrispondenza dell'indice 0 dell'espressione "Interpolazione" o come il colore predefinito di un'espressione "Con rientri". È possibile usare questo valore per definire un colore di sfondo. Spesso, questo valore è impostato su trasparente o su un nero semitrasparente.

  Ecco alcuni esempi di espressioni di colore:

  Espressione colore interpolazione	Espressione colore graduale
  [     'interpolate',     ['linear'],     ['heatmap-density'],     0, 'transparent',     0.01, 'purple',     0.5, '#fb00fb',     1, '#00c3ff' ]	[     'step',     ['heatmap-density'],     'transparent',     0.01, 'navy',     0.25, 'green',     0.50, 'yellow',     0.75, 'red' ]

• opacity: specifica quanto opaco o trasparente è il livello della mappa termica.

• intensity Applica un moltiplicatore al peso di ciascun punto dati per aumentare l'intensità complessiva della mappa termica. Causa una differenza nel peso dei punti dati, semplificando la visualizzazione.

• weight: per impostazione predefinita, tutti i punti dati hanno un peso pari a 1 e vengono ponderati equamente. L'opzione peso funge da moltiplicatore e può essere impostata come numero o espressione. Se un numero è impostato come peso, l'operazione equivale a posizionare ogni punto dati sulla mappa due volte. Ad esempio, se il peso è 2, la densità raddoppia. Impostando l'opzione peso su un numero, la mappa termica viene renderizzata in modo simile all'utilizzo dell'opzione intensità.

  Tuttavia, se viene usata un'espressione, il peso di ogni punto dati può basarsi sulle proprietà di ogni punto dati. Si supponga, ad esempio, che ogni punto dati rappresenti un terremoto. Il valore di grandezza è una metrica importante per ogni punto dati del terremoto. I terremoti si verificano continuamente, ma la maggior parte di essi hanno una bassa magnitudo e non vengono nemmeno percepiti. Usare il valore di grandezza in un'espressione per assegnare il peso a ogni punto dati. Usando il valore di grandezza per assegnare il peso, si ottiene una rappresentazione migliore della rilevanza dei terremoti all'interno della mappa termica.

• source e source-layer: consentono di aggiornare l'origine dati.

L'esempio Opzioni del livello della mappa termica mostra come le diverse opzioni del livello mappa termica influiscono sul rendering. Per il codice sorgente per questo esempio, vedere Codice sorgente delle opzioni del livello mappa termica.

Mappa termica ridimensionabile coerente

Per impostazione predefinita, i raggi dei punti dati di cui viene eseguito il rendering nel livello mappa termica hanno un raggio di pixel fisso per tutti i livelli di zoom. Quando si esegue lo zoom della mappa, i dati vengono aggregati insieme e il livello mappa termica ha un aspetto diverso.

Usare un'espressione zoom per ridimensionare il raggio per ogni livello di zoom, in modo che ogni punto dati copra la stessa area fisica della mappa. Questa espressione rende il livello mappa termica più statico e coerente. Ogni livello di zoom della mappa ha il doppio dei pixel verticali e orizzontali del livello di zoom precedente.

Ridimensionare il raggio in modo che raddoppi con ogni livello di zoom e che crei una mappa termica che abbia un aspetto coerente su tutti i livelli di zoom. Per applicare questa scalabilità, usare zoom con un'espressione base 2 exponential interpolation, con il raggio del pixel impostato per il livello di zoom minimo e un raggio scalato per il livello di zoom massimo calcolato come 2 * Math.pow(2, minZoom - maxZoom), come illustrato nell'esempio seguente. Ingrandire la mappa per verificare la scalabilità della mappa termica con il livello di zoom.

L'esempio Mappa termica con zoom coerente mostra come creare una mappa termica in cui il raggio di ogni punto dati copre la stessa area fisica sul terreno, creando un'esperienza utente più coerente durante lo zoom della mappa. La mappa termica in questo esempio viene ridimensionata in modo coerente tra i livelli di zoom 10 e 22. Ogni livello di zoom della mappa ha il doppio dei pixel verticali e orizzontali del livello di zoom precedente. Il raddoppio del raggio con ogni livello di zoom crea una mappa termica coerente in tutti i livelli di zoom. Per il codice sorgente per questo campione, vedere Codice sorgente della mappa termica con zoom coerente.

L'espressione zoom può essere usata solo nelle espressioni step e interpolate. L'espressione seguente può essere usata per approssimare un raggio in metri. Questa espressione usa un segnaposto radiusMeters, che deve essere sostituito con il raggio desiderato. Questa espressione calcola il raggio di pixel approssimativo per un livello di zoom all'equatore per i livelli di zoom 0 e 24 e usa un'espressione exponential interpolation per scalare tra questi valori con lo stesso funzionamento del sistema di associazione nella mappa.

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

Suggerimento

Abilitando il clustering sull'origine dati, i punti che sono vicini l'uno all'altro sono raggruppati insieme come punto in cluster. È possibile usare il numero di punti di ogni cluster come espressione di peso per la mappa termica. Ciò può ridurre significativamente il numero di punti di cui eseguire il rendering. Il conteggio dei punti di un cluster viene archiviato in una proprietà point_count della funzionalità punto:

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

Se il raggio del clustering è di pochi pixel, il rendering presenta una piccola differenza visiva. Un raggio più grande raggruppa più punti in ogni cluster e migliora le prestazioni della mappa termica.

Passaggi successivi

Per altre informazioni sulle classi e sui metodi usati in questo articolo, vedere:

HeatMapLayer

HeatMapLayerOptions

Per altri esempi di codice da aggiungere alle mappe, vedere gli articoli seguenti:

Creare un'origine dati

Usare espressioni di stile basate sui dati