Anda bisa menambahkan gambar di atas peta sebagai Layer Petak. Lapisan Kartu ditempatkan di atas ubin peta pada tingkat zoom tertentu. Dengan jumlah ubin yang cukup, Anda dapat melengkapi data peta Google untuk keseluruhan peta, di berbagai 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 gambar 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 berurutan. 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
bertambah dari utara ke selatan.
Ubin 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:
Setiap petak peta adalah 256x256 titik persegi. Pada tingkat zoom 0, seluruh dunia dirender dalam satu ubin. Setiap tingkat zoom meningkatkan pembesaran dengan faktor dua. Jadi, pada tingkat zoom 1, peta akan dirender sebagai petak ubin 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 256x256 titik baru untuk setiap ubin pada setiap tingkat zoom yang ingin Anda dukung.
Menambahkan Lapisan Ubin
- Buat instance objek
GMSURLTileLayer
, atau subclass kustom dariGMSTileLayer
/GMSSyncTileLayer
. - Jika ingin, ubah properti
zIndex
untuk menyesuaikan posisinya sehubungan dengan lapisan ubin lainnya. - Tetapkan objek
GMSTileLayer
ke peta dengan menetapkan propertimap
.
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 kumpulan koordinat {x,y,zoom}
tertentu. Opsi
yang tersedia adalah:
- Subclass
GMSSyncTileLayer
, menyediakan implementasitileForX:y:zoom
yang menampilkan instanceUIImage
. - Subclass
GMSTileLayer
, menyediakan implementasi metode asinkronrequestTileForX:y:zoom
yang nantinya melakukan panggilan kembali dengan gambar kartu. - Gunakan class yang ada,
GMSURLTileLayer
, untuk mengambil kartu secara otomatis dari URL, yang menyediakan blokGMSTileURLConstructor
.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 akan 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 kartu 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;
Membuat subclass GMSSyncTileLayer
untuk menyajikan kartu sebagai UIImage
GMSSyncTileLayer
dan GMSTileLayer
adalah class abstrak yang dirancang untuk
di-subclass. Anda dapat menggunakan class ini untuk menampilkan 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 akan dipilih oleh gambar ubin
yang ditampilkan; properti ini defaultnya adalah 256 — dimensi
kartu Google Maps pada perangkat non-Retina.
Jika Anda menampilkan ubin DPI normal pada perangkat DPI tinggi, Anda dapat menskalakan
gambar dengan menyetel tileSize
ke 512. Perhatikan bahwa memperbesar 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 sangat 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.
Menghilangkan ubin yang sudah tidak berlaku
Jika kartu yang disediakan oleh lapisan menjadi 'tidak berlaku', metode
clearTileCache
harus dipanggil pada lapisan tersebut untuk memaksa pemuatan ulang. Ini akan
menyebabkan semua kartu di lapisan ini dimuat ulang.
Swift
layer.clearTileCache()
Objective-C
[layer clearTileCache];