タイルレイヤ

プラットフォームを選択: Android iOS JavaScript

地図の上にタイル レイヤとして画像を追加できます。タイルレイヤは、特定のズームレベルで地図タイルの上に配置されます。十分な数のタイルを使用すると、複数のズームレベルで Google の地図データを地図全体で補完できます。

はじめに

タイルレイヤ（タイル オーバーレイとも呼ばれます）を使用すると、Google の基本地図タイルの上に画像を重ねることができます。この方法で、スポットや交通情報などのデータ、ローカル画像をアプリに追加できます。kGMSTypeNone タイルタイプと組み合わせると、実質的に Google の基本地図データを独自の地図データに置き換えることができます。

タイルレイヤは、通常は広い地理的領域をカバーする広範な画像を地図に追加する場合に便利です。一方、地面オーバーレイは、地図上の 1 つの地点で 1 つの画像を修正したい場合に便利です。

タイル座標

Maps API は、各ズームレベルの画像を、決まったグリッドに配置された一連の正方形のマップタイルに分割します。地図を新しい位置にスクロールする、または新しいズームレベルにスクロールすると、Maps API は必要なタイルを決定し、取得するタイルのセットに変換します。

Google によるメルカトル図法の実装では、座標（0,0）のタイルは常に地図の北西端になり、x 値は西から東に増分し、y 値は北から南に増分します。タイルは、この原点からの x,y 座標を使用してインデックスが付けられます。たとえば、ズームレベル 2 で地球が 16 個のタイルに分割された場合は、各タイルは一意の x,y ペアで参照できます。

4 行 4 列のタイルで分割された世界地図。

各マップ タイプは 256 x 256 ポイントの正方形です。ズームレベル 0 では、全世界が 1 つのタイルにレンダリングされます。ズームレベルごとに 2 倍に拡大されます。つまり、ズームレベル 1 では 2x2 グリッド、ズームレベル 2 の 4x4 グリッド、ズームレベル 3 の 8x8 グリッドとしてレンダリングされます。タイルレイヤの画像を作成する場合は、サポートするズームレベルごとに、各タイルに新しい 256x256 ポイントの画像を作成する必要があります。

タイルレイヤの追加

  1. GMSURLTileLayer オブジェクト、または GMSTileLayer/GMSSyncTileLayer のカスタム サブクラスをインスタンス化します。
  2. 必要に応じて、zIndex プロパティを変更して、他のタイルレイヤとの相対位置を調整します。
  3. map プロパティを設定して、GMSTileLayer オブジェクトを地図に割り当てます。

Maps SDK for iOS には、タイルレイヤの実装に使用できる 3 つのクラスが用意されています。各クラスでは、所定の {x,y,zoom} 座標のセットに対して正しい地図タイルを取得する方法を定義する必要があります。使用できるオプションは次のとおりです。

  • サブクラス GMSSyncTileLayer。UIImage インスタンスを返す tileForX:y:zoom の実装を提供します。
  • サブクラス GMSTileLayer です。このクラスは、タイル画像を使用して後でコールバックする非同期メソッド requestTileForX:y:zoom の実装を提供します。
  • 既存のクラス GMSURLTileLayer を使用して URL からタイルを自動的に取得し、GMSTileURLConstructor ブロックを指定します。GMSURLTileLayer は、サブクラス化できない具象クラスです。

GMSSyncTileLayer または GMSTileLayer をサブクラス化する場合、nil タイルの結果を指定すると、データは現在利用できないが、今後使用できるようになることが Maps SDK for iOS に伝えられます。または、kGMSTileLayerNoTile を返し、この場所にタイルがないことを示します。

GMSURLTileLayer について、GMSTileURLConstructor から nil が返された場合は、この場所にタイルがないことを示します。

GMSGMSTileLayer を使用して URL からタイルを取得する

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;

タイルを UIImage として提供する GMSSyncTileLayer サブクラス

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

マップにレイヤーを追加するには、オブジェクトをインスタンス化して map プロパティを設定します。

Swift

let layer = TestTileLayer()
layer.map = mapView

Objective-C

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

Retina 端末用の高 DPI タイル

tileSize を 512 に設定すると、GMSSyncTileLayer または GMSURLTileLayer で高 DPI 画像を使用できます。tileSize プロパティは、返されるタイル画像を表示するピクセル数を示します。デフォルトは 256 で、これは Retina 以外のデバイスの Google マップ タイルのディメンションです。

高 DPI デバイスで通常の DPI タイルを表示している場合は、tileSize を 512 に設定することで画像をスケールアップできます。画像をアップスケーリングすると、特に細い線やテキストの場合に画質が低下する可能性があります。最良の結果を得るには、tileSize と画像 DPI をディスプレイに合わせてください。Retina デバイスに表示される地図は、tileSize が 512 の高 DPI 画像を表示したときに最適に表示されます。一方、Retina 以外のデバイスでは、通常の画像とデフォルトの tileSize 256 でマップが見やすくなります。

古いタイルを消去する

レイヤによって提供されるタイルが古くなった場合は、レイヤのメソッド clearTileCache を呼び出して強制的に更新する必要があります。これにより、このレイヤ上のすべてのタイルが再読み込みされます。

Swift

layer.clearTileCache()

Objective-C

[layer clearTileCache];