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

เลือกแพลตฟอร์ม แอนดรอยด์ 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 หรือตารางกริดขนาด 4x4 ที่ระดับการซูม 2 ตารางกริดขนาด 8x8 ที่ระดับการซูม 3 เป็นต้น หากคุณกำลังสร้างภาพสำหรับเลเยอร์ชิ้นส่วนแผนที่ คุณจะต้องสร้างภาพใหม่ รูปภาพจุดขนาด 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 เป็นชั้นเรียนนามธรรมที่ออกแบบมาเพื่อ เป็นคลาสย่อย คุณจะใช้คลาสเหล่านี้เพื่อแสดงการ์ดในฐานะ 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];