Lớp xếp kề

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

Bạn có thể thêm hình ảnh lên trên bản đồ dưới dạng Lớp ô. Lớp xếp kề được đặt phía trên một ô bản đồ ở một mức thu phóng cụ thể. Khi có đủ số ô, bạn có thể bổ sung dữ liệu bản đồ của Google cho toàn bộ bản đồ, ở nhiều mức thu phóng.

Giới thiệu

Lớp xếp kề (đôi khi được gọi là Lớp phủ xếp kề) cho phép bạn xếp chồng hình ảnh lên trên các ô bản đồ cơ sở của Google. Hãy sử dụng tính năng này để thêm dữ liệu (chẳng hạn như điểm yêu thích hoặc thông tin giao thông) và hình ảnh địa phương vào ứng dụng của bạn. Khi kết hợp với loại bản đồ kGMSTypeNone, các lớp ô cho phép bạn thay thế dữ liệu bản đồ cơ sở của Google bằng dữ liệu của riêng bạn một cách hiệu quả.

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

Toạ độ ô vuông

API 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 theo lưới có thứ tự. 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 đổi thành một tập hợp các ô cần truy xuất.

Trong cách triển khai phép chiếu Mercator của Google, ô có toạ độ (0,0) luôn nằm ở góc tây bắc của bản đồ, với giá trị x tăng dần từ tây sang đông và giá trị y tăng dần từ bắc xuống nam. Các ô được lập chỉ mục bằng toạ độ x,y từ gốc đó. Ví dụ: ở mức thu phóng 2, khi Trái Đất được chia thành 16 ô, mỗi ô có thể được tham chiếu bằng một cặp x,y duy nhất:

Mỗi ô bản đồ là một hình vuông có kích thước 256x256 điểm. Ở mức thu phóng 0, toàn bộ thế giới được kết xuất trong một ô duy nhất. Mỗi mức thu phóng sẽ tăng độ phóng đại lên gấp đôi. Ví dụ: ở mức thu phóng 1, bản đồ được kết xuất dưới dạng lưới ô 2x2, ở mức thu phóng 2 là lưới 4x4 và ở mức thu phóng 3 là lưới 8x8. Để tạo hình ảnh cho một lớp ô, hãy tạo một hình ảnh 256x256 điểm cho mỗi ô ở mỗi mức thu phóng mà bạn muốn hỗ trợ.

Thêm lớp ô

1. Tạo thực thể cho đối tượng GMSURLTileLayer hoặc lớp con tuỳ chỉnh của GMSTileLayer hoặc GMSSyncTileLayer.
2. Bạn có thể sửa đổi thuộc tính zIndex để điều chỉnh vị trí của thuộc tính này so với các lớp thẻ thông tin khác.
3. Chỉ định đối tượng GMSTileLayer cho bản đồ bằng cách đặt thuộc tính map của đối tượng đó.

SDK bản đồ dành cho iOS cung cấp 3 lớp có thể dùng để triển khai lớp ô. Với mỗi lớp, bạn cần xác định cách tìm nạp ô bản đồ chính xác cho một tập hợp toạ độ {x,y,zoom} nhất định. Bạn có thể chọn trong các phương án sau đây:

• Lớp con GMSSyncTileLayer, cung cấp cách triển khai tileForX:y:zoom trả về các thực thể UIImage.
• Lớp con GMSTileLayer, cung cấp cách triển khai phương thức không đồng bộ requestTileForX:y:zoom mà sau này sẽ gọi lại bằng hình ảnh ô.
• Sử dụng lớp hiện có, GMSURLTileLayer, để tự động tìm nạp các ô từ URL, cung cấp khối GMSTileURLConstructor. GMSURLTileLayer là một lớp cụ thể không thể phân lớp con.

Trong trường hợp phân lớp con GMSSyncTileLayer hoặc GMSTileLayer, việc cung cấp kết quả ô nil sẽ cho SDK Bản đồ dành cho iOS biết rằng dữ liệu không có sẵn nhưng có thể có trong tương lai. Ngoài ra, hãy trả về kGMSTileLayerNoTile để cho biết rằng không có ô nào tại vị trí này.

Đối với GMSURLTileLayer, việc trả về nil từ GMSTileURLConstructor sẽ cho biết rằng không có ô nào tại vị trí này.

Sử dụng GMSURLTileLayer để tìm nạp các ô từ URL

GMSURLTileLayer không yêu cầu phân lớp con, nhưng bạn sẽ phải triển khai khối GMSTileURLConstructor. Mã dưới đây cho biết cách sử dụng GMSURLTileLayer để hiển thị sơ đồ tầng của một toà nhà nhiều tầng.

Swift

let floor = 1

// Implement GMSTileURLConstructor
// Returns a Tile based on the x,y,zoom coordinates, and the requested floor
let urls: GMSTileURLConstructor = { (x, y, zoom) in
  let url = "https://www.example.com/floorplans/L\(floor)_\(zoom)_\(x)_\(y).png"
  return URL(string: url)
}

// Create the GMSTileLayer
let layer = GMSURLTileLayer(urlConstructor: urls)

// Display on the map at a specific zIndex
layer.zIndex = 100
layer.map = mapView
      

Objective-C

NSInteger floor = 1;

// Create the GMSTileLayer
GMSURLTileLayer *layer = [GMSURLTileLayer tileLayerWithURLConstructor:^NSURL * _Nullable(NSUInteger x, NSUInteger y, NSUInteger zoom) {
  NSString *url = [NSString stringWithFormat:@"https://www.example.com/floorplans/L%ld_%lu_%lu_%lu.png",
                   (long)floor, (unsigned long)zoom, (unsigned long)x, (unsigned long)y];
  return [NSURL URLWithString:url];
}];

// Display on the map at a specific zIndex
layer.zIndex = 100;
layer.map = mapView;
      

Tạo lớp con GMSSyncTileLayer để phân phát các ô dưới dạng UIImage

GMSSyncTileLayer và GMSTileLayer là các lớp trừu tượng được thiết kế để làm lớp con. Bạn có thể sử dụng các lớp này để phân phát thẻ thông tin dưới dạng UIImage. Ví dụ dưới đây cho thấy cách kết xuất hình ảnh tuỳ chỉnh trên một số ô trên bản đồ bằng cách phân lớp con GMSSyncTileLayer.

Swift

class TestTileLayer: GMSSyncTileLayer {
  override func tileFor(x: UInt, y: UInt, zoom: UInt) -> UIImage? {
    // On every odd tile, render an image.
    if (x % 2 == 1) {
      return UIImage(named: "australia")
    } else {
      return kGMSTileLayerNoTile
    }
  }
}

      

Objective-C

@interface TestTileLayer : GMSSyncTileLayer
@end

@implementation TestTileLayer

- (UIImage *)tileForX:(NSUInteger)x y:(NSUInteger)y zoom:(NSUInteger)zoom {
  // On every odd tile, render an image.
  if (x % 2 == 1) {
    return [UIImage imageNamed:@"australia"];
  } else {
    return kGMSTileLayerNoTile;
  }
}

@end
      

Để thêm lớp vào bản đồ, hãy tạo thực thể cho đối tượng và đặt thuộc tính bản đồ của đối tượng đó.

Swift

let layer = TestTileLayer()
layer.map = mapView
      

Objective-C

GMSTileLayer *layer = [[TestTileLayer alloc] init];
layer.map = mapView;
      

Mảnh bản đồ có DPI cao cho thiết bị Retina

Bạn có thể sử dụng hình ảnh có DPI cao với GMSSyncTileLayer hoặc GMSURLTileLayer bằng cách đặt tileSize thành 512. Thuộc tính tileSize cho biết số pixel mà hình ảnh ô được trả về sẽ ưu tiên hiển thị; giá trị mặc định là 256 — kích thước của ô Google Maps trên thiết bị không phải Retina.

Nếu đang hiển thị các ô có DPI bình thường trên thiết bị có DPI cao, bạn có thể tăng tỷ lệ hình ảnh bằng cách đặt tileSize thành 512. Xin lưu ý rằng việc nâng cấp hình ảnh có thể làm giảm chất lượng hình ảnh, đặc biệt là đối với các đường nét mảnh hoặc văn bản. Để có kết quả tốt nhất, hãy so khớp tileSize và DPI của hình ảnh với màn hình. Bản đồ hiển thị trên thiết bị Retina sẽ trông đẹp nhất khi hiển thị hình ảnh có DPI cao với tileSize là 512; trong khi bản đồ hiển thị trên thiết bị không phải Retina sẽ trông đẹp nhất với hình ảnh bình thường và tileSize mặc định là 256.

Lưu ý: Bạn không nên dùng các giá trị nhỏ hơn 256 cho thiết bị Retina.

Xoá các ô cũ

Nếu các ô do lớp cung cấp trở nên "cũ", thì bạn nên gọi phương thức clearTileCache trên lớp để buộc làm mới. Thao tác này sẽ khiến tất cả các ô trên lớp này được tải lại.

Swift

layer.clearTileCache()
      

Objective-C

[layer clearTileCache];