Livello mappa termica

Seleziona la piattaforma: Android iOS JavaScript
  1. Panoramica
  2. Carica la libreria di visualizzazione
  3. Aggiungere punti dati ponderati
  4. Personalizzare un livello mappa termica

Il livello mappa termica fornisce il rendering lato client delle mappe termiche.

Panoramica

Una mappa termica è una visualizzazione utilizzata per rappresentare l'intensità dei dati in punti geografici. Quando il livello mappa termica è attivato, sulla mappa viene visualizzato un overlay colorato. Per impostazione predefinita, le aree di intensità maggiore sono colorate di rosso, mentre quelle di intensità inferiore sono verdi.

Carica la libreria di visualizzazione

Il livello mappa termica fa parte della libreria google.maps.visualization e non viene caricato per impostazione predefinita. Le classi di visualizzazione sono una libreria autonoma, distinta dal codice principale dell'API Maps JavaScript. Per utilizzare le funzionalità contenute in questa libreria, devi prima caricarla utilizzando il parametro libraries nell'URL di bootstrap dell'API Maps JavaScript:

<script async
    src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&loading=async&libraries=visualization&callback=initMap">
</script>

Aggiungere un livello mappa termica

Per aggiungere un livello di mappa di calore, devi prima creare un nuovo oggetto HeatmapLayer e fornirgli alcuni dati geografici sotto forma di array o di oggetto MVCArray[]. I dati possono essere un oggetto LatLng o un oggetto WeightedLocation. Dopo aver creato l'istanza dell'oggetto HeatmapLayer, aggiungilo alla mappa chiamando il metodo setMap().

L'esempio seguente aggiunge 14 punti dati a una mappa di San Francisco.

/* Data points defined as an array of LatLng objects */
var heatmapData = [
  new google.maps.LatLng(37.782, -122.447),
  new google.maps.LatLng(37.782, -122.445),
  new google.maps.LatLng(37.782, -122.443),
  new google.maps.LatLng(37.782, -122.441),
  new google.maps.LatLng(37.782, -122.439),
  new google.maps.LatLng(37.782, -122.437),
  new google.maps.LatLng(37.782, -122.435),
  new google.maps.LatLng(37.785, -122.447),
  new google.maps.LatLng(37.785, -122.445),
  new google.maps.LatLng(37.785, -122.443),
  new google.maps.LatLng(37.785, -122.441),
  new google.maps.LatLng(37.785, -122.439),
  new google.maps.LatLng(37.785, -122.437),
  new google.maps.LatLng(37.785, -122.435)
];

var sanFrancisco = new google.maps.LatLng(37.774546, -122.433523);

map = new google.maps.Map(document.getElementById('map'), {
  center: sanFrancisco,
  zoom: 13,
  mapTypeId: 'satellite'
});

var heatmap = new google.maps.visualization.HeatmapLayer({
  data: heatmapData
});
heatmap.setMap(map);

Aggiungere punti dati ponderati

Una mappa di calore può visualizzare oggetti LatLng o WeightedLocation oppure una combinazione di entrambi. Entrambi gli oggetti rappresentano un singolo punto dati su una mappa, ma un oggetto WeightedLocation consente inoltre di specificare un peso per quel punto dati. L'applicazione di un peso a un punto dati farà sì che WeightedLocation venga visualizzato con un'intensità maggiore rispetto a un semplice oggetto LatLng. Il peso è una scala lineare in cui ogni oggetto LatLng ha un peso implicito di 1. L'aggiunta di un singolo WeightedLocation di {location: new google.maps.LatLng(37.782, -122.441), weight: 3} avrà lo stesso effetto dell'aggiunta di google.maps.LatLng(37.782, -122.441) tre volte. Puoi combinare oggetti weightedLocation e LatLng in un unico array.

L'utilizzo di un oggetto WeightedLocation al posto di un LatLng può essere utile quando:

  • Aggiunta di grandi quantità di dati in un'unica posizione. Il rendering di un singolo WeightedLocation oggetto con un peso di 1000 sarà più veloce rispetto al rendering di 1000 oggetti LatLng.
  • Applicazione di un'enfasi ai dati in base a valori arbitrari. Ad esempio, puoi utilizzare oggetti LatLng per tracciare i dati relativi ai terremoti, ma potresti volere utilizzare un WeightedLocation per misurare l'intensità di ogni terremoto sulla scala Richter.
/* Data points defined as a mixture of WeightedLocation and LatLng objects */
var heatMapData = [
  {location: new google.maps.LatLng(37.782, -122.447), weight: 0.5},
  new google.maps.LatLng(37.782, -122.445),
  {location: new google.maps.LatLng(37.782, -122.443), weight: 2},
  {location: new google.maps.LatLng(37.782, -122.441), weight: 3},
  {location: new google.maps.LatLng(37.782, -122.439), weight: 2},
  new google.maps.LatLng(37.782, -122.437),
  {location: new google.maps.LatLng(37.782, -122.435), weight: 0.5},

  {location: new google.maps.LatLng(37.785, -122.447), weight: 3},
  {location: new google.maps.LatLng(37.785, -122.445), weight: 2},
  new google.maps.LatLng(37.785, -122.443),
  {location: new google.maps.LatLng(37.785, -122.441), weight: 0.5},
  new google.maps.LatLng(37.785, -122.439),
  {location: new google.maps.LatLng(37.785, -122.437), weight: 2},
  {location: new google.maps.LatLng(37.785, -122.435), weight: 3}
];

var sanFrancisco = new google.maps.LatLng(37.774546, -122.433523);

map = new google.maps.Map(document.getElementById('map'), {
  center: sanFrancisco,
  zoom: 13,
  mapTypeId: 'satellite'
});

var heatmap = new google.maps.visualization.HeatmapLayer({
  data: heatMapData
});
heatmap.setMap(map);

Personalizzare un livello mappa termica

Puoi personalizzare il rendering della mappa termica con le seguenti opzioni. Per ulteriori informazioni, consulta la documentazione di HeatmapLayerOptions.

  • dissipating: specifica se le mappe termiche si dissipano con lo zoom. Quando dissipating è false, il raggio di influenza aumenta con il livello di zoom per garantire che l'intensità del colore venga preservata in qualsiasi posizione geografica. Il valore predefinito è true.
  • gradient: il gradiente di colore della mappa termica, specificato come array di stringhe di colore CSS. Sono supportati tutti i colori CSS3, incluso RGBA, ad eccezione dei colori con nome estesi e dei valori HSL(A).
  • maxIntensity: l'intensità massima della mappa termica. Per impostazione predefinita, i colori della mappa di calore vengono scalati in modo dinamico in base alla maggiore concentrazione di punti in un determinato pixel della mappa. Questa proprietà consente di specificare un valore massimo fisso. L'impostazione dell'intensità massima può essere utile quando il tuo set di dati contiene alcuni valori anomali con un'intensità insolitamente elevata.
  • radius: il raggio di influenza per ogni punto dati, in pixel.
  • opacity: l'opacità della mappa termica, espressa come numero compreso tra 0 e 1.

L'esempio seguente mostra alcune delle opzioni di personalizzazione disponibili.

Visualizza esempio