คุณสามารถเพิ่มรูปภาพบนแผนที่เป็นเลเยอร์ของชิ้นส่วนได้ เลเยอร์ของชิ้นส่วนแผนที่คือ ซึ่งวางอยู่เหนือชิ้นส่วนแผนที่ในระดับการซูมที่ต้องการ เมื่อมีการ์ดเพียงพอแล้ว สามารถเสริมข้อมูลแผนที่ของ 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 สูงสำหรับอุปกรณ์ที่มีหน้าจอเรตินา
คุณใช้รูปภาพ DPI สูงกับ GMSSyncTileLayer
ได้
หรือ GMSURLTileLayer
โดยตั้งค่า tileSize
เป็น 512
พร็อพเพอร์ตี้ tileSize
ระบุจำนวนพิกเซลที่ชิ้นส่วนที่แสดงผล
รูปภาพที่ต้องการแสดงเป็น ค่าเริ่มต้นคือ 256 ซึ่งมิติข้อมูล
ของชิ้นส่วนแผนที่ Google Maps บนอุปกรณ์ที่ไม่ใช่ Retina
ถ้าคุณแสดงไทล์ DPI ปกติบนอุปกรณ์ที่มี DPI สูง คุณสามารถปรับขนาด
รูปภาพได้โดยการตั้งค่า tileSize
เป็น 512 โปรดทราบว่าการปรับขนาดรูปภาพอาจลด
คุณภาพของรูป โดยเฉพาะเส้นบางๆ หรือข้อความ เพื่อผลลัพธ์ที่ดีที่สุด ให้จับคู่
tileSize
และ DPI ของรูปภาพไปยังจอแสดงผล แผนที่ที่แสดงบนอุปกรณ์ที่มีหน้าจอเรตินาจะ
ซึ่งจะดูดีที่สุดเมื่อแสดงรูปภาพที่มี DPI สูงซึ่งมี tileSize
เป็น 512
ขณะที่แผนที่ที่แสดงบนอุปกรณ์ที่ไม่ใช่ Retina จะดูดีเมื่อดูภาพปกติ
และ tileSize
เริ่มต้นเป็น 256
กำลังล้างการ์ดที่ไม่อัปเดต
หากชิ้นส่วนที่ระบุโดยเลเยอร์กลายเป็น "เก่า" เมธอด
ควรเรียก clearTileCache
ในเลเยอร์เพื่อบังคับการรีเฟรช การดำเนินการนี้จะ
ทำให้ชิ้นส่วนทั้งหมดในเลเยอร์นี้โหลดซ้ำ
Swift
layer.clearTileCache()
Objective-C
[layer clearTileCache];