Tile Layers

選取平台： Android iOS JavaScript

You can add images on top of your map as a Tile Layer. 地圖方塊圖層為 放置在特定縮放等級的地圖圖塊上方。資訊方塊夠多， 可以彌補整個地圖的 Google 地圖資料，並有不同的縮放等級。

簡介

圖塊圖層 (有時稱為圖塊疊加層) 可讓您疊加 Google 基本地圖圖塊上方的圖像。這是新增資料的絕佳方式 - 例如搜尋點或路況資訊，以及 與 kGMSTypeNone 地圖類型結合時， 方塊圖層，有效率地取代 Google 的基本地圖資料。

當您想加入大量圖像時，圖塊圖層就相當實用， 包括涵蓋大範圍地理區域的地圖相反地，地面 想修正一張圖片的單張圖片時，這項功能就相當實用 地圖上的點。

圖塊座標

Maps API 會將各縮放等級的圖像分為一組正方形地圖 圖塊，這些圖塊會依排序順序排列。地圖捲動至 建立新的位置或調整縮放等級時，Maps API 會判斷哪些地圖方塊會呈現新的位置。 並將其轉譯為一組資訊方塊，以便擷取。

如果是 Google 實作的麥卡托投影， 座標 (0,0) 一律位於地圖的西北角，且為 x 值 從西到東遞增，y 值則從北到南遞增。 系統會使用從該原點開始的 x,y 座標來建立圖塊索引。例如，在 縮放等級 2，如果地球會分成 16 個圖塊，每個地圖方塊都可以 由不重複的 x,y 組合所參照：

由四列和四欄圖塊組成的世界地圖。

Each map tile is a 256x256 point square. 縮放等級為 0 時，全世界 顯示在單一圖塊中每個縮放等級會將地圖放大 就是兩倍因此，縮放等級為 1 時，地圖會算繪為 2x2 方格 縮放等級為 2 的 4x4 方格、縮放等級為 3 的 8x8 方格，以此類推。 如果要建立圖塊圖層的圖片，則必須建立新的 針對您想支援的每個縮放等級，每個地圖方塊 256x256 點圖片。

新增圖塊圖層

  1. 將 GMSURLTileLayer 物件或 GMSTileLayer/GMSSyncTileLayer。
  2. 視需要修改 zIndex 屬性，調整其在以下位置的位置： 相對地
  3. 設定 GMSTileLayer 物件的 map，將物件指派給地圖 資源。

Maps SDK for iOS 提供三種類別，可用來 實作方塊圖層您需要為每個類別定義擷取方式 指定 {x,y,zoom} 座標的正確地圖圖塊。 可用選項如下：

  • 子類別 GMSSyncTileLayer，提供實作 傳回 UIImage 執行個體的 tileForX:y:zoom。
  • 子類別 GMSTileLayer，提供非同步實作 稍後會以資訊方塊圖片進行呼叫的 requestTileForX:y:zoom 方法。
  • 使用現有類別 GMSURLTileLayer 自動擷取資訊方塊 ，提供 GMSTileURLConstructor 區塊。GMSURLTileLayer 是無法設為子類別的具體類別。

如果是 GMSSyncTileLayer 或 GMSTileLayer 子類別，提供 nil 圖塊結果會讓 Maps SDK for iOS 得知目前資料為何 但日後或許會推出另外 傳回 kGMSTileLayerNoTile，表示這個位置沒有資訊方塊 或 HTTP/HTTPS 位置

對於 GMSURLTileLayer，從 GMSTileURLConstructor 傳回 nil 將會 表示這個位置沒有圖塊。

使用 `GMSURLTileLayer` 從網址擷取圖塊

GMSURLTileLayer 不需要子類別，但您必須實作 GMSTileURLConstructor 區塊。以下程式碼顯示如何 使用 GMSURLTileLayer 顯示多樓層建築物的平面圖。

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;

子類別 GMSSyncTileLayer 做為 UIImage 提供資訊方塊

GMSSyncTileLayer 和 GMSTileLayer 是抽象類別，設計用於 子類別。您可以使用這些類別做為 UIImage 的資訊方塊。下方 範例說明如何在地圖上的部分圖塊上顯示自訂圖片 將 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

To add the layer to your map, instantiate the object and set its map property.

Swift

let layer = TestTileLayer()
layer.map = mapView

Objective-C

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

High DPI Tiles for Retina devices

你可以搭配以下其中一種使用高 DPI 圖片：GMSSyncTileLayer 或者將 tileSize 設為 512，選擇 GMSURLTileLayer。 tileSize 屬性代表傳回的圖塊的像素數量 圖片優先顯示預設值為 256；該維度 。

如果您要在高 DPI 裝置上顯示一般的 DPI 圖塊，可以將 方法是將 tileSize 設為 512。請注意，放大圖片可能會減少 圖片品質，尤其是細行文字或文字為獲得最佳結果，請將 tileSize 和圖片 DPI 的顯示圖片。在 Retina 裝置上顯示的地圖 在 tileSize 為 512 的 DPI 圖片中，以 DPI 圖片呈現最佳視覺效果； 而在非 Retina 裝置上顯示的地圖雖然與一般圖像很出色 以及預設的 tileSize 設為 256

正在清除過時的圖塊

如果圖層提供的圖塊變成「過時」，則 方法 您必須在圖層上呼叫 clearTileCache，才能強制重新整理。這將 會使這個圖層上的所有地圖方塊重新載入。

Swift

layer.clearTileCache()

Objective-C

[layer clearTileCache];