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 đồ của mình dưới dạng Lớp xếp kề. Lớp ô được đặt phía trên ô bản đồ ở mức thu phóng cụ thể. Khi có đủ ô, 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

Các lớp xếp kề (đôi khi 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. Đây là cách hiệu quả để thêm dữ liệu (chẳng hạn như các địa điểm yêu thích hoặc thông tin giao thông) và hình ảnh cục bộ vào ứng dụng. Khi được kết hợp với loại bản đồ kGMSTypeNone, các lớp ô sẽ 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 mình một cách hiệu quả.

Các lớp xếp kề rất hữu ích khi bạn muốn thêm hình ảnh bao quát, 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 rất hữu ích khi bạn muốn sửa một hình ảnh duy nhất tại một điểm trên bản đồ.

Toạ độ ô

API Maps chia nhỏ 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 một lưới có thứ tự. Khi bản đồ cuộn đến vị trí mới hoặc mức thu phóng mới, API Maps sẽ xác định ô cần thiết và chuyển thành một tập hợp ô để truy xuất.

Để triển khai phép chiếu Mercator của Google, thẻ thông tin có toạ độ (0,0) luôn nằm ở góc Tây Bắc của bản đồ, với các 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 toạ độ x,y tại điểm gốc đó. Ví dụ: ở mức thu phóng 2, khi trái đất được chia thành 16 ô, mỗi thẻ thông tin có thể được tham chiếu bằng một cặp x,y duy nhất:

Bản đồ thế giới được chia thành bốn hàng và bốn cột ô.

Mỗi ô bản đồ là một hình vuông có kích thước 256 x 256 điểm. Ở cấp độ thu phóng 0, toàn bộ thế giới sẽ hiển thị trong một thẻ thông tin. Mỗi mức thu phóng sẽ tăng độ phóng to lên gấp 2 lần. Vì vậy, ở cấp độ thu phóng 1, bản đồ sẽ hiển thị dưới dạng lưới thẻ thông tin 2x2 hoặc lưới 4x4 ở cấp độ thu phóng 2, lưới 8x8 ở cấp độ thu phóng 3, v.v. Nếu đang tạo hình ảnh cho một lớp thẻ thông tin, bạn sẽ cần tạo một hình ảnh điểm 256 x 256 mới cho mỗi thẻ thông tin ở mỗi mức thu phóng mà bạn muốn hỗ trợ.

Thêm lớp xếp kề

  1. Tạo thực thể cho một đối tượng GMSURLTileLayer hoặc một lớp con tuỳ chỉnh của GMSTileLayer/GMSSyncTileLayer.
  2. Sửa đổi thuộc tính zIndex (không bắt buộc) để điều chỉnh vị trí của thuộc tính đó so với các lớp thẻ thông tin khác.
  3. Gán đố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 xếp kề. Với mỗi lớp, bạn sẽ 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. Các tuỳ chọn có sẵn là:

  • Lớp con GMSSyncTileLayer, cung cấp phương thức triển khai tileForX:y:zoom trả về các thực thể UIImage.
  • Lớp con GMSTileLayer, cung cấp phương thức triển khai phương thức không đồng bộ requestTileForX:y:zoom mà sau đó sẽ gọi lại bằng hình ảnh thẻ thông tin.
  • Sử dụng lớp GMSURLTileLayer hiện có để tự động tìm nạp thẻ thông tin 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ả thẻ thông tin nil sẽ cho SDK Maps dành cho iOS biết rằng dữ liệu hiện không có nhưng có thể sẽ có trong tương lai. Ngoài ra, hãy trả về kGMSTileLayerNoTile để cho biết rằng không có thẻ thông tin nào ở vị trí này.

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

Sử dụng "GMSURLTileLayer" để tìm nạp thẻ thông tin trên 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;
      

Lớp con GMSSyncTileLayer để phân phát ô dưới dạng UIImage

GMSSyncTileLayerGMSTileLayer là các lớp trừu tượng được thiết kế để phân 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 đồ của bạn, hãy tạo thực thể cho đối tượng và đặt thuộc tính ánh xạ của đối tượng đó.

Swift

let layer = TestTileLayer()
layer.map = mapView
      

Objective-C

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

Thẻ thông tin có DPI cao cho thiết bị Retina

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

Nếu đang hiển thị các ô DPI thông 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. 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 nhỏ hoặc văn bản. Để có kết quả tốt nhất, hãy khớp tileSize và DPI hình ảnh với màn hình. Bản đồ hiển thị trên thiết bị Retina sẽ hiển thị đẹp nhất khi hiển thị hình ảnh 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 với hình ảnh bình thường và tileSize mặc định là 256.

Xoá thẻ thông tin cũ

Nếu thẻ thông tin mà lớp cung cấp đã trở nên "lỗi thời", thì phương thức clearTileCache sẽ được gọi trên lớp để buộc làm mới. Điều 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];