คุณสามารถเพิ่มรูปภาพที่ด้านบนของแผนที่เป็นเลเยอร์ชิ้นส่วนได้ เลเยอร์ชิ้นส่วนแผนที่จะวางอยู่เหนือชิ้นส่วนแผนที่ในระดับการซูมเฉพาะ เมื่อมีแผนที่ย่อยเพียงพอ คุณสามารถเสริมข้อมูลแผนที่ของ Google สำหรับแผนที่ทั้งหมดด้วยการซูมหลายระดับ
เกริ่นนำ
เลเยอร์ของชิ้นส่วนแผนที่ (บางครั้งเรียกว่าการวางซ้อนของชิ้นส่วนแผนที่) ช่วยให้คุณวางรูปภาพซ้อนทับบนชิ้นส่วนแผนที่ฐานของ Google ได้ นี่เป็นวิธีที่ยอดเยี่ยมในการเพิ่มข้อมูล เช่น จุดสนใจหรือข้อมูลการจราจร และภาพท้องถิ่นลงในแอปของคุณ เมื่อใช้ร่วมกับประเภทแผนที่ kGMSTypeNone
เลเยอร์ชิ้นส่วนทำให้คุณสามารถแทนที่ข้อมูลแผนที่ฐานของ Google ด้วยข้อมูลแผนที่ของคุณเองได้อย่างมีประสิทธิภาพ
เลเยอร์ของชิ้นส่วนแผนที่มีประโยชน์เมื่อคุณต้องการเพิ่มภาพขนาดใหญ่ ซึ่งโดยปกติจะครอบคลุมพื้นที่ทางภูมิศาสตร์ขนาดใหญ่ลงในแผนที่ ในทางตรงกันข้าม การวางซ้อนพื้นจะมีประโยชน์เมื่อคุณต้องการแก้ไขภาพเดียวที่จุดใดจุดหนึ่งบนแผนที่
พิกัดแผนที่ย่อย
Maps API จะแยกภาพในแต่ละระดับการซูมออกเป็นชุดชิ้นส่วนแผนที่สี่เหลี่ยมจัตุรัสที่จัดเรียงไว้ในตารางตามลำดับ เมื่อแผนที่เลื่อนไปยังตำแหน่งใหม่ หรือเลื่อนไปยังระดับการซูมใหม่ Maps API จะกำหนดว่าต้องใช้ชิ้นส่วนใด และแปลชิ้นส่วนนั้นเป็นชุดชิ้นส่วนที่จะดึงข้อมูล
สำหรับการใช้เส้นโครงเมอร์เคเตอร์ของ Google ไทล์ที่มีพิกัด (0,0) จะอยู่ที่มุมตะวันตกเฉียงเหนือของแผนที่เสมอ โดยมีค่า x
เพิ่มขึ้นจากทิศตะวันตกถึงทิศตะวันออก และค่า y
จะเพิ่มขึ้นจากเหนือถึงใต้
ระบบจะจัดทำดัชนีการ์ดโดยใช้พิกัด x,y
จากต้นทางนั้น ตัวอย่างเช่น เมื่อซูมระดับ 2 เมื่อโลกแบ่งออกเป็น 16 ชิ้นส่วน แต่ละชิ้นส่วนจะใช้คู่ x,y
ที่ไม่ซ้ำกันอ้างอิงได้
แต่ละแผนที่ชิ้นส่วนเป็นสี่เหลี่ยมจัตุรัสขนาด 256x256 เมื่อซูมถึงระดับ 0 แสดงว่า โลกทั้งใบจะแสดงในไทล์เดียว ระดับการซูมแต่ละระดับจะเพิ่มการขยาย 2 เท่า ดังนั้น ในระดับการซูมที่ 1 แผนที่จะแสดงผลเป็นตารางขนาด 2x2 หรือตาราง 4x4 ที่ระดับการซูม 2, ตารางกริดขนาด 8x8 ที่ระดับการซูม 3 เป็นต้น หากคุณกำลังสร้างภาพสำหรับเลเยอร์ของชิ้นส่วนภาพ คุณจะต้องสร้างภาพขนาด 256x256 จุดใหม่สำหรับแต่ละภาพในแต่ละระดับการซูมที่คุณต้องการสนับสนุน
การเพิ่มเลเยอร์ไทล์
- สร้างอินสแตนซ์
GMSURLTileLayer
ออบเจ็กต์ หรือคลาสย่อยที่กำหนดเองของGMSTileLayer
/GMSSyncTileLayer
- คุณเลือกแก้ไขพร็อพเพอร์ตี้
zIndex
เพื่อปรับตำแหน่งให้สัมพันธ์กับเลเยอร์ชิ้นส่วนอื่นๆ ได้ - กำหนดออบเจ็กต์
GMSTileLayer
ให้กับแผนที่โดยการตั้งค่าพร็อพเพอร์ตี้map
Maps SDK สำหรับ iOS มี 3 คลาสที่สามารถใช้เพื่อติดตั้งใช้งานเลเยอร์ไทล์ได้ ในแต่ละคลาส คุณจะต้องกำหนดวิธีดึงชิ้นส่วนแผนที่ที่ถูกต้องสำหรับชุดพิกัด {x,y,zoom}
ที่ระบุ ตัวเลือกที่ใช้ได้มีดังนี้
- คลาสย่อย
GMSSyncTileLayer
ที่มอบการใช้งานtileForX:y:zoom
ที่แสดงผลUIImage
อินสแตนซ์ - คลาสย่อย
GMSTileLayer
ซึ่งใช้เมธอดแบบไม่พร้อมกันrequestTileForX:y:zoom
ซึ่งในภายหลังจะเรียกใช้รูปภาพย่อย - ใช้คลาส
GMSURLTileLayer
ที่มีอยู่เพื่อดึงข้อมูลไทล์จาก URL โดยอัตโนมัติ โดยระบุบล็อกGMSTileURLConstructor
GMSURLTileLayer
เป็นคลาสที่เป็นรูปธรรมและจัดเข้าคลาสย่อยไม่ได้
ในกรณีของคลาสย่อย GMSSyncTileLayer
หรือ GMSTileLayer
การระบุผลลัพธ์ของการ์ด nil
จะบอก Maps SDK สำหรับ iOS ว่าข้อมูลไม่พร้อมใช้งานในขณะนี้ แต่อาจใช้งานได้ในอนาคต หรือแสดงผล kGMSTileLayerNoTile
เพื่อระบุว่าไม่มีการ์ดที่ตำแหน่งนี้
สำหรับ GMSURLTileLayer
การแสดงผล nil
จาก GMSTileURLConstructor
จะบ่งบอกว่าไม่มีไทล์ที่ตำแหน่งนี้
การใช้ "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
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
หากต้องการเพิ่มเลเยอร์ลงในแผนที่ ให้สร้างอินสแตนซ์วัตถุและตั้งค่าพร็อพเพอร์ตี้แผนที่
Swift
let layer = TestTileLayer() layer.map = mapView
Objective-C
GMSTileLayer *layer = [[TestTileLayer alloc] init]; layer.map = mapView;
ภาพ DPI สูงสำหรับอุปกรณ์ที่มีหน้าจอ Retina
คุณสามารถใช้รูปภาพ DPI สูงกับ GMSSyncTileLayer
หรือ GMSURLTileLayer
โดยตั้งค่า tileSize
เป็น 512
พร็อพเพอร์ตี้ tileSize
ระบุจำนวนพิกเซลที่รูปภาพชิ้นส่วนที่ส่งกลับมาจะแสดง ค่าเริ่มต้นคือ 256 ซึ่งเป็นมิติข้อมูลของชิ้นส่วน Google Maps บนอุปกรณ์ที่ไม่ใช่หน้าจอ Retina
หากคุณกำลังแสดงชิ้นส่วน DPI ปกติบนอุปกรณ์ DPI สูง คุณสามารถปรับขนาดรูปภาพได้โดยตั้งค่า tileSize
เป็น 512 โปรดทราบว่าการเพิ่มขนาดรูปภาพอาจลดคุณภาพของรูป โดยเฉพาะสำหรับบรรทัดหรือข้อความอย่างละเอียด เพื่อให้ได้ผลลัพธ์ที่ดีที่สุด ให้จับคู่
tileSize
และ DPI รูปภาพกับจอแสดงผล แผนที่ที่แสดงบนอุปกรณ์ Retina จะดูดีที่สุดเมื่อแสดงภาพ DPI สูงที่มี tileSize
เท่ากับ 512 ส่วนแผนที่ที่แสดงบนอุปกรณ์ที่ไม่ใช่หน้าจอ Retina จะดูดีสำหรับภาพปกติและ tileSize
เริ่มต้นคือ 256
กำลังล้างการ์ดที่ไม่มีอัปเดต
หากชิ้นส่วนที่เลเยอร์ให้ไว้กลายเป็น "ไม่มีอัปเดต" ควรเรียกใช้เมธอด clearTileCache
บนเลเยอร์นั้นเพื่อบังคับให้รีเฟรช ซึ่งทำให้มีการโหลดชิ้นส่วนทั้งหมดในเลเยอร์นี้ซ้ำ
Swift
layer.clearTileCache()
Objective-C
[layer clearTileCache];