Tiện ích bản đồ nhiệt dành cho Android của Google Maps

Bản đồ nhiệt rất hữu ích trong việc thể hiện sự phân phối và mật độ dữ liệu các điểm trên bản đồ.

Giới thiệu

SDK Bản đồ dành cho Android Thư viện tiện ích bao gồm một tiện ích bản đồ nhiệt mà bạn có thể sử dụng để thêm một tiện ích hoặc nhiều bản đồ nhiệt khác đến bản đồ Google trong ứng dụng của bạn.

Video này thảo luận về công dụng của bản đồ nhiệt như một giải pháp thay thế cho điểm đánh dấu, khi dữ liệu của bạn đòi hỏi một số lượng lớn các điểm dữ liệu trên bản đồ.

Bản đồ nhiệt giúp bạn dễ dàng để người xem hiểu được mức độ phân bổ và cường độ tương đối của dữ liệu các điểm trên bản đồ. Thay vì đặt một điểm đánh dấu tại từng vị trí, bản đồ nhiệt sử dụng để biểu thị sự phân phối dữ liệu.

Trong ví dụ bên dưới, màu đỏ thể hiện các khu vực cảnh sát tập trung cao độ các trạm sạc ở Victoria, Úc.

Nếu bạn chưa thiết lập SDK Maps dành cho thư viện Tiện ích Android, làm theo hướng dẫn thiết lập trước khi đọc phần còn lại của trang này.

Thêm bản đồ nhiệt đơn giản

Để thêm bản đồ nhiệt vào bản đồ của mình, bạn sẽ cần một tập dữ liệu bao gồm toạ độ cho từng vị trí quan tâm. Trước tiên, hãy tạo một HeatmapTileProvider! truyền vào đó tập hợp các đối tượng LatLng. Sau đó, tạo một tài khoản TileOverlay! truyền nó vào trình cung cấp ô bản đồ nhiệt rồi thêm lớp phủ ô vào bản đồ.

Tiện ích này cung cấp lớp HeatmapTileProvider triển khai TileProvider để cung cấp hình ảnh ô cho bản đồ nhiệt. HeatmapTileProvider chấp nhận một bộ sưu tập LatLng đối tượng (hoặc WeightedLatLng như được mô tả dưới đây). Thao tác này sẽ tạo thẻ thông tin hình ảnh cho các mức thu phóng khác nhau, dựa trên bán kính, độ dốc và độ mờ tùy chọn được cung cấp. Bạn có thể thay đổi giá trị mặc định cho các tuỳ chọn này.

Xem các bước chi tiết hơn:

1. Sử dụng HeatmapTileProvider.Builder()! truyền vào đó một tập hợp các đối tượng LatLng để thêm một đối tượng mới HeatmapTileProvider.
2. Tạo mới TileOverlayOptions bằng các tuỳ chọn có liên quan, bao gồm HeatmapTileProvider.
3. Gọi điện GoogleMap.addTileOverlay() để thêm lớp phủ vào bản đồ.

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
}

      

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

      

Trong ví dụ này, dữ liệu được lưu trữ trong tệp JSON, police_stations.json. Dưới đây là trích xuất từ tệp:

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

Sử dụng các điểm vĩ độ/kinh độ có trọng số

Khi tạo HeatmapTileProvider, bạn có thể truyền nó vào tập hợp toạ độ vĩ độ/kinh độ có trọng số. Điều này rất hữu ích nếu bạn muốn minh hoạ tầm quan trọng của một nhóm vị trí cụ thể.

Để áp dụng trọng số cho các vị trí cụ thể:

1. Tạo mới WeightedLatLng cho từng vị trí yêu cầu trọng số. Truyền LatLng và một double thể hiện cường độ cần thiết. Cường độ cho biết tầm quan trọng hoặc giá trị tương đối của vị trí này. Cao hơn sẽ dẫn đến màu có cường độ cao hơn trong độ dốc của bản đồ nhiệt. Theo mặc định, màu có cường độ cao nhất là màu đỏ.

2. Gọi điện HeatmapTileProvider.Builder().weightedData()! thay vì HeatmapTileProvider.Builder().data(), để tạo bản đồ nhiệt.

Tuỳ chỉnh bản đồ nhiệt

Một số thuộc tính của bản đồ nhiệt có thể tuỳ chỉnh được. Bạn có thể đặt các tuỳ chọn tại thời điểm tạo, thông qua các hàm Builder. Ngoài ra, bạn có thể thay đổi một tuỳ chọn bất cứ lúc nào bằng cách gọi phương thức setter phù hợp trên HeatmapTileProvider, sau đó xoá lớp phủ bộ nhớ đệm ô để vẽ lại tất cả các ô với các tuỳ chọn mới.

Bạn có các tuỳ chọn sau đây:

1. Bán kính: Kích thước của hiệu ứng làm mờ Gaussian được áp dụng cho bản đồ nhiệt, được biểu thị bằng pixel. Giá trị mặc định là 20. Phải trong khoảng từ 10 đến 50. Sử dụng radius() của trình tạo để đặt giá trị khi tạo bản đồ nhiệt, hoặc thay đổi giá trị vào lúc khác bằng setRadius().
2. gradient: Một dải màu mà bản đồ nhiệt sử dụng để tạo bản đồ màu, dao động từ cường độ thấp nhất đến cao nhất. Đã tạo một dải chuyển màu sử dụng hai mảng: một mảng số nguyên chứa các màu và một mảng dấu phẩy động cho biết điểm bắt đầu của mỗi màu, được cho biết dưới dạng phần trăm của cường độ tối đa và được biểu thị dưới dạng phân số từ 0 đến 1. Bạn cần chỉ chỉ định một màu cho một dải chuyển màu đơn sắc hoặc tối thiểu hai màu cho một dải chuyển màu nhiều màu. Bản đồ màu được tạo bằng cách sử dụng nội suy giữa các màu đó. Độ dốc mặc định có hai màu. Sử dụng gradient() của Trình tạo để đặt giá trị khi tạo bản đồ nhiệt hoặc thay đổi giá trị sau này bằng setGradient().
3. Độ mờ: Đây là độ mờ của toàn bộ lớp bản đồ nhiệt và nằm trong khoảng từ 0 đến 1. Giá trị mặc định là 0,7. Sử dụng mã opacity() để đặt giá trị khi tạo bản đồ nhiệt, hoặc hãy thay đổi giá trị vào lúc khác bằng setOpacity().

Ví dụ: tạo một Gradient để đặt độ dốc trước khi thêm bản đồ nhiệt:

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

      

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

      

Cách thay đổi độ mờ của bản đồ nhiệt hiện có:

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

      

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

      

Thay đổi tập dữ liệu

Để thay đổi tập dữ liệu mà bạn dùng để tạo bản đồ nhiệt, hãy sử dụng HeatmapTileProvider.setData()! hoặc HeatmapTileProvider.setWeightedData() để có WeightedLatLng điểm. Lưu ý: Nếu bạn muốn thêm điểm vào bản đồ nhiệt hoặc xoá các điểm khỏi bản đồ nhiệt, cập nhật hoạt động thu thập dữ liệu của bạn sau đó sử dụng setData() hoặc setWeightedData().

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

      

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

      

Xoá bản đồ nhiệt

Để xoá bản đồ nhiệt, bạn cần xoá lớp phủ ô:

tileOverlay?.remove()

      

tileOverlay.remove();

      

Xem ứng dụng minh hoạ

Để biết một ví dụ khác về cách triển khai bản đồ nhiệt, hãy xem HeatmapsDemoActivity trong ứng dụng minh hoạ giao hàng với thư viện tiện ích. Chiến lược phát hành đĩa đơn hướng dẫn thiết lập cho bạn biết cách chạy ứng dụng minh hoạ.