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