- Panoramica
- Caricare la libreria di visualizzazioni
- Aggiungere punti dati ponderati
- 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, un overlay colorato viene visualizzato sulla parte superiore della mappa. Per impostazione predefinita, le aree di intensità maggiore sono di colore rosso, mentre quelle di intensità minore sono verdi.
Caricare la libreria di visualizzazioni
Il livello mappa termica fa parte della libreria google.maps.visualization e non è
caricato per impostazione predefinita. Le classi di visualizzazione sono una libreria autonoma
separata dal codice API principale di Maps JavaScript. Per utilizzare la funzionalità contenuta in questa libreria, devi prima caricarla utilizzando il parametro libraries nell'URL di bootstrap dell'API JavaScript di Maps:
<script async
src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&libraries=visualization&callback=initMap">
</script>
Aggiungi un livello mappa termica
Per aggiungere un livello mappa termica, devi prima creare un nuovo oggetto HeatmapLayer e fornire alcuni dati geografici sotto forma di array o un oggetto MVCArray[]. I dati possono essere un oggetto
LatLng
o un oggetto
WeightedLocation. Dopo aver creato un'istanza dell'oggetto HeatmapLayer, aggiungila 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 termica può eseguire il rendering di oggetti LatLng o WeightedLocation o di una combinazione dei due. Entrambi gli oggetti rappresentano un singolo punto dati su una mappa, ma un oggetto WeightedLocation consente di specificare anche una ponderazione per quel punto dati. L'applicazione di una ponderazione a un punto dati comporterà il rendering dell'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 weightedLocation e LatLng oggetti in un unico array.
L'utilizzo di un oggetto WeightedLocation al posto di LatLng può essere utile quando:
- Aggiungere grandi quantità di dati in un unico posto. Il rendering di un singolo oggetto
WeightedLocationcon una ponderazione di 1000 sarà più rapido del rendering di 1000 oggettiLatLng. - Applicazione dell'enfasi ai dati in base a valori arbitrari. Ad esempio,
puoi utilizzare gli oggetti
LatLngper tracciare i dati dei terremoti, ma puoi usare unWeightedLocationper misurare la magnitudo di ogni terremoto nella scala più ricca.
/* 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 la modalità di rendering della mappa termica con le seguenti opzioni. Per saperne di più, consulta la documentazione di HeatmapLayerOptions.
dissipating: specifica se le mappe termiche si disperdono sullo zoom. Quando la dissipazione è falsa, 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 un array di stringhe di colore CSS. Sono supportati tutti i colori CSS3, incluso il formato RGBA, ad eccezione dei colori estesi e dei valori HSL(A).maxIntensity: l'intensità massima della mappa termica. Per impostazione predefinita, i colori della mappa termica vengono ridimensionati in modo dinamico in base alla massima concentrazione di punti in qualsiasi pixel specifico sulla mappa. Questa proprietà ti consente di specificare un valore massimo fisso. L'impostazione dell'intensità massima può essere utile quando 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 come numero compreso tra 0 e 1.
L'esempio riportato di seguito mostra alcune delle opzioni di personalizzazione disponibili.