Narzędzie Mapa termiczna na Androida w Mapach Google

Wybierz platformę: Android iOS JavaScript

Mapy termiczne są przydatne do przedstawiania rozkładu i gęstości danych punkty na mapie.

Wprowadzenie

Pakiet Maps SDK na Androida Biblioteka narzędziowa zawiera narzędzie mapy termicznej, którego możesz użyć, aby ją dodać. lub więcej map termicznych na mapę Google w aplikacji.

W tym filmie omawiamy zastosowanie map termicznych jako alternatywy dla znaczników, gdy wymaga dużej liczby punktów danych na mapie.

Mapy termiczne ułatwiają aby widzowie mogli zrozumieć rozkład i względną intensywność danych punkty na mapie. Zamiast umieszczać znacznik w każdej lokalizacji, mapy termiczne wykorzystują kolor odzwierciedlający rozkład danych.

W przykładzie poniżej czerwony kolor oznacza obszary o wysokim stężeniu policji. stacji radiowej w Wiktorii w Australii.

Mapa z mapą termiczną pokazującą lokalizację komisariatów policji
Mapa termiczna na mapie

Jeśli nie masz jeszcze skonfigurowanej biblioteki narzędzia Maps SDK for Android, postępuj zgodnie z przewodnikiem konfiguracji przed przeczytaniem reszty tej strony.

Dodaj prostą mapę termiczną

Aby dodać do mapy mapę termiczną, potrzebujesz zbioru danych składających się z dla każdej interesującej lokalizacji. Najpierw utwórz HeatmapTileProvider przekazywanie jej kolekcji LatLng obiektów. Następnie utwórz nowy TileOverlay przekazując ją dostawcy kafelka mapy termicznej i dodaje do mapy nakładkę z kafelkami.

Narzędzie dostarcza klasę HeatmapTileProvider, która stosuje TileProvider. do przesyłania obrazów kafelków do mapy termicznej. HeatmapTileProvider akceptuje kolekcję LatLng obiekty (lub WeightedLatLng. jak opisano poniżej). Ta funkcja tworzy kafelek obrazy przeznaczone do różnych poziomów powiększenia w zależności od promienia, gradientu i przezroczystości. dostępnych opcji. Dostępne opcje zmienić wartości domyślne tych opcji.

Przyjrzyjmy się poszczególnym krokom:

  1. Używaj HeatmapTileProvider.Builder() przekazywania jej kolekcji LatLng obiektów, aby dodać nowy HeatmapTileProvider.
  2. Utwórz nowy element TileOverlayOptions z odpowiednimi opcjami, w tym HeatmapTileProvider.
  3. Zadzwoń do nas GoogleMap.addTileOverlay(), aby dodać nakładkę do mapy.

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

W tym przykładzie dane są przechowywane w pliku JSON. police_stations.json Oto fragment pliku:

[
{"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 }
]

Użyj ważonych punktów szerokości i długości geograficznej

Tworząc HeatmapTileProvider, możesz przekazać mu zbiór ważonych współrzędnych szerokości i długości geograficznej. Jest to przydatne, jeśli chcemy pokazać znaczenie konkretnego zbioru lokalizacji.

Aby zastosować wagę do określonych lokalizacji:

  1. Utwórz nowy element WeightedLatLng dla każdej lokalizacji, która wymaga ważenia. Wjazd: LatLng i double reprezentujący wymaganą intensywność. Intensywność. wskazuje względną ważność lub wartość danej lokalizacji. Wyższa wartość spowoduje, że w gradientie mapy termicznej kolor będzie o większej intensywności. Według kolorem o największej intensywności jest kolor czerwony.

  2. Zadzwoń do nas HeatmapTileProvider.Builder().weightedData() zamiast HeatmapTileProvider.Builder().data(), aby utworzyć mapy termicznej.

Dostosuj mapę termiczną

Kilka właściwości mapy termicznej można dostosowywać. Jako opcje w momencie tworzenia, korzystając z funkcji Builder. Możesz też w dowolnym momencie zmienić opcję, wywołując odpowiednie ustawienie na HeatmapTileProvider, a następnie wyczyść nakładkę pamięci podręcznej kafelków, tak aby wszystkie kafelki były ponownie wyświetlane z nowymi opcjami.

Dostępne są te ustawienia:

  1. Promień: rozmiar rozmycia Gaussa zastosowanego do mapy termicznej. wyrażony w pikselach. Wartością domyślną jest 20. Wymagana wartość z zakresu od 10 do 50. Użyj radius() konstruktora do ustawienia wartości podczas tworzenia mapy termicznej, lub zmień wartość później za pomocą setRadius().
  2. Gradient: zakres kolorów używanych przez mapę termiczną do generowania mapę barw o różnej intensywności. Zostanie utworzony gradient. za pomocą dwóch tablic: tablicy całkowitej zawierającej kolory i tablicy zmiennoprzecinkowej wskazujący punkt początkowy każdego koloru, podany jako procent maksymalnej intensywności i wyrażony jako ułamek od 0 do 1. Czynności, które musisz wykonać określ tylko jeden kolor dla gradientu jednokolorowego albo minimum dwa. dla wielokolorowego gradientu. Mapa kolorów jest generowana za pomocą dzięki interpolacji między tymi kolorami. Domyślny gradient ma 2 kolory. Używaj gradient() konstruktora, aby ustawić wartość podczas tworzenia mapy termicznej lub zmień wartość później za pomocą setGradient().
  3. Przezroczystość: przezroczystość całej warstwy mapy termicznej. mieści się w zakresie od 0 do 1. Wartość domyślna to 0,7. Użyj opacity(), aby ustawić wartość podczas tworzenia mapy termicznej, możesz później zmienić tę wartość za pomocą funkcji setOpacity().

Na przykład utwórz Gradient aby ustawić gradient przed dodaniem mapy termicznej:

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

Aby zmienić przezroczystość istniejącej mapy termicznej:

Kotlin



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

Java


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

Zmiana zbioru danych

Aby zmienić zbiór danych, na którym jest tworzona mapa termiczna, użyj funkcji HeatmapTileProvider.setData() lub HeatmapTileProvider.setWeightedData() za WeightedLatLng pkt. Uwaga: jeśli chcesz dodać punkty do mapy termicznej lub usuń z niej punkty, zaktualizuj zbieranie danych a potem użyj setData() lub setWeightedData().

Kotlin



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

Java


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

Usuwanie mapy termicznej

Aby usunąć mapę termiczną, musisz usunąć nakładkę z kafelkami:

Kotlin



tileOverlay?.remove()

Java


tileOverlay.remove();

Zobacz aplikację w wersji demonstracyjnej

Innym przykładem implementacji mapy termicznej jest HeatmapsDemoActivity w aplikacji w wersji demonstracyjnej, która jest wysyłana za pomocą biblioteki narzędzi. przewodnik konfiguracji jak uruchomić aplikację w wersji demonstracyjnej.