Bạn có thể thêm hình ảnh ở đầu bản đồ của mình dưới dạng Lớp Thẻ thông tin. Các lớp xếp kề được đặt phía trên một ô bản đồ ở một mức thu phóng cụ thể. Với đủ thẻ thông tin, 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ủ ô) cho phép bạn xếp chồng hình ảnh lên các ô bản đồ cơ sở của Google. Đây là một cách hay để thêm dữ liệu (chẳng hạn như đị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 của bạn. Khi được kết hợp với loại bản đồ kGMSTypeNone
, các lớp xếp kề 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ả.
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 phủ 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 chỉnh sửa một hình ảnh tại một điểm trên bản đồ.
Toạ độ ô
API Maps chia hình ảnh ở mỗi mức thu phóng thành một tập hợp các thẻ thông tin bản đồ vuông, được sắp xếp theo một lưới có thứ tự. Khi một bản đồ cuộ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 thẻ thông tin cần thiết và chuyển thẻ thông tin đó thành một tập hợp thẻ thông tin cần truy xuất.
Để Google triển khai phép chiếu Mercator, ô có toạ độ (0,0) luôn ở góc tây bắc bản đồ, với các giá trị x
tăng từ tây sang đông và 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
trong nguồn gốc đó. Ví dụ: ở cấp độ 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. Ở mức thu phóng 0, toàn bộ thế giới được kết xuất 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, ở mức thu phóng 1, bản đồ sẽ hiển thị dưới dạng lưới 2x2 gồm các ô hoặc lưới 4x4 ở mức thu phóng 2, lưới 8x8 ở mức 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ẽ phải tạo một hình ảnh điểm mới 256x256 cho từng thẻ thông tin ở mỗi mức thu phóng mà bạn muốn hỗ trợ.
Thêm một lớp Thẻ thông tin
- Tạo thực thể cho đối tượng
GMSURLTileLayer
hoặc một lớp con tuỳ chỉnh củaGMSTileLayer
/GMSSyncTileLayer
. - Sửa đổi thuộc tính
zIndex
để điều chỉnh vị trí của thuộc tính đó (không bắt buộc) so với các lớp thẻ thông tin khác. - Gán đối tượng
GMSTileLayer
cho bản đồ bằng cách đặt thuộc tínhmap
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 một lớp ô. Với mỗi lớp, bạn sẽ cần xác định cách tìm nạp đúng thẻ thông tin bản đồ cho một tập hợp toạ độ {x,y,zoom}
nhất định. Có các lựa chọn như sau:
- Lớp con
GMSSyncTileLayer
, cung cấp phương thức triển khaitileForX: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 hiện có,
GMSURLTileLayer
, để tự động tìm nạp thẻ thông tin từ các URL, cung cấp khốiGMSTileURLConstructor
.GMSURLTileLayer
là một lớp cụ thể không thể phân lớp con được.
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 Maps cho iOS biết rằng dữ liệu hiện chưa 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 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 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
. Đoạn mã dưới đây cho biết cách sử dụng GMSURLTileLayer
để hiển thị sơ đồ mặt bằ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 thẻ thông tin dưới dạng UIImage
GMSSyncTileLayer
và GMSTileLayer
là các lớp trừu tượng được thiết kế để phân lớp con. Bạn có thể dùng các lớp này để phân phát thẻ thông tin dưới dạng UIImage
. Ví dụ bên dưới cho thấy cách kết xuất hình ảnh tuỳ chỉnh trên một số thẻ thông tin 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 bản đồ của đối tượng đó.
Swift
let layer = TestTileLayer() layer.map = mapView
Objective-C
GMSTileLayer *layer = [[TestTileLayer alloc] init]; layer.map = mapView;
Ô DPI cao dành 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ố pixel mà hình ảnh thẻ thông tin được trả về sẽ ưu tiên hiển thị dưới dạng; giá trị 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 là 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ể điều chỉnh 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 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ẽ có giao diện đẹ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 là thiết bị Retina sẽ trông đẹp nhất với hình ảnh thông thường và tileSize
mặc định là 256.
Xoá thẻ thông tin cũ
Nếu các ô do lớp cung cấp có trạng thái "đã lỗi thời", thì phương thức clearTileCache
phải được gọi trên lớp để buộc làm mới. Thao tác này sẽ khiến tất cả các thẻ thông tin trên lớp này được tải lại.
Swift
layer.clearTileCache()
Objective-C
[layer clearTileCache];