Mappa termica di Google Maps per Android

Le mappe termiche sono utili per rappresentare la distribuzione e la densità dei punti dati su una mappa.

Introduzione

La libreria delle utilità di Maps per Android include un'utilità di mappa termica, che puoi utilizzare per aggiungere una o più mappe termiche a una mappa di Google nella tua applicazione.

Questo video illustra l'utilizzo delle mappe termiche come alternativa agli indicatori, quando i dati richiedono un numero elevato di punti dati sulla mappa.

Le mappe termiche consentono ai visualizzatori di comprendere facilmente la distribuzione e l'intensità relativa dei punti dati su una mappa. Invece di posizionare un indicatore in ciascuna posizione, le mappe termiche utilizzano il colore per rappresentare la distribuzione dei dati.

Nell'esempio riportato di seguito, il rosso rappresenta le aree ad alta concentrazione di stazioni di polizia in Victoria, in Australia.

Se non hai ancora configurato la libreria dell'utilità Maps SDK for Android, segui la guida alla configurazione prima di leggere il resto di questa pagina.

Aggiungi una mappa termica semplice

Per aggiungere una mappa termica alla mappa, avrai bisogno di un set di dati composto dalle coordinate per ogni località di interesse. Per prima cosa crea una HeatmapTileProvider, passandola la raccolta di oggetti LatLng. Quindi crea una nuova TileOverlay, passando il relativo fornitore della mappa termica e aggiungi l'overlay della scheda alla mappa.

L'utilità fornisce la classe HeatmapTileProvider, che implementa l'interfaccia TileProvider per fornire le immagini del riquadro per la mappa termica. HeatmapTileProvider accetta una raccolta di oggetti LatLng (o oggetti WeightedLatLng, come descritto di seguito). Crea le immagini a mosaico per vari livelli di zoom, in base alle opzioni di raggio, gradiente e opacità fornite. Puoi modificare i valori predefiniti di queste opzioni.

Vediamo i passaggi più nel dettaglio:

1. Utilizza HeatmapTileProvider.Builder(), trasmettendone una raccolta di LatLng, per aggiungere un nuovo elemento HeatmapTileProvider.
2. Crea un nuovo oggetto TileOverlayOptions con le opzioni pertinenti, tra cui HeatmapTileProvider.
3. Chiama GoogleMap.addTileOverlay() per aggiungere l'overlay alla mappa.

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;
}

      

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
}

      

Per questo esempio, i dati sono 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 la latitudine/il peso misurati in punti

Quando crei un elemento HeatmapTileProvider, puoi trasmettergli un insieme di coordinate di latitudine/longitudine ponderate. Questa operazione è utile se vuoi illustrare l'importanza di un determinato insieme di località.

Per applicare la ponderazione a località specifiche:

1. Crea un nuovo WeightedLatLng per ciascuna località che richiede la ponderazione. Passa il LatLng e un double che rappresentano l'intensità richiesta. L'intensità indica l'importanza relativa, o il valore, di questa località. Un valore più alto produrrà un colore a maggiore intensità nella mappa termica. Per impostazione predefinita, il colore con intensità più elevata è il rosso.

2. Chiama HeatmapTileProvider.Builder().weightedData(), anziché HeatmapTileProvider.Builder().data(), per creare la mappa termica.

Personalizzare la mappa termica

Diverse proprietà della mappa termica sono personalizzabili. Puoi impostare le opzioni al momento della creazione tramite le funzioni Builder. In alternativa, modifica un'opzione in qualsiasi momento chiamando il setter pertinente su HeatmapTileProvider, quindi cancella la cache dei riquadri dell'overlay in modo che redra tutti i riquadri con le nuove opzioni.

Sono disponibili le seguenti opzioni:

1. Raggio: 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() del Builder per impostare il valore quando crei la mappa termica o modifica il valore in un secondo momento con setRadius().
2. Sfumatura: una gamma di colori che la mappa termica utilizza per generare la mappa colori, dalla più bassa alla più alta. Viene creata una sfumatura utilizzando due array: un array intero contenente i colori e un array fluttuante che indica il punto iniziale per ogni colore, espresso come percentuale dell'intensità massima ed espresso in frazione da 0 a 1. Devi specificare un solo colore per una sfumatura a un colore o un minimo di due colori per una sfumatura multicolore. La mappa dei colori viene generata utilizzando l'interpolazione tra quei colori. Il gradiente predefinito ha due colori. Utilizza gradient() di Builder per impostare il valore quando crei la mappa termica, oppure modifica il valore in un secondo momento con setGradient().
3. Opacità: è l'opacità dell'intero livello della mappa termica e può variare da 0 a 1. Il valore predefinito è 0,7. Utilizza opacity() di Builder per impostare il valore durante la creazione della mappa termica o modifica il valore in un secondo momento con setOpacity().

Ad esempio, crea una Gradient per impostare la sfumatura prima di aggiungere la mappa termica:

// 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));

      

// 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)
)

      

Per modificare l'opacità di una mappa termica esistente:

provider.setOpacity(0.7);
tileOverlay.clearTileCache();

      

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() o HeatmapTileProvider.setWeightedData() per WeightedLatLng punti. Nota: se vuoi aggiungere punti alla mappa termica o rimuoverli dalla mappa termica, aggiorna la raccolta dati e poi utilizza setData() o setWeightedData().

List<WeightedLatLng> data = new ArrayList<>();
provider.setWeightedData(data);
tileOverlay.clearTileCache();

      

val data: List<WeightedLatLng> = ArrayList()
provider.setWeightedData(data)
tileOverlay?.clearTileCache()

      

Rimuovere una mappa termica

Per rimuovere la mappa termica, devi rimuovere l'overlay del riquadro:

tileOverlay.remove();

      

tileOverlay?.remove()

      

Visualizza l'app demo

Per un altro esempio di implementazione della 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.