타일 오버레이

플랫폼 선택: Android iOS JavaScript

지도 상단에 이미지를 타일 계층으로 추가할 수 있습니다. 타일 레이어는 특정 확대/축소 수준에서 지도 타일 위에 배치됩니다. 타일이 충분한 경우 여러 확대/축소 수준에서 전체 지도에서 Google 지도 데이터를 보완할 수 있습니다.

소개

타일 레이어 (타일 오버레이라고도 함)를 사용하면 Google의 기본 지도 타일 위에 이미지를 겹칠 수 있습니다. 이는 관심 장소 또는 교통 정보와 같은 데이터와 로컬 이미지를 앱에 추가하는 좋은 방법입니다. kGMSTypeNone 지도 유형과 함께 사용하면 타일 레이어를 사용하여 Google의 기본 지도 데이터를 자체 데이터로 효과적으로 바꿀 수 있습니다.

타일 레이어는 일반적으로 큰 지리적 영역이 포함된 광범위한 이미지를 지도에 추가하려는 경우에 유용합니다. 반대로 지면 오버레이는 단일 이미지를 지도의 한 지점에 고정하려는 경우에 유용합니다.

타일 좌표

지도 API는 각 확대/축소 수준의 이미지를 정사각형 지도 타일 집합으로 분할하며 이 타일은 순서가 지정된 그리드로 정렬됩니다. 지도가 새 위치나 새로운 확대/축소 수준으로 스크롤되면 지도 API는 필요한 타일을 결정하고 가져올 타일 집합으로 변환합니다.

Google에서 구현한 메르카토르 투영법에서는 좌표가 (0,0)인 타일은 항상 지도의 북서쪽 모서리에 있으며, x 값은 서쪽에서 동쪽으로 갈수록 증가하고 y 값은 북쪽에서 남쪽으로 갈수록 증가합니다. 타일은 이 원점을 기준으로 x,y 좌표를 사용하여 색인이 생성됩니다. 예를 들어 확대/축소 수준 2에서 지구가 16개의 타일로 나뉘면 각 타일은 다음과 같이 고유한 x,y 쌍으로 참조될 수 있습니다.

타일의 행과 열이 각각 4개씩 나누어진 세계 지도

각 지도 타일은 256x256 포인트의 정사각형입니다. 확대/축소 수준 0에서는 전 세계가 하나의 타일에 렌더링됩니다. 각 확대/축소 수준에서 2의 배수로 배율이 올라갑니다. 따라서 확대/축소 수준 1에서 지도는 2x2 그리드, 확대/축소 수준 2에서는 4x4 그리드, 확대/축소 수준 3에서는 8x8 그리드 등으로 렌더링됩니다. 타일 레이어의 이미지를 생성하는 경우, 지원하고자 하는 각 확대/축소 수준의 각 타일에 대해 새로운 256x256 포인트 이미지를 생성해야 합니다.

타일 레이어 추가

  1. GMSURLTileLayer 객체 또는 GMSTileLayer/GMSSyncTileLayer의 맞춤 서브클래스를 인스턴스화합니다.
  2. 원하는 경우 zIndex 속성을 수정하여 다른 타일 레이어를 기준으로 위치를 조정할 수 있습니다.
  3. map 속성을 설정하여 GMSTileLayer 객체를 지도에 할당합니다.

iOS용 Maps SDK에서는 타일 레이어를 구현하는 데 사용할 수 있는 세 가지 클래스를 제공합니다. 각 클래스를 사용할 때 주어진 {x,y,zoom} 좌표 집합에 올바른 지도 타일을 가져오는 방법을 정의해야 합니다. 사용 가능한 옵션은 다음과 같습니다.

  • GMSSyncTileLayer 서브클래스를 사용하여 UIImage 인스턴스를 반환하는 tileForX:y:zoom의 구현을 제공합니다.
  • GMSTileLayer 서브클래스를 생성하여 나중에 타일 이미지로 콜백하는 비동기 메서드 requestTileForX:y:zoom의 구현을 제공합니다.
  • 기존 클래스 GMSURLTileLayer를 사용하여 URL에서 자동으로 타일을 가져오고 GMSTileURLConstructor 블록을 제공합니다. GMSURLTileLayer는 서브클래스로 분류할 수 없는 구체적인 클래스입니다.

GMSSyncTileLayer 또는 GMSTileLayer의 서브클래스를 생성하는 경우 nil 타일 결과를 제공하면 iOS용 Maps SDK에 현재 데이터를 사용할 수 없지만 향후에는 사용 가능할 수 있음을 알립니다. 또는 kGMSTileLayerNoTile를 반환하여 이 위치에 타일이 없음을 나타냅니다.

GMSURLTileLayer의 경우 GMSTileURLConstructor에서 nil를 반환하면 이 위치에 타일이 없음을 나타냅니다.

`GMSURLTileLayer` 를 사용하여 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;
      

GMSSyncTileLayer를 서브클래스로 생성하여 UIImage로 카드 제공

GMSSyncTileLayerGMSTileLayer는 서브클래스로 분류되도록 설계된 추상 클래스입니다. 이러한 클래스를 사용하여 타일을 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
      

지도에 계층을 추가하려면 객체를 인스턴스화하고 지도 속성을 설정합니다.

Swift

let layer = TestTileLayer()
layer.map = mapView
      

Objective-C

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

레티나 기기를 위한 고DPI 타일

tileSize를 512로 설정하여 DPI가 높은 이미지를 GMSSyncTileLayer 또는 GMSURLTileLayer와 함께 사용할 수 있습니다. tileSize 속성은 반환된 타일 이미지에서 표시할 픽셀 수를 나타냅니다. 기본값은 256(레티나가 아닌 기기의 Google 지도 타일 크기)입니다.

DPI가 높은 기기에 일반 DPI 타일을 표시하는 경우 tileSize를 512로 설정하여 이미지를 확대할 수 있습니다. 이미지를 확대하면 특히 섬세한 선이나 텍스트의 이미지 품질이 저하될 수 있습니다. 최상의 결과를 얻으려면 tileSize 및 이미지 DPI를 디스플레이와 일치시킵니다. 레티나 기기에 표시되는 지도는 tileSize가 512인 DPI가 높은 이미지를 표시할 때 가장 보기 좋게 표시되는 반면, 레티나가 아닌 기기에 표시되는 지도는 일반 이미지와 기본 tileSize 256에서 잘 표시됩니다.

오래된 타일 삭제

레이어에서 제공하는 타일이 '오래된' 경우 레이어에서 clearTileCache 메서드를 호출하여 강제로 새로고침해야 합니다. 이렇게 하면 이 레이어의 모든 타일이 다시 로드됩니다.

Swift

layer.clearTileCache()
      

Objective-C

[layer clearTileCache];