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

เลือกแพลตฟอร์ม: 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 หรือตาราง 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];