Le mappe termiche sono utili per rappresentare la distribuzione e la densità di punti dati su una mappa.
Introduzione
La libreria di utilità di Maps SDK for Android include un'utilità di mappa termica che puoi utilizzare per aggiungere una o più mappe termiche a una mappa Google nella tua applicazione.
Questo video illustra l'utilizzo delle mappe termiche in alternativa agli indicatori, quando i dati richiedono un numero elevato di punti dati sulla mappa.
Le mappe termiche consentono agli utenti di comprendere facilmente la distribuzione e l'intensità relativa dei punti dati su una mappa. Anziché posizionare un indicatore in ogni posizione, le mappe termiche utilizzano il colore per rappresentare la distribuzione dei dati.
Nell'esempio seguente, il rosso rappresenta le aree con elevata concentrazione di stazioni di polizia nello stato di Victoria, Australia.
Se non hai ancora configurato la libreria di utilità di Maps SDK for Android, segui la guida alla configurazione prima di leggere il resto di questa pagina.
Aggiungere una mappa termica semplice
Per aggiungere una mappa termica alla mappa, hai bisogno di un set di dati costituito dalle coordinate di ogni luogo di interesse. Per prima cosa, crea un elemento
HeatmapTileProvider
,
passandogli la raccolta di LatLng
oggetti. Quindi crea un nuovo
TileOverlay
,
passagli il fornitore di riquadri della mappa termica e aggiungi l'overlay dei riquadri alla mappa.
L'utilità fornisce la classe HeatmapTileProvider
, che
implementa l'interfaccia
TileProvider
per fornire le immagini dei riquadri per la mappa termica.
HeatmapTileProvider
accetta una raccolta di LatLng
oggetti (o
WeightedLatLng
oggetti, come descritto di seguito). Crea le immagini affiancate per vari livelli di zoom, in base alle opzioni di raggio, sfumatura e opacità fornite. Puoi
modificare i valori predefiniti per queste opzioni.
Esaminando i passaggi in modo più dettagliato:
- Usa
HeatmapTileProvider.Builder()
, passando una raccolta diLatLng
oggetti, per aggiungere un nuovoHeatmapTileProvider
. - Crea un nuovo oggetto
TileOverlayOptions
con le opzioni pertinenti, tra cuiHeatmapTileProvider
. - Chiama
GoogleMap.addTileOverlay()
per aggiungere l'overlay alla mappa.
Kotlin
private fun addHeatMap() { var latLngs: List<LatLng?>? = null // Get the data: latitude/longitude positions of police stations. try { latLngs = readItems(R.raw.police_stations) } catch (e: JSONException) { Toast.makeText(context, "Problem reading list of locations.", Toast.LENGTH_LONG) .show() } // Create a heat map tile provider, passing it the latlngs of the police stations. val provider = HeatmapTileProvider.Builder() .data(latLngs) .build() // Add a tile overlay to the map, using the heat map tile provider. val overlay = map.addTileOverlay(TileOverlayOptions().tileProvider(provider)) } @Throws(JSONException::class) private fun readItems(@RawRes resource: Int): List<LatLng?> { val result: MutableList<LatLng?> = ArrayList() val inputStream = context.resources.openRawResource(resource) val json = Scanner(inputStream).useDelimiter("\\A").next() val array = JSONArray(json) for (i in 0 until array.length()) { val `object` = array.getJSONObject(i) val lat = `object`.getDouble("lat") val lng = `object`.getDouble("lng") result.add(LatLng(lat, lng)) } return result }
Java
private void addHeatMap() { List<LatLng> latLngs = null; // Get the data: latitude/longitude positions of police stations. try { latLngs = readItems(R.raw.police_stations); } catch (JSONException e) { Toast.makeText(context, "Problem reading list of locations.", Toast.LENGTH_LONG).show(); } // Create a heat map tile provider, passing it the latlngs of the police stations. HeatmapTileProvider provider = new HeatmapTileProvider.Builder() .data(latLngs) .build(); // Add a tile overlay to the map, using the heat map tile provider. TileOverlay overlay = map.addTileOverlay(new TileOverlayOptions().tileProvider(provider)); } private List<LatLng> readItems(@RawRes int resource) throws JSONException { List<LatLng> result = new ArrayList<>(); InputStream inputStream = context.getResources().openRawResource(resource); String json = new Scanner(inputStream).useDelimiter("\\A").next(); JSONArray array = new JSONArray(json); for (int i = 0; i < array.length(); i++) { JSONObject object = array.getJSONObject(i); double lat = object.getDouble("lat"); double lng = object.getDouble("lng"); result.add(new LatLng(lat, lng)); } return result; }
Per questo esempio, i dati vengono archiviati in un file JSON,
police_stations.json
. Ecco un estratto del file:
[ {"lat" : -37.1886, "lng" : 145.708 } , {"lat" : -37.8361, "lng" : 144.845 } , {"lat" : -38.4034, "lng" : 144.192 } , {"lat" : -38.7597, "lng" : 143.67 } , {"lat" : -36.9672, "lng" : 141.083 } ]
Utilizza punti di latitudine/longitudine ponderati
Quando crei un HeatmapTileProvider
, puoi trasmettergli una
raccolta di coordinate di latitudine/longitudine ponderate. Questo è utile se vuoi illustrare l'importanza di un determinato insieme di località.
Per applicare la ponderazione a località specifiche:
- Crea un nuovo
WeightedLatLng
per ogni località che richiede una ponderazione. SuperaLatLng
edouble
che rappresentano l'intensità richiesta. L'intensità indica l'importanza, o il valore, di questa località. Un valore più elevato comporterà un colore più intenso nel gradiente della mappa termica. Per impostazione predefinita, il colore con la massima intensità è il rosso. Chiama
HeatmapTileProvider.Builder().weightedData()
, anzichéHeatmapTileProvider.Builder().data()
, per creare la mappa termica.
Personalizzare la mappa termica
È possibile personalizzare diverse proprietà della mappa termica. Puoi impostare le opzioni al momento della creazione tramite le funzioni Builder
.
In alternativa, puoi modificare un'opzione in qualsiasi momento chiamando il setter pertinente su HeatmapTileProvider
, quindi svuota la cache dei riquadri
dell'overlay in modo che vengano ridisegnati tutti i riquadri con le nuove opzioni.
Sono disponibili le seguenti opzioni:
- Raggio: le dimensioni della sfocatura gaussiana applicata alla mappa termica, espressa in pixel. Il valore predefinito è 20. Il valore deve essere compreso tra 10 e 50. Utilizza
radius()
di Builder per impostare il valore durante la creazione della mappa termica oppure modificalo in un secondo momento consetRadius()
. - Gradiente: una gamma di colori utilizzati dalla mappa termica per generare la propria
mappa, che va dal più basso al più alto. Un gradiente viene creato utilizzando due array: un array di numeri interi contenente i colori e un array di numeri in virgola mobile che indica il punto di partenza di ogni colore, espresso come percentuale dell'intensità massima ed espresso come frazione da 0 a 1. Devi specificare un solo colore per una sfumatura a un solo colore o almeno due colori per una sfumatura multicolore. La mappa dei colori viene generata mediante l'interpolazione tra questi colori. Il gradiente predefinito ha due colori. Utilizza
gradient()
di Builder per impostare il valore durante la creazione della mappa termica oppure modificalo in un secondo momento consetGradient()
. - Opacità: è l'opacità dell'intero livello della mappa termica e va da 0 a 1. Il valore predefinito è 0,7. Utilizza
opacity()
di Builder per impostare il valore durante la creazione della mappa termica oppure modificalo in un secondo momento consetOpacity()
.
Ad esempio, crea un elemento
Gradient
per impostare il gradiente prima di aggiungere la mappa termica:
Kotlin
// Create the gradient. val colors = intArrayOf( Color.rgb(102, 225, 0), // green Color.rgb(255, 0, 0) // red ) val startPoints = floatArrayOf(0.2f, 1f) val gradient = Gradient(colors, startPoints) // Create the tile provider. val provider = HeatmapTileProvider.Builder() .data(latLngs) .gradient(gradient) .build() // Add the tile overlay to the map. val tileOverlay = map.addTileOverlay( TileOverlayOptions() .tileProvider(provider) )
Java
// Create the gradient. int[] colors = { Color.rgb(102, 225, 0), // green Color.rgb(255, 0, 0) // red }; float[] startPoints = { 0.2f, 1f }; Gradient gradient = new Gradient(colors, startPoints); // Create the tile provider. HeatmapTileProvider provider = new HeatmapTileProvider.Builder() .data(latLngs) .gradient(gradient) .build(); // Add the tile overlay to the map. TileOverlay tileOverlay = map.addTileOverlay(new TileOverlayOptions().tileProvider(provider));
Per modificare l'opacità di una mappa termica esistente:
Kotlin
provider.setOpacity(0.7) tileOverlay?.clearTileCache()
Java
provider.setOpacity(0.7); tileOverlay.clearTileCache();
Modifica il set di dati
Per modificare il set di dati su cui è creata una mappa termica, utilizza HeatmapTileProvider.setData()
oppure HeatmapTileProvider.setWeightedData()
per WeightedLatLng
punti. Nota: se vuoi aggiungere punti alla
mappa termica o rimuoverli, aggiorna la raccolta dei dati
e utilizza setData()
o setWeightedData()
.
Kotlin
val data: List<WeightedLatLng> = ArrayList() provider.setWeightedData(data) tileOverlay?.clearTileCache()
Java
List<WeightedLatLng> data = new ArrayList<>(); provider.setWeightedData(data); tileOverlay.clearTileCache();
Rimuovere una mappa termica
Per rimuovere la mappa termica, devi rimuovere l'overlay dei riquadri:
Kotlin
tileOverlay?.remove()
Java
tileOverlay.remove();
Guarda l'app demo
Per un altro esempio di implementazione di una mappa termica, dai un'occhiata a HeatmapsDemoActivity
nell'app demo fornita con la libreria di utilità. La guida alla configurazione mostra come eseguire l'app demo.