คุณสามารถเพิ่มรูปภาพที่ด้านบนของแผนที่เป็นเลเยอร์ของชิ้นส่วนแผนที่ เลเยอร์ของชิ้นส่วนแผนที่จะวางอยู่ด้านบนของชิ้นส่วนแผนที่ในระดับการซูมเฉพาะ เมื่อมีชิ้นส่วนข้อมูลเพียงพอ คุณสามารถเพิ่มข้อมูลแผนที่ของ Google สำหรับทั้งแผนที่ในระดับการซูมหลายระดับได้
เกริ่นนำ
เลเยอร์ของชิ้นส่วนแผนที่ (บางครั้งเรียกว่าการวางซ้อนของชิ้นส่วนแผนที่) ช่วยให้คุณวางรูปภาพซ้อนทับบนชิ้นส่วนแผนที่ฐานของ Google ได้ นี่เป็นวิธีที่ยอดเยี่ยมในการเพิ่มข้อมูล เช่น จุดสนใจหรือข้อมูลการจราจร และภาพในท้องถิ่นลงในแอปของคุณ เมื่อใช้ร่วมกับประเภทแผนที่ kGMSTypeNone
เลเยอร์ของชิ้นส่วนแผนที่จะช่วยให้คุณแทนที่ข้อมูลแผนที่ฐานของ Google ด้วยข้อมูลแผนที่ของคุณเองได้อย่างมีประสิทธิภาพ
เลเยอร์ของชิ้นส่วนแผนที่มีประโยชน์เมื่อต้องการเพิ่มรูปภาพที่กว้างขวาง โดยมักครอบคลุมพื้นที่ทางภูมิศาสตร์ขนาดใหญ่ลงในแผนที่ ในทางตรงกันข้ามการวางภาพซ้อนจะมีประโยชน์เมื่อคุณต้องการแก้ไขภาพเดียวที่จุดใดจุดหนึ่งบนแผนที่
พิกัดชิ้นส่วนแผนที่
Maps API จะแยกภาพในแต่ละระดับการซูมออกเป็นชุดชิ้นส่วนแผนที่สี่เหลี่ยมจัตุรัสที่จัดเรียงตามลำดับ เมื่อแผนที่เลื่อนไปที่ตำแหน่งใหม่ หรือเลื่อนไปยังระดับการซูมใหม่ Maps API จะกำหนดว่าต้องใช้ชิ้นส่วนใดบ้าง จากนั้นจึงแปลเป็นชุดชิ้นส่วนเพื่อดึงข้อมูล
สำหรับการใช้เส้นโครงเมอร์เคเตอร์ของ Google ไทล์ที่มีพิกัด (0,0) จะอยู่ที่มุมตะวันตกเฉียงเหนือของแผนที่เสมอ โดยค่า x
จะเพิ่มขึ้นจากตะวันตกไปตะวันออก และค่า y
เพิ่มขึ้นจากเหนือไปใต้
ระบบจะจัดทำดัชนีชิ้นส่วนข้อมูลโดยใช้พิกัด x,y
จากต้นทางนั้น เช่น เมื่อซูมระดับ 2 เมื่อพื้นโลกแบ่งออกเป็น 16 ชิ้นส่วน แต่ละไทล์จะอ้างอิงได้ด้วยคู่ x,y
ที่ไม่ซ้ำกัน ดังนี้
ชิ้นส่วนแผนที่แต่ละชิ้นจะเป็นสี่เหลี่ยมจัตุรัสขนาด 256x256 จุด เมื่อซูมระดับ 0 ภาพทั้งโลกจะแสดงผลในไทล์เดียว ระดับการซูมแต่ละระดับจะเพิ่มการขยาย 1 เท่า ดังนั้น ที่ระดับการซูม 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];