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

เลือกแพลตฟอร์ม: 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 ภาพทั้งโลกจะแสดงผลในไทล์เดียว ระดับการซูมแต่ละระดับจะเพิ่มการขยาย 1 เท่า ดังนั้น ที่ระดับการซูม 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 สูงสำหรับอุปกรณ์ที่มีหน้าจอ 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];