Narzędzie Mapa termiczna Map Google na Androida

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

Wstęp

Biblioteka SDK Map na urządzenia z Androidem zawiera narzędzie mapy termicznej, które umożliwia dodanie co najmniej 1 mapy witryny do mapy Google w aplikacji.

Ten film omawia wykorzystywanie map termicznych jako alternatywy dla znaczników, gdy dane wymagają na mapie dużej liczby punktów danych.

Mapy termiczne ułatwiają widzom poznanie dystrybucji i względnej intensywności punktów danych na mapie. Zamiast umieszczać znacznik w każdym miejscu, mapy termiczne używają koloru do reprezentowania rozkładu danych.

W poniższym przykładzie czerwony obszar odnosi się do okręgów policji w Wiktorii w Australii.

Jeśli nie masz jeszcze skonfigurowanej biblioteki Maps SDK for Android Utility, postępuj zgodnie z przewodnikiem po konfiguracji, zanim przeczytasz pozostałą część tej strony.

Dodaj prostą mapę termiczną

Aby dodać do mapy mapę termiczną, potrzebny będzie zbiór danych złożony ze współrzędnych dla każdej interesującej lokalizacji. Najpierw utwórz HeatmapTileProvider, przekazując mu kolekcję obiektów LatLng. Następnie utwórz nowy element TileOverlay, przekazując go dostawcy kafelka mapy termicznej, i dodaj nakładkę mapy do mapy.

Narzędzie udostępnia klasę HeatmapTileProvider, która implementuje interfejs TileProvider, by wyświetlać obrazy kafelków na mapę termiczną. HeatmapTileProvider akceptuje zbiór obiektów LatLng (lub obiektów WeightedLatLng, jak opisano poniżej). Tworzy obrazy kafelków dla różnych poziomów powiększenia na podstawie podanych opcji promienia, gradientu i przezroczystości. Możesz zmienić wartości domyślne tych opcji.

Bardziej szczegółowe kroki:

1. Użyj klucza HeatmapTileProvider.Builder(), który przekazuje kolekcję obiektów LatLng, aby dodać nowy obiekt HeatmapTileProvider.
2. Utwórz nowy obiekt TileOverlayOptions z odpowiednimi opcjami, w tym HeatmapTileProvider.
3. Aby dodać nakładkę do mapy, wywołaj obiekt GoogleMap.addTileOverlay().

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
}

      

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

[
{"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żywanie ważonych punktów szerokości i długości geograficznej

Podczas tworzenia obiektu HeatmapTileProvider możesz przekazać mu wagę współrzędnych szerokości i długości geograficznej. Jest to przydatne, gdy chcesz pokazać znaczenie określonego zbioru lokalizacji.

Aby przypisać wagę do określonych lokalizacji:

1. Utwórz nowy element WeightedLatLng dla każdej lokalizacji, która wymaga określenia wagi. Zapisz właściwości LatLng i double, które odpowiadają wymaganej intensywności. Intensywność wskazuje względne znaczenie lub wartość tej lokalizacji. Im wyższa wartość, tym bardziej intensywny kolor w gradientie mapy termicznej. Domyślnie kolor o najwyższej intensywności jest czerwony.

2. Aby utworzyć mapę termiczną, wywołaj funkcję HeatmapTileProvider.Builder().weightedData() zamiast HeatmapTileProvider.Builder().data().

Dostosuj mapę termiczną

Wiele właściwości mapy termicznej można dostosować. Opcje możesz ustawić podczas tworzenia za pomocą funkcji Builder. Możesz też w dowolnym momencie zmienić opcję, wywoływając odpowiedni element HeatmapTileProvider w przeglądarce, a następnie wyczyścić pamięć podręczną nakładki, aby usunąć wszystkie nowe kafelki z nowymi opcjami.

Oto one:

1. Promień: rozmiar rozmycia Gaussa stosowanego do mapy termicznej, wyrażone w pikselach. Domyślna wartość to 20. Musi mieścić się w przedziale od 10 do 50. Użyj wartości radius() w konstruktorze, aby ustawić wartość podczas tworzenia mapy termicznej, lub zmień ją później za pomocą właściwości setRadius().
2. Gradient: kolory, których mapa termiczna używa do wygenerowania mapy kolorów, od najniższej do najwyższej intensywności. Gradient jest tworzony za pomocą 2 tablicy: tablicy całkowitej zawierającej kolory oraz tablicy zmiennoprzecinkowej wskazującej punkt początkowy każdego koloru, podany jako procent maksymalnej intensywności, wyrażony jako ułamek od 0 do 1. W przypadku gradientu jednokolorowego musisz podać tylko 1 kolor lub co najmniej 2 kolory w przypadku gradientu wielokolorowego. Mapa kolorów jest generowana za pomocą interpolacji między tymi kolorami. Domyślny gradient ma 2 kolory. Użyj wartości gradient() w konstruktorze, aby ustawić wartość podczas tworzenia mapy termicznej, lub zmień wartość później, korzystając z setGradient().
3. Przezroczystość: to przezroczystość całej warstwy mapy termicznej, która mieści się w zakresie od 0 do 1. Wartość domyślna to 0,7. Użyj wartości opacity() w Konstruktorze, aby ustawić wartość podczas tworzenia mapy termicznej, lub zmień ją później za pomocą właściwości setOpacity().

Utwórz na przykład Gradient, aby ustawić gradient przed dodaniem mapy termicznej:

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

      

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

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

      

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

      

Zmienianie zbioru danych

Aby zmienić zbiór danych, na którym utworzona jest mapa termiczna, użyj właściwości HeatmapTileProvider.setData() lub HeatmapTileProvider.setWeightedData() dla WeightedLatLng punktów. Uwaga: jeśli chcesz dodać punkty do mapy termicznej lub usunąć punkty z tej mapy, zaktualizuj zbieranie danych, a następnie użyj właściwości setData() lub setWeightedData().

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

      

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

      

Usuwanie mapy termicznej

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

tileOverlay.remove();

      

tileOverlay?.remove()

      

Zobacz aplikację demonstracyjną

Kolejny przykład implementacji mapy termicznej znajdziesz w narzędziu HeatmapsDemoActivity w aplikacji demonstracyjnej, która jest wysyłana z biblioteką narzędzi. Z przewodnika po konfiguracji dowiesz się, jak uruchomić aplikację w wersji demonstracyjnej.