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

คุณสามารถเพิ่มรูปภาพที่ด้านบนของแผนที่เป็นเลเยอร์ชิ้นส่วนได้ เลเยอร์ชิ้นส่วนแผนที่จะวางอยู่ด้านบนของชิ้นส่วนแผนที่ที่ระดับการซูมที่เฉพาะเจาะจง หากมีไทล์มากพอ คุณจะสามารถเสริมข้อมูลแผนที่ของ 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];