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 usati per rappresentare la densità dei dati usando un intervallo di colori e visualizzare i dati "aree sensibili" 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. Rendere difficile comprendere meglio i dati. Tuttavia, la visualizzazione dello stesso set di dati di una mappa termica semplifica la visualizzazione della densità e della densità relativa di ogni punto dati.

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

• Dati relativi alla temperatura: fornisce approssimazioni per la temperatura tra due punti dati.
• Dati per i sensori di disturbo: mostra non solo l'intensità del rumore in cui si trova il sensore, ma può anche fornire informazioni dettagliate sulla dissipazione a distanza. Il livello di rumore in qualsiasi 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 di altezza ponderata, in cui l'intensità di ogni punto dati si basa sulla velocità. Ad esempio, questa funzionalità consente di vedere dove un veicolo stava accelerando.

Suggerimento

Per impostazione predefinita, i livelli mappa termica eseguono il rendering delle coordinate di tutte le geometrie in un'origine dati. Per limitare il livello in modo che esegua solo il rendering delle caratteristiche geometriche dei punti, impostare la filter proprietà del livello su ['==', ['geometry-type'], 'Point']. Se si desidera includere anche le funzionalità di MultiPoint, impostare la filter proprietà del livello su ['any', ['==', ['geometry-type'], 'Point'], ['==', ['geometry-type'], 'MultiPoint']].

Aggiungere un livello per le mappe termiche

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

Nel codice seguente ogni punto di calore ha un raggio di 10 pixel a tutti i livelli di zoom. Per garantire un'esperienza utente migliore, la mappa termica si trova sotto il livello etichetta. Le etichette rimangono chiaramente visibili. I dati in questo esempio provengono dal programma USGS Earthquake Hazards. 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 Simple Heat Map Layer illustra come creare una semplice mappa termica da un set di dati di caratteristiche punto. Per il codice sorgente per questo esempio, vedere Codice sorgente Simple Heat Map Layer.

Personalizzare il livello mappa termica

Nell'esempio precedente viene personalizzata la mappa termica impostando le opzioni di radius e opacità. Il livello mappa termica 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. Usando un'espressione, è possibile ridimensionare il raggio in base al livello di zoom e rappresentare un'area spaziale coerente sulla mappa (ad esempio, un raggio di 5 miglia).

• color: specifica la colorazione della 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 del 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 sul heatmap-density valore. Il colore dell'area in cui non sono presenti dati è definito in corrispondenza dell'indice 0 dell'espressione "Interpolazione" o il colore predefinito di un'espressione "Rienpped". È 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 con rientri
  [     'interpolate',     ['lineare'],     ['heatmap-density'],     0, 'transparent',     0.01, 'purple',     0.5, '#fb00fb',     1, '#00c3ff' ]	[     'step',     ['heatmap-density'],     'transparent',     0.01, 'navy',     0.25, "verde",     0,50, 'giallo',     0,75, 'rosso' ]

• opacity: specifica la modalità di opacità o trasparente del livello mappa termica.

• intensity: applica un moltiplicatore al peso di ogni punto dati per aumentare l'intensità complessiva della mappa termica. Causa una differenza nel peso dei punti dati, rendendo più semplice la visualizzazione.

• weight: per impostazione predefinita, tutti i punti dati hanno un peso pari a 1 e vengono ponderati equamente. L'opzione weight funge da moltiplicatore ed è possibile impostarla come numero o espressione. Se un numero viene impostato come peso, è l'equivalenza di 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 si usa un'espressione, il peso di ogni punto dati può essere basato sulle proprietà di ogni punto dati. Si supponga, ad esempio, che ogni punto dati rappresenti un terremoto. Il valore di grandezza è stata una metrica importante per ogni punto dati del terremoto. I terremoti si verificano sempre, ma la maggior parte ha una grandezza bassa e non viene notato. 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 del significato dei terremoti all'interno della mappa termica.

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

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

Mappa termica con zoom 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 copre 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 verticalmente e orizzontalmente del livello di zoom precedente.

Ridimensionando il raggio in modo che venga raddoppiato con ogni livello di zoom, viene creata una mappa termica coerente su tutti i livelli di zoom. Per applicare questa scalabilità, usare zoom con un'espressione base 2 exponential interpolation , con il raggio in pixel impostato per il livello di zoom minimo e un raggio ridimensionato per il livello di zoom massimo calcolato come 2 * Math.pow(2, minZoom - maxZoom) illustrato nell'esempio seguente. Ingrandire la mappa per vedere come viene ridimensionata la 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 a terra, 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 verticalmente e orizzontalmente del livello di zoom precedente. Raddoppiando il raggio con ogni livello di zoom viene creata una mappa termica coerente in tutti i livelli di zoom. Per il codice sorgente per questo esempio, vedere Codice sorgente della mappa termica con zoom coerente.

L'espressione zoom può essere usata solo nelle step espressioni 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 ridimensionare tra questi valori lo stesso modo in cui funziona il sistema di tiling nella mappa.

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

Suggerimento

Quando si abilita il clustering nell'origine dati, i punti vicini all'uno all'altro vengono raggruppati come punto cluster. È possibile usare il conteggio dei punti di ogni cluster come espressione di peso per la mappa termica. Ciò può ridurre significativamente il numero di punti da eseguire. Il conteggio dei punti di un cluster viene archiviato in una point_count proprietà della funzionalità del punto:

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

Se il raggio di clustering è solo un paio di pixel, nel rendering è presente una piccola differenza visiva. Un raggio maggiore 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