Layer Petak

Pilih platform: Android iOS JavaScript

Anda bisa menambahkan gambar di atas peta sebagai Layer Petak. Lapisan Petak ditempatkan di atas ubin peta pada tingkat zoom tertentu. Dengan ubin yang cukup, Anda dapat melengkapi data peta Google untuk seluruh peta, di beberapa tingkat zoom.

Pengantar

Lapisan ubin (terkadang disebut Overlay Ubin) memungkinkan Anda menempatkan gambar di atas ubin peta dasar Google. Ini adalah cara terbaik untuk menambahkan data - seperti lokasi menarik atau informasi lalu lintas - dan citra lokal ke aplikasi Anda. Jika dikombinasikan dengan jenis peta kGMSTypeNone, lapisan ubin secara efektif memungkinkan Anda mengganti data peta dasar Google dengan data Anda sendiri.

Lapisan ubin berguna jika Anda ingin menambahkan gambar yang besar ke peta, yang biasanya mencakup area geografis yang luas. Sebaliknya, overlay bumi berguna jika Anda ingin menetapkan satu gambar pada satu titik di peta.

Koordinat ubin

Maps API membagi gambar pada setiap tingkat zoom menjadi satu set ubin peta bujur sangkar, yang disusun dalam petak yang diurutkan. Saat peta di-scroll ke lokasi baru, atau ke tingkat zoom baru, Maps API akan menentukan ubin yang diperlukan, dan menerjemahkannya menjadi satu set ubin yang akan diambil.

Untuk penerapan proyeksi Mercator oleh Google, ubin dengan koordinat (0,0) selalu berada di sudut barat laut peta, dengan nilai x meningkat dari barat ke timur dan nilai y meningkat dari utara ke selatan. Kartu diindeks menggunakan koordinat x,y dari asal tersebut. Misalnya, pada tingkat zoom 2, saat bumi dibagi menjadi 16 ubin, setiap ubin dapat direferensikan oleh pasangan x,y khusus:

Peta dunia yang dibagi menjadi empat baris dan empat kolom ubin.

Setiap petak peta adalah 256x256 titik persegi. Pada tingkat zoom 0, seluruh dunia dirender ke dalam satu ubin. Setiap tingkat zoom akan meningkatkan pembesaran dengan faktor dua. Jadi, pada tingkat zoom 1, peta akan dirender sebagai petak petak 2x2, atau petak 4x4 pada tingkat zoom 2, petak 8x8 pada tingkat zoom 3, dan seterusnya. Jika membuat gambar untuk lapisan ubin, Anda harus membuat gambar baru berukuran 256x256 titik untuk setiap ubin pada setiap tingkat zoom yang ingin didukung.

Menambahkan Lapisan Ubin

  1. Buat instance objek GMSURLTileLayer, atau subclass kustom GMSTileLayer/GMSSyncTileLayer.
  2. Jika ingin, ubah properti zIndex untuk menyesuaikan posisinya sehubungan dengan lapisan ubin lainnya.
  3. Tetapkan objek GMSTileLayer ke peta dengan menetapkan properti map.

Maps SDK for iOS menyediakan tiga class yang dapat digunakan untuk menerapkan lapisan kartu. Pada setiap class, Anda perlu menentukan cara mengambil ubin peta yang benar untuk sekumpulan koordinat {x,y,zoom} tertentu. Opsi yang tersedia adalah:

  • Subclass GMSSyncTileLayer, menyediakan implementasi tileForX:y:zoom yang menampilkan instance UIImage.
  • Subclass GMSTileLayer, yang menyediakan implementasi metode asinkron requestTileForX:y:zoom yang kemudian memanggil kembali dengan gambar kartu.
  • Gunakan class yang ada, GMSURLTileLayer, untuk mengambil kartu secara otomatis dari URL, yang menyediakan blok GMSTileURLConstructor. GMSURLTileLayer adalah class konkret yang tidak dapat dibuatkan subclass-nya.

Dalam kasus pembuatan subclass GMSSyncTileLayer atau GMSTileLayer, memberikan hasil ubin nil akan memberi tahu Maps SDK for iOS bahwa data saat ini tidak tersedia, tetapi mungkin tersedia di masa mendatang. Atau, tampilkan kGMSTileLayerNoTile untuk menunjukkan bahwa tidak ada kartu di lokasi ini.

Untuk GMSURLTileLayer, menampilkan nil dari GMSTileURLConstructor akan menunjukkan bahwa tidak ada kartu di lokasi ini.

Menggunakan `GMSURLTileLayer` untuk mengambil tile dari URL

GMSURLTileLayer tidak memerlukan subclass, tetapi Anda harus mengimplementasikan blok GMSTileURLConstructor. Kode di bawah ini menunjukkan cara menggunakan GMSURLTileLayer untuk menampilkan denah lantai bangunan bertingkat.

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;

Subclass GMSSyncTileLayer untuk menampilkan kartu sebagai UIImage

GMSSyncTileLayer dan GMSTileLayer adalah class abstrak yang dirancang untuk di-subclass. Anda dapat menggunakan class ini untuk menyajikan kartu sebagai UIImage. Contoh di bawah ini menunjukkan cara merender gambar kustom di atas beberapa ubin pada peta dengan membuat subclass 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

Untuk menambahkan layer ke peta Anda, buat instance objek dan setel properti petanya.

Swift

let layer = TestTileLayer()
layer.map = mapView

Objective-C

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

Ubin DPI Tinggi untuk perangkat Retina

Anda dapat menggunakan gambar DPI tinggi dengan GMSSyncTileLayer atau GMSURLTileLayer dengan menyetel tileSize ke 512. Properti tileSize menunjukkan jumlah piksel yang dipilih untuk ditampilkan oleh gambar ubin yang ditampilkan. Nilai defaultnya adalah 256 — dimensi kartu Google Maps pada perangkat non-Retina.

Jika Anda menampilkan ubin DPI normal di perangkat DPI tinggi, Anda dapat menskalakan gambar dengan menyetel tileSize ke 512. Perlu diperhatikan bahwa meningkatkan skala gambar dapat mengurangi kualitas gambar, terutama untuk garis-garis halus atau teks. Untuk hasil terbaik, cocokkan tileSize dan DPI gambar dengan layar. Peta yang ditampilkan pada perangkat Retina akan terlihat paling baik saat menampilkan gambar DPI tinggi dengan tileSize 512; sedangkan peta yang ditampilkan pada perangkat non-Retina akan terlihat bagus dengan gambar normal dan tileSize default 256.

Membersihkan ubin yang sudah tidak berlaku

Jika kartu yang disediakan oleh lapisan sudah 'tidak berlaku' lagi, metode clearTileCache harus dipanggil pada lapisan tersebut untuk memaksakan refresh. Tindakan ini akan menyebabkan semua ubin di lapisan ini dimuat ulang.

Swift

layer.clearTileCache()

Objective-C

[layer clearTileCache];