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 hình ảnh được hiển thị phía trên các ô bản đồ cơ sở.

Mẫu mã

Kho lưu trữ ApiDemos trên GitHub bao gồm một mẫu minh hoạ tính năng lớp phủ của ô:

Giới thiệu

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

Bạn cần cung cấp ô cho mỗi 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 đồ của Google 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 mở rộng vào bản đồ, thường bao gồm các khu vực địa lý lớn. Ngược lại, lớp phủ mặt đất rất hữu ích khi bạn muốn 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ủ ô trong suốt để thêm các tính năng bổ sung vào bản đồ, bằng cách đặt hệ số trong suốt trên lớp phủ theo phương thức lập trình hoặc bằng cách cung cấp hình ảnh thẻ thông tin trong suốt.

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

API Google Maps chia hình ảnh ở mỗi mức thu phóng thành một tập hợp các ô 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 đến một mức thu phóng mới, API Maps sẽ xác định những ô cần thiết và chuyển thông tin đó sang một tập hợp các ô để truy xuất.

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

Ở mức thu phóng 0, toàn bộ thế giới được hiển thị trong một ô. Mỗi mức thu phóng sẽ tăng độ phóng đại lên 2 lần. Vì vậy, ở mức thu phóng 1, bản đồ sẽ hiển thị dưới dạng lưới ô 2x2. Ở mức thu phóng 2, đó là lưới 4x4. Ở cấp độ 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 x, y và thu phóng duy nhất:

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

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 ô của bạn sẽ hỗ trợ.

  1. GoogleMap.getMaxZoomLevel() trả về mức thu phóng tối đa hiện có ở vị trí máy ảnh hiện tại. Việc này có tính đến loại bản đồ hiện đang được sử dụng. Ví dụ: bản đồ vệ tinh hoặc địa hình có thể có mức thu phóng tối đa thấp hơn ô bản đồ cơ sở.
  2. GoogleMap.getMinZoomLevel() trả về mức thu phóng tối thiểu, tương tự 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 các thiết bị và kích thước bản đồ.

Thêm lớp phủ ô

Cách đơn giản nhất và phổ biến nhất để tạo lớp phủ thẻ thông tin là cung cấp một URL trỏ đến hình ảnh thẻ thông tin có liên quan. UrlTileProvider là một cách triển khai một phần của TileProvider cung cấp thẻ hình ảnh dựa trên URL. Lớp này yêu cầu tất 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 hình ảnh sử dụng cho ô đó. Phương thức này sẽ trả về giá trị rỗng nếu không có ô cho x, y và mức thu phóng nhất định. URL có thể trỏ đến một tài nguyên web, một tài sản Android hoặc một tệp trên ổ đĩa cục bộ.

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

  1. Khai báo một UrlTileProvider để cung cấp hình ảnh thẻ thông tin.
  2. Ghi đè getTileUrl() để tạo URL cho mỗi hình ảnh thẻ thông tin.
  3. Cung cấp một đối tượng TileOverlayOptions với các tuỳ chọn phù hợp:
    • fadeIn: Boolean. Chỉ định việc các thẻ thông tin có bị làm mờ hay không. Giá trị mặc định là true. Bạn có thể thấy hữu ích khi tắt tính năng làm mờ khi chuyển đổi nhanh giữa các lớp phủ xếp kề. Để biết thông tin về mối quan hệ giữa độ trong suốt và độ mờ, hãy xem phần độ trong suốt bên dưới.
    • tileProvider: TileProvider để sử dụng cho lớp phủ này.
    • transparency: Độ chính xác đơn. Đặt một hệ số trong suốt cho hình ảnh thẻ thông tin. Giá trị này phải nằm trong phạm vi [0.0f, 1.0f], trong đó 0.0f có nghĩa là hoàn toàn không trong suốt (mặc định) và 1.0f có nghĩa là hoàn toàn minh bạch. Hãy xem phần về độ minh bạch dưới đây để biết mã mẫu và mối quan hệ giữa độ trong suốt và độ mờ.
    • visible: Boolean. Chỉ định chế độ hiển thị của lớp phủ dạng ô. Lớp phủ ô không hiển thị (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. Giá trị mặc định là true.
    • zIndex: Xác định thứ tự vẽ lớp phủ liên quan đến các lớp phủ khác, bao gồm lớp phủ mặt đất , vòng tròn, nhiều đường và đa giác. Những lớp phủ có chỉ mục z cao hơn sẽ được đặt trên các lớp có chỉ mục z thấp hơn. Thứ tự lớp phủ có cùng chỉ mục z là tuỳ ý. Chỉ mục z mặc định là 0. Xin lưu ý rằng các điểm đánh dấu luôn được vẽ trên các lớp phủ khác, bất kể chỉ mục z của các lớp phủ khác.
  4. Gọi GoogleMap.addTileOverlay() để thêm lớp phủ vào bản đồ.

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

      

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

      

Để xem ví dụ về UrlTileProvider hoạt động, 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ủ ô

Bạn nên sử dụng lớp phủ trong suốt trên bản đồ để người dùng có thể nhìn thấy bản đồ cơ sở bên dưới các ô đó. Bạn có thể thực hiện việc này bằng cách cung cấp các ô trong suốt của riêng mình hoặc bằng cách đặt hệ số trong suốt trên lớp phủ của ô 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ủ giữa các ô: 0.5f0.0f:

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

      

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

      

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

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

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

Ảnh động sẽ không xuất hiện khi độ trong suốt thay đổi. Tùy chọn minh bạch hoạt động cùng với tùy chọn fadeIn.

Làm mờ dần sẽ tạo ảnh động minh bạch khi tải thẻ thông tin. Nếu bạn đặt giá trị độ trong suốt, các ô sẽ mờ dần từ trong suốt xuống thành giá trị minh bạch đã xác định. Nếu bạn thay đổi độ trong suốt trong khi làm mờ, ảnh động sẽ tiếp tục hướng tới độ trong suốt mới của mục tiêu.

Xoá lớp phủ thẻ thông tin

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

Java


tileOverlay.remove();

      

Kotlin


tileOverlay?.remove()

      

Xóa các ô cũ

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

Java


tileOverlay.clearTileCache();

      

Kotlin


tileOverlay?.clearTileCache()