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

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

เกริ่นนำ

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

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

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

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

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

ชิ้นส่วนแผนที่แต่ละชิ้นเป็นสี่เหลี่ยมจัตุรัสขนาด 256x256 เมื่อซูมระดับ 0 ภาพทั้งโลกจะแสดงในไทล์เดียว ระดับการซูมแต่ละระดับจะเพิ่มการขยายสองเท่า ดังนั้น ที่ระดับการซูม 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 เพื่อแสดงแผนผังชั้นของอาคารหลายชั้น

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 สูงสำหรับอุปกรณ์ที่มีหน้าจอเรตินา

คุณใช้รูปภาพ 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];