Livello mappa termica

Seleziona la piattaforma: Android iOS JavaScript
  1. Panoramica
  2. Caricare la libreria di visualizzazioni
  3. Aggiungere punti dati ponderati
  4. Personalizzare un livello della 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 della mappa termica è attivato, nella parte superiore della mappa viene visualizzato un overlay colorato. Per impostazione predefinita, le aree a maggiore intensità saranno di colore rosso, mentre quelle a minore intensità saranno visualizzate in verde.

Carica la libreria di visualizzazioni

Il livello della mappa termica fa parte della libreria google.maps.visualization e non viene caricato per impostazione predefinita. Le classi di visualizzazione sono una libreria indipendente, separata dal codice principale dell'API Maps JavaScript. Per utilizzare la funzionalità contenuta 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>

Aggiungi un livello della mappa termica

Per aggiungere un livello di mappa termica, 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 WeightedLocation. Dopo aver creato un'istanza per l'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);

Aggiungi punti dati ponderati

Una mappa termica può visualizzare gli oggetti LatLng o WeightedLocation o una combinazione dei due. Entrambi gli oggetti rappresentano un singolo punto dati su una mappa, ma un oggetto WeightedLocation consente di specificare un'ulteriore ponderazione per quel punto dati. L'applicazione di una ponderazione a un punto dati consente di visualizzare l'elemento WeightedLocation con una maggiore intensità rispetto a un semplice oggetto LatLng. La ponderazione è una scala lineare, in cui ogni oggetto LatLng ha una ponderazione implicita pari a 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 LatLng può essere utile quando:

  • Aggiunta di grandi quantità di dati in una singola località. Il rendering di un singolo oggetto WeightedLocation con peso pari a 1000 sarà più veloce rispetto al rendering di 1000 oggetti LatLng.
  • Enfasi sui dati in base a valori arbitrari. Ad esempio, puoi utilizzare gli oggetti LatLng durante il grafico dei dati sui terremoti, ma potresti voler utilizzare WeightedLocation per misurare la magnitudo di ogni terremoto sulla scala più efficace.
/* 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 della mappa termica

Puoi personalizzare il modo in cui la mappa termica verrà visualizzata con le seguenti opzioni. Per saperne di più, consulta la documentazione di HeatmapLayerOptions.

  • dissipating: specifica se le mappe termiche si dissipano con lo zoom. Quando la dissipazione è falsa, il raggio di influenza aumenta con il livello di zoom per garantire che l'intensità del colore venga mantenuta in qualsiasi posizione geografica specifica. 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, inclusi RGBA, ad eccezione dei colori con nome esteso e dei valori HSL(A).
  • maxIntensity: l'intensità massima della mappa termica. Per impostazione predefinita, i colori della mappa termica vengono scalati in modo dinamico in base alla massima concentrazione di punti in un determinato pixel sulla mappa. Questa proprietà consente di specificare un massimo fisso. L'impostazione dell'intensità massima può essere utile se il 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 sotto forma di numero compreso tra 0 e 1.

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

Visualizza esempio