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

เลือกแพลตฟอร์ม: Android iOS JavaScript

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

บทนำ

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

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

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

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

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

แผนที่โลกแบ่งออกเป็น 4 แถวและ 4 คอลัมน์ของไทล์

ไทล์แผนที่แต่ละไทล์เป็นสี่เหลี่ยมจัตุรัสขนาด 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 เพื่อแสดงแปลนอาคารของอาคารหลายชั้น

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 เป็นคลาส Abstract ที่ออกแบบมาเพื่อเป็นคลาสย่อย คุณสามารถใช้คลาสเหล่านี้เพื่อแสดงการ์ดเป็น 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];