Kiểu bản đồ mới sắp xuất hiện trên Nền tảng Google Maps. Bản cập nhật này để tạo kiểu bản đồ bao gồm một bảng màu mặc định mới và các cải tiến về trải nghiệm bản đồ cũng như khả năng hữu dụng. Tất cả kiểu bản đồ sẽ được cập nhật tự động vào tháng 3 năm 2025. Để biết thêm thông tin về phạm vi cung cấp và cách chọn tham gia sớm hơn, hãy xem bài viết Kiểu bản đồ mới cho Nền tảng Google Maps.

Trang này được dịch bởi Cloud Translation API.

Lớp phủ xếp kề

Chọn nền tảng: Android iOS JavaScript

Lớp phủ ô, đôi khi được gọi là lớp ô, là một tập hợp các hình ảnh được hiển thị phía trên các ô bản đồ cơ sở.

Mẫu mã

Chiến lược phát hành đĩa đơn Kho lưu trữ Apidemos trên GitHub bao gồm một mẫu minh hoạ tính năng lớp phủ xếp kề:

TileOverlaydemoActivity – Java: Các tính năng của lớp phủ thẻ thông tin trong Java
TileFunneldemoActivity – Java: Hệ thống toạ độ được sử dụng cho lớp phủ ô trong Java
TileOverlaydemoActivity – Kotlin: Các tính năng của lớp phủ thẻ thông tin trong Kotlin
TileChromeOSdemoActivity – Kotlin: Hệ toạ độ được sử dụng cho lớp phủ ô trong Kotlin

Giới thiệu

Đáp TileOverlay xác định một tập hợp hình ảnh được thêm vào đầu các ô bản đồ cơ sở.

Bạn cần cung cấp các ô cho từng mức thu phóng mà bạn muốn hỗ trợ. Nếu có đủ ô ở nhiều mức thu phóng, bạn có thể bổ sung dữ liệu bản đồ cho toàn bộ bản đồ.

Lớp phủ xếp kề rất hữu ích khi bạn muốn thêm hình ảnh bao quát vào bản đồ, thường bao phủ những khu vực địa lý rộng lớn. Ngược lại, lớp phủ mặt đất rất hữu ích khi bạn muốn chỉnh sửa một hình ảnh tại một khu vực trên bản đồ.

Bạn cũng có thể sử dụng lớp phủ xếp kề trong suốt để thêm các tính năng bổ sung vào bản đồ, bằng cách thiết lập hệ số trong suốt trên lớp phủ thẻ thông tin theo phương thức lập trình hoặc cung cấp hình ảnh ô trong suốt.

Toạ độ ô và mức thu phóng

API Google Maps chia nhỏ hình ảnh ở mỗi mức thu phóng thành một tập hợp ô bản đồ hình vuông được sắp xếp trong một lưới. Khi bản đồ di chuyển đến một vị trí mới hoặc lên mức thu phóng mới, API Maps sẽ xác định ô nào cần và dịch thông tin đó thành một tập hợp thẻ thông tin để truy xuất.

Ô có toạ độ (0,0) luôn ở góc tây bắc của bản đồ, với giá trị x tăng từ tây sang đông và giá trị y tăng từ bắc hướng nam. Thẻ thông tin được lập chỉ mục bằng toạ độ x,y từ nguồn gốc đó.

Ở mức thu phóng 0, toàn bộ thế giới được kết xuất trong một thẻ thông tin duy nhất. Mỗi lần thu phóng thì độ phóng đại sẽ tăng gấp 2 lần. Vì vậy, ở mức thu phóng 1, bản đồ sẽ được kết xuất dưới dạng một lưới ô 2x2. Ở cấp độ thu phóng 2, đó là lưới 4x4. Ở mức thu phóng 3, đó là lưới 8x8, v.v.

Ví dụ: ở mức thu phóng 2, trái đất được chia thành 16 ô. Mỗi ô có thể được tham chiếu bằng tổ hợp duy nhất giữa x, y và mức thu phóng:

Bản đồ thế giới được chia thành 4 hàng và 4 cột gồm các ô.

Khi tạo hình ảnh cho một lớp ô, bạn cần tạo hình ảnh cho mỗi ô ở mỗi mức thu phóng mà bạn muốn hỗ trợ. Mục tiêu trên Google Maps 256 dp (pixel không phụ thuộc vào thiết bị) khi hiển thị ô. Cho độ phân giải cao trên thiết bị, bạn nên trả về các ô có độ phân giải dpi cao (512x512 px). Giới thiệu vào Android Tài liệu dành cho nhà phát triển để biết thông tin về cách hỗ trợ nhiều loại màn hình kích thước và mật độ.

Lưu ý: Mức thu phóng mà máy ảnh hỗ trợ phụ thuộc vào nhiều yếu tố, và không liên quan đến mức thu phóng mà các thẻ thông tin của bạn sẽ hỗ trợ.

GoogleMap.getMaxZoomLevel() trả về mức thu phóng tối đa có thể đặt ở vị trí hiện tại của camera. Thao tác này có tính đến bản đồ loại dữ liệu hiện đang được sử dụng. Ví dụ: bản đồ vệ tinh hoặc bản đồ địa hình có thể có mức thu phóng tối đa thấp hơn các ô bản đồ cơ sở.
GoogleMap.getMinZoomLevel() trả về mức thu phóng tối thiểu, giống nhau cho mọi vị trí (không giống như mức thu phóng tối đa) nhưng có thể khác nhau giữa thiết bị và kích thước bản đồ.

Thêm lớp phủ ô

Cách đơn giản và thông dụng nhất để tạo lớp phủ ô là cung cấp URL trỏ đến hình ảnh ô có liên quan. UrlTileProvider là cách triển khai một phần của TileProvider cung cấp ô hình ảnh dựa trên URL. Chiến dịch này lớp yêu cầu tất cả các hình ảnh phải có cùng kích thước.

Bạn sẽ cần triển khai UrlTileProvider.getTileUrl() chấp nhận toạ độ ô (x, y, thu phóng) và trả về một URL trỏ đến sẽ được dùng cho thẻ thông tin. Phương thức này sẽ trả về giá trị rỗng nếu không có giá trị ô cho x, y và mức thu phóng đã cho. URL có thể trỏ tới một tài nguyên trên web, Nội dung Android hoặc một tệp trên ổ đĩa cục bộ.

Thiết lập kho hình ảnh thẻ thông tin trên máy chủ, được xác định cho tất cả x,y toạ độ và mức thu phóng mà bạn dự định hỗ trợ. Sau đó, hãy thêm thẻ thông tin lớp phủ:

Định nghĩa một UrlTileProvider để cung cấp hình ảnh thẻ thông tin.
Ghi đè getTileUrl() để tạo URL cho từng thẻ thông tin hình ảnh.
Cung cấp một đối tượng TileOverlayOptions bằng các tuỳ chọn có liên quan:

fadeIn: Boolean. Chỉ định xem thẻ thông tin có bị làm mờ hay không trong năm Giá trị mặc định là true. Bạn có thể thấy công cụ này hữu ích tắt hiệu ứng làm mờ khi chuyển nhanh giữa các lớp phủ ô. Để thông tin về mối quan hệ giữa độ trong suốt và hiệu ứng rõ dần, hãy xem về tính minh bạch bên dưới.
tileProvider: TileProvider để sử dụng lớp phủ này.
transparency: Số thực có độ chính xác đơn. Đặt một hệ số minh bạch cho hình ảnh xếp kề. Giá trị phải nằm trong dải ô [0.0f, 1.0f] trong đó 0.0f có nghĩa là mờ hoàn toàn (mặc định) và 1.0f có nghĩa là hoàn toàn minh bạch. Xem phần này trên chế độ minh bạch ở bên dưới đối với mã mẫu và mối quan hệ giữa độ trong suốt và hiệu ứng rõ dần.
visible: Boolean. Chỉ định chế độ hiển thị của thẻ thông tin lớp phủ. Lớp phủ ô bị ẩn (giá trị false) không được vẽ trên bản đồ nhưng vẫn giữ lại tất cả thuộc tính khác của nó. Mặc định là true.
zIndex: Xác định thứ tự của lớp phủ thẻ thông tin sẽ được vẽ tương quan với các lớp phủ khác, bao gồm lớp phủ mặt đất , hình tròn, hình nhiều đường và đa giác. Lớp phủ có chỉ số z cao hơn sẽ được vẽ trên các lớp phủ đó có chỉ số z thấp hơn. Thứ tự của các lớp phủ có cùng chỉ mục z là tuỳ ý. Chỉ mục z mặc định là 0. Lưu ý rằng điểm đánh dấu luôn được vẽ phía trên các lớp phủ khác, bất kể chỉ mục z của lớp phủ khác lớp phủ.

Gọi điện GoogleMap.addTileOverlay() để thêm lớp phủ vào bản đồ.

Kotlin



private lateinit var map: GoogleMap

var tileProvider: TileProvider = object : UrlTileProvider(256, 256) {
    override fun getTileUrl(x: Int, y: Int, zoom: Int): URL? {

        /* Define the URL pattern for the tile images */
        val url = "http://my.image.server/images/$zoom/$x/$y.png"
        return if (!checkTileExists(x, y, zoom)) {
            null
        } else try {
            URL(url)
        } catch (e: MalformedURLException) {
            throw AssertionError(e)
        }
    }

    /*
     * Check that the tile server supports the requested x, y and zoom.
     * Complete this stub according to the tile range you support.
     * If you support a limited range of tiles at different zoom levels, then you
     * need to define the supported x, y range at each zoom level.
     */
    private fun checkTileExists(x: Int, y: Int, zoom: Int): Boolean {
        val minZoom = 12
        val maxZoom = 16
        return zoom in minZoom..maxZoom
    }
}

val tileOverlay = map.addTileOverlay(
    TileOverlayOptions()
        .tileProvider(tileProvider)
)

Java


private GoogleMap map;

TileProvider tileProvider = new UrlTileProvider(256, 256) {

    @Override
    public URL getTileUrl(int x, int y, int zoom) {

        /* Define the URL pattern for the tile images */
        String s = String.format("http://my.image.server/images/%d/%d/%d.png", zoom, x, y);

        if (!checkTileExists(x, y, zoom)) {
            return null;
        }

        try {
            return new URL(s);
        } catch (MalformedURLException e) {
            throw new AssertionError(e);
        }
    }

    /*
     * Check that the tile server supports the requested x, y and zoom.
     * Complete this stub according to the tile range you support.
     * If you support a limited range of tiles at different zoom levels, then you
     * need to define the supported x, y range at each zoom level.
     */
    private boolean checkTileExists(int x, int y, int zoom) {
        int minZoom = 12;
        int maxZoom = 16;

        return (zoom >= minZoom && zoom <= maxZoom);
    }
};

TileOverlay tileOverlay = map.addTileOverlay(new TileOverlayOptions()
    .tileProvider(tileProvider));

Để xem ví dụ về cách hoạt động của UrlTileProvider, hãy tham khảo TileOverlayDemoActivity trong mã mẫu đi kèm với SDK Dịch vụ Google Play.

Thiết lập độ trong suốt cho lớp phủ ô

Có thể hữu ích khi phủ các ô trong suốt lên bản đồ để người dùng có thể xem bản đồ cơ sở bên dưới các ô được phủ. Bạn có thể thực hiện việc này bằng cách cung cấp sở hữu ô trong suốt hoặc bằng cách đặt hệ số trong suốt trên lớp phủ ô theo phương thức lập trình.

Mã mẫu sau đây bật/tắt độ trong suốt của lớp phủ thẻ thông tin từ 0.5f đến 0.0f:

Kotlin



private var tileOverlayTransparent: TileOverlay? = null

override fun onMapReady(map: GoogleMap) {
    tileOverlayTransparent = map.addTileOverlay(
        TileOverlayOptions()
            .tileProvider(object : UrlTileProvider(256, 256) {
                // ...
            })
            .transparency(0.5f)
    )
}

// Switch between 0.0f and 0.5f transparency.
fun toggleTileOverlayTransparency() {
    tileOverlayTransparent?.let {
        it.transparency = 0.5f - it.transparency
    }
}

Java


private TileOverlay tileOverlayTransparent;

@Override
public void onMapReady(GoogleMap map) {
    tileOverlayTransparent = map.addTileOverlay(new TileOverlayOptions()
        .tileProvider(new UrlTileProvider(256, 256) {
            // ...
        })
        .transparency(0.5f));
}

// Switch between 0.0f and 0.5f transparency.
public void toggleTileOverlayTransparency() {
    if (tileOverlayTransparent != null) {
        tileOverlayTransparent.setTransparency(0.5f - tileOverlayTransparent.getTransparency());
    }
}

Độ trong suốt được triển khai dưới dạng hệ số kênh alpha cho thẻ thông tin hình ảnh. Để thiết lập độ trong suốt của lớp phủ ô, hãy cung cấp Đối tượng TileOverlayOptions có transparency trong dải ô [0.0f, 1.0f] như được thể hiện trong mẫu trên. Một giá trị 0.0f nghĩa là lớp phủ ô hoàn toàn không trong suốt và 1.0f có nghĩa là màu này hoàn toàn trong suốt. Giá trị mặc định là 0.0f (không rõ ràng).

Bạn có thể truy cập vào độ trong suốt của lớp phủ thẻ thông tin bằng cách gọi TileOverlay.getTransparency(), và bạn có thể thay đổi tên này bằng cách gọi TileOverlay.setTransparency().

Độ trong suốt, ảnh động và hiệu ứng làm mờ

Không có ảnh động khi độ trong suốt thay đổi. Tính minh bạch hoạt động cùng với fadeIn .

Hiệu ứng mờ dần (fade-in) cung cấp ảnh động về độ trong suốt khi tải thẻ thông tin. Nếu bạn đặt một trong suốt, các thẻ thông tin hiện dần từ hoàn toàn trong suốt đến giá trị minh bạch. Nếu bạn thay đổi độ trong suốt trong hiệu ứng rõ dần, ảnh động tiếp tục hướng đến độ trong suốt của mục tiêu mới.

Xoá lớp phủ ô

Bạn có thể xoá lớp phủ ô bằng Phương thức TileOverlay.remove().

Kotlin



tileOverlay?.remove()

Java


tileOverlay.remove();

Xoá các thẻ thông tin cũ

Nếu ô do lớp phủ ô này cung cấp có trạng thái "đã lỗi thời", bạn có thể gọi clearTileCache() để buộc làm mới. Điều này sẽ khiến tất cả ô trên lớp phủ này để được tải lại. Ví dụ: nếu ô được cung cấp bởi TileProvider đã thay đổi, bạn phải gọi clearTileCache() sau đó để đảm bảo rằng các thẻ thông tin trước đó không còn được hiển thị.

Kotlin



tileOverlay?.clearTileCache()

Java


tileOverlay.clearTileCache();