เลเยอร์ของชิ้นส่วนแผนที่

คุณสามารถเพิ่มรูปภาพไว้ด้านบนแผนที่เป็นเลเยอร์แผนที่ย่อย โดยเลเยอร์แผนที่ย่อยจะวางซ้อนอยู่ด้านบนแผนที่ย่อยที่ระดับการซูมที่เฉพาะเจาะจง หากมีแผนที่ย่อยเพียงพอ คุณจะสามารถเสริมข้อมูลแผนที่ของ Google สำหรับแผนที่ทั้งผืนได้ในระดับการซูมหลายระดับ

บทนำ

เลเยอร์แผนที่ย่อย ซึ่งบางครั้งเรียกว่าการวางซ้อนของชิ้นส่วนแผนที่ ช่วยให้คุณวางซ้อนรูปภาพไว้ด้านบนชิ้นส่วนแผนที่ฐานของ Google ได้ ใช้ฟีเจอร์นี้เพื่อเพิ่มข้อมูล เช่น จุดที่น่าสนใจหรือข้อมูลการจราจร รวมถึงรูปภาพในท้องถิ่นลงในแอป เมื่อใช้ร่วมกับประเภทแผนที่ kGMSTypeNone เลเยอร์ชิ้นส่วนแผนที่จะช่วยให้คุณแทนที่ข้อมูลแผนที่ฐานของ Google ด้วยข้อมูลของคุณเองได้อย่างมีประสิทธิภาพ

เลเยอร์แผนที่ย่อยมีประโยชน์เมื่อคุณต้องการเพิ่มรูปภาพจำนวนมาก ซึ่งโดยปกติจะครอบคลุมพื้นที่ทางภูมิศาสตร์ขนาดใหญ่ลงในแผนที่ ในทางตรงกันข้าม การวางซ้อนบนพื้นดิน จะมีประโยชน์เมื่อคุณต้องการตรึงรูปภาพเดียวไว้ที่จุดใดจุดหนึ่ง บนแผนที่

พิกัดแผนที่ย่อย

Maps API จะแบ่งรูปภาพในแต่ละระดับการซูมออกเป็นชุดแผนที่ย่อยสี่เหลี่ยมจัตุรัส ซึ่งจัดเรียงเป็นตารางกริดตามลำดับ เมื่อแผนที่เลื่อนไปยังตำแหน่งใหม่หรือระดับการซูมใหม่ Maps API จะกำหนดแผนที่ย่อยที่จำเป็นและแปลเป็นชุดแผนที่ย่อยที่จะดึงข้อมูล

ในการใช้งานการฉายภาพแบบเมอร์เคเตอร์ของ Google แผนที่ย่อยที่มีพิกัด (0,0) จะอยู่ที่มุมตะวันตกเฉียงเหนือของแผนที่เสมอ โดยค่า x จะเพิ่มขึ้นจากตะวันตกไปตะวันออก และค่า y จะเพิ่มขึ้นจากเหนือลงใต้ ระบบจะจัดทำดัชนีแผนที่ย่อยโดยใช้พิกัด x,y จากจุดเริ่มต้นดังกล่าว ตัวอย่างเช่น ที่ระดับการซูม 2 เมื่อแบ่งโลกออกเป็น 16 แผนที่ย่อย แผนที่ย่อยแต่ละรายการจะอ้างอิงได้ด้วยคู่ x,y ที่ไม่ซ้ำกัน

แผนที่ย่อยแต่ละรายการเป็นสี่เหลี่ยมจัตุรัสขนาด 256x256 พิกเซล ที่ระดับการซูม 0 ระบบจะแสดงโลกทั้งใบในแผนที่ย่อยเดียว ระดับการซูมแต่ละระดับจะเพิ่มการขยายเป็น 2 เท่า ดังนั้น เช่น ที่ระดับการซูม 1 ระบบจะแสดงแผนที่เป็นตารางกริด 2x2 ของแผนที่ย่อย ที่ระดับการซูม 2 เป็นตารางกริด 4x4 และที่ระดับการซูม 3 เป็นตารางกริด 8x8 หากต้องการสร้างรูปภาพสำหรับเลเยอร์ชิ้นส่วนแผนที่ ให้สร้างรูปภาพขนาด 256x256 พิกเซลสำหรับชิ้นส่วนแผนที่แต่ละรายการในแต่ละระดับการซูมที่คุณต้องการรองรับ

เพิ่มเลเยอร์ชิ้นส่วนแผนที่

1. สร้างอินสแตนซ์ออบเจ็กต์ GMSURLTileLayer หรือคลาสย่อยที่กำหนดเองของ GMSTileLayer หรือ GMSSyncTileLayer
2. เลือกแก้ไขพร็อพเพอร์ตี้ zIndex เพื่อปรับตำแหน่งของเลเยอร์แผนที่ย่อยเมื่อเทียบกับเลเยอร์แผนที่ย่อยอื่นๆ
3. กำหนดออบเจ็กต์ 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 เพื่อแสดงแปลนอาคารของอาคารหลายชั้น

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
      

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

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
    }
  }
}

      

@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
      

หากต้องการเพิ่มเลเยอร์ลงในแผนที่ ให้สร้างอินสแตนซ์ออบเจ็กต์และตั้งค่าพร็อพเพอร์ตี้แผนที่

let layer = TestTileLayer()
layer.map = mapView
      

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 ในเลเยอร์เพื่อบังคับให้รีเฟรช ซึ่งจะทำให้ระบบโหลดแผนที่ย่อยทั้งหมดในเลเยอร์นี้ซ้ำ

layer.clearTileCache()
      

[layer clearTileCache];