Utilitas Peta Panas Android Google Maps

Pilih platform: Android iOS JavaScript

Peta panas berguna untuk menampilkan distribusi dan kepadatan titik data pada peta.

Pengantar

Library Utilitas Maps SDK for Android menyertakan utilitas peta panas, yang dapat Anda gunakan untuk menambahkan satu atau beberapa peta panas ke peta Google di aplikasi Anda.

Video ini membahas penggunaan peta panas sebagai alternatif pananda jika data Anda memerlukan banyak titik data pada peta.

Peta panas memudahkan penampil memahami distribusi dan intensitas relatif titik data pada peta. Daripada menempatkan penanda di setiap lokasi, peta panas menggunakan warna untuk menampilkan distribusi data.

Dalam contoh di bawah ini, merah mewakili area kantor polisi dengan konsentrasi tinggi di Victoria, Australia.

Peta dengan peta panas yang menampilkan lokasi kantor polisi
Peta panas di peta

Jika Anda belum menyiapkan library Utilitas Maps SDK for Android, ikuti panduan penyiapan sebelum membaca bagian lain dari halaman ini.

Menambahkan peta panas sederhana

Untuk menambahkan peta panas ke peta, Anda membutuhkan set data yang terdiri dari koordinat untuk setiap lokasi yang diinginkan. Pertama-tama, buat HeatmapTileProvider, dengan meneruskan kumpulan objek LatLng ke sini. Kemudian buat TileOverlay baru, dengan meneruskan penyedia ubin peta panas ke sini, dan tambahkan overlay ubin ke peta.

Utilitas ini menyediakan class HeatmapTileProvider, yang menerapkan antarmuka TileProvider untuk menyediakan gambar ubin untuk peta panas. HeatmapTileProvider menerima kumpulan objek LatLng (atau objek WeightedLatLng, seperti yang dijelaskan di bawah). Ini akan membuat gambar ubin untuk berbagai tingkat zoom, berdasarkan opsi radius, gradien dan opasitas yang disediakan. Anda dapat mengubah nilai default untuk opsi ini.

Dengan melihat langkah-langkah ini secara lebih detail:

  1. Gunakan HeatmapTileProvider.Builder(), dengan meneruskan kumpulan objek LatLng ke sini untuk menambahkan HeatmapTileProvider baru.
  2. Buat objek TileOverlayOptions baru dengan opsi yang relevan, termasuk HeatmapTileProvider.
  3. Panggil GoogleMap.addTileOverlay() untuk menambahkan overlay ke peta.

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

      

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
}

      

Untuk contoh ini, data disimpan dalam file JSON, police_stations.json. Berikut adalah ekstrak dari file tersebut:

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

Menggunakan titik garis lintang/garis bujur yang telah diberi bobot

Saat membuat HeatmapTileProvider, Anda dapat meneruskan kumpulan koordinat lintang/bujur yang diberi bobot ke sini. Ini berguna jika Anda ingin mengilustrasikan pentingnya rangkaian lokasi tertentu.

Untuk menerapkan pembobotan ke lokasi tertentu:

  1. Buat WeightedLatLng baru untuk setiap lokasi yang memerlukan pembobotan. Teruskan LatLng dan double yang mewakili intensitas yang diperlukan. Intensitas ini menunjukkan tingkat kepentingan relatif, atau nilai, dari lokasi ini. Nilai yang lebih tinggi akan menghasilkan warna dengan intensitas lebih tinggi dalam gradien peta panas. Secara default, warna dengan intensitas tertinggi adalah merah.
  2. Panggil HeatmapTileProvider.Builder().weightedData(), bukan HeatmapTileProvider.Builder().data(), untuk membuat peta panas.

Menyesuaikan peta panas

Sejumlah properti peta panas dapat disesuaikan. Anda dapat menetapkan opsi pada saat pembuatan, melalui fungsi Builder. Selain itu, ubah opsi kapan saja dengan memanggil penyetel yang relevan di HeatmapTileProvider, lalu kosongkan cache ubin overlay agar semua ubin digambar ulang dengan opsi baru.

Tersedia opsi-opsi berikut:

  1. Radius: Ukuran Gaussian blur yang diterapkan pada peta panas, dinyatakan dalam piksel. Nilai default-nya adalah 20. Harus antara 10 dan 50. Gunakan radius() Builder untuk menetapkan nilai saat membuat peta panas, atau ubah nilai nanti dengan setRadius().
  2. Gradien: Serangkaian warna yang digunakan peta panas untuk menghasilkan peta warna, berkisar dari intensitas terendah hingga tertinggi. Gradien dibuat menggunakan dua array: array integer yang berisi warna, dan array float yang menunjukkan titik awal untuk setiap warna, diberikan sebagai persentase intensitas maksimum, dan dinyatakan berupa pecahan dari 0 hingga 1. Anda perlu menentukan hanya satu warna untuk gradien warna tunggal, atau minimal dua warna untuk gradien beberapa warna. Peta warna dibuat menggunakan interpolasi antar warna tersebut. Gradien default memiliki dua warna. Gunakan gradient() Builder untuk menetapkan nilai saat membuat peta panas, atau ubah nilai nanti dengan setGradient().
  3. Opasitas: Ini adalah opasitas seluruh lapisan peta panas, dan berkisar dari 0 sampai 1. Nilai defaultnya adalah 0,7. Gunakan opacity() Builder untuk menetapkan nilai saat membuat peta panas, atau ubah nilai nanti dengan setOpacity().

Misalnya, buat Gradient untuk menetapkan gradien sebelum menambahkan peta panas:

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

      

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

      

Untuk mengubah opasitas peta panas yang sudah ada:

Java


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

      

Kotlin


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

      

Mengubah set data

Untuk mengubah set data yang digunakan untuk membuat peta panas, gunakan HeatmapTileProvider.setData(), atau HeatmapTileProvider.setWeightedData() untuk titik WeightedLatLng. Catatan: Jika Anda ingin menambahkan titik ke peta panas, atau hapus titik dari peta panas, perbarui pengumpulan data Anda lalu gunakan setData() atau setWeightedData().

Java


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

      

Kotlin


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

      

Menghapus peta panas

Untuk menghapus peta panas, Anda perlu menghapus overlay ubin:

Java


tileOverlay.remove();

      

Kotlin


tileOverlay?.remove()

      

Melihat aplikasi demo

Untuk contoh penerapan peta panas lainnya, lihat HeatmapsDemoActivity di aplikasi demo yang disertakan dengan library utilitas. Panduan penyiapan menunjukkan cara menjalankan aplikasi demo.