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 mostrare l'intensità dei dati a punti geografici. Quando il livello della mappa termica è attivato, viene visualizzato un overlay colorato vengono visualizzati nella parte superiore della mappa. Per impostazione predefinita, le aree a maggiore intensità saranno colorate in rosso e le aree a minore intensità appariranno verdi.

Carica la libreria di visualizzazioni

Il livello della mappa termica fa parte della libreria google.maps.visualization e non è vengono caricati per impostazione predefinita. Le classi di visualizzazione sono librerie indipendenti, separato dal codice principale dell'API Maps JavaScript. Per utilizzare la funzionalità contenuti in questa libreria, devi prima caricarla utilizzando l'libraries nell'URL del 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 HeatmapLayer e forniscono alcuni dati geografici sotto forma di array o Oggetto MVCArray[]. I dati possono essere LatLng o un oggetto WeightedLocation . Dopo aver creato un'istanza per l'oggetto HeatmapLayer, aggiungilo al richiamando 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ò eseguire il rendering LatLng oppure WeightedLocation o una combinazione dei due. Entrambi gli oggetti rappresentano un singolo dato punto su una mappa, ma un oggetto WeightedLocation ti consente di anche specificare una ponderazione per quel punto dati. L'applicazione di una ponderazione a un punto dati l'elemento WeightedLocation viene visualizzato con una maggiore intensità rispetto a LatLng semplice. La ponderazione è una scala lineare, in cui ogni LatLng l'oggetto ha una ponderazione implicita pari a 1, aggiungendo un singolo WeightedLocation di {location: new google.maps.LatLng(37.782, -122.441), weight: 3} avranno 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à. Eseguire il rendering di un singolo WeightedLocation oggetto con peso pari a 1000 sarà più veloce di rendering di 1000 LatLng oggetti.
  • Enfasi sui dati in base a valori arbitrari. Ad esempio: puoi utilizzare gli oggetti LatLng quando tracci i dati sui terremoti, ma ti consigliamo di utilizzare un WeightedLocation per misurare la magnitudo di ogni terremoto su la 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 il modo in cui verrà visualizzata la mappa termica con la seguente mappa termica le opzioni di CPU e memoria disponibili. Consulta le HeatmapLayerOptions per saperne di più.

  • dissipating: specifica se le mappe termiche si dissipano con lo zoom. Quando dissipazione è falso, il raggio di influenza aumenta con il livello di zoom a garantire che l'intensità del colore sia mantenuta in qualsiasi dato luogo in ogni località. Il valore predefinito è true.
  • gradient: il gradiente di colore della mappa termica, specificato come array di CSS stringhe di colori. Tutti i colori CSS3 , inclusi RGBA, sono supportati ad eccezione dei denominati estesi colori e i valori HSL(A).
  • maxIntensity: l'intensità massima della mappa termica. Per impostazione predefinita, la mappa termica i colori vengono scalati in modo dinamico in base alla massima concentrazione di punti a un determinato pixel sulla mappa. Questa proprietà ti consente di specificare un valore massimo fisso. Impostare la massima intensità può essere utile quando il set di dati contiene alcuni outlier 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