เลเยอร์ของการ์ด

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

ข้อมูลเบื้องต้น

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

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

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

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

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

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

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 สูงสําหรับอุปกรณ์ Retina

คุณสามารถใช้รูปภาพ DPI สูงกับ GMSSyncTileLayer หรือ GMSURLTileLayer โดยตั้งค่า tileSize เป็น 512 พร็อพเพอร์ตี้ tileSize ระบุจํานวนพิกเซลที่ชิ้นส่วนแผนที่ส่งกลับมาจะแสดง ซึ่งเป็นค่าเริ่มต้นคือ 256 ซึ่งเป็นขนาดของชิ้นส่วน Google Maps บนอุปกรณ์ที่ไม่ใช่ Retina

หากแสดงชิ้นส่วน DPI ปกติบนอุปกรณ์ที่มี DPI สูง คุณปรับขนาดรูปภาพ ได้โดยตั้งค่า tileSize เป็น 512 โปรดทราบว่าการเพิ่มขนาดรูปภาพอาจลดคุณภาพของรูป โดยเฉพาะบรรทัดขนาดเล็กหรือข้อความ เพื่อผลลัพธ์ที่ดีที่สุด โปรดจับคู่ DPI และ tileSize กับจอแสดงผล แผนที่ที่แสดงบนอุปกรณ์ที่มีหน้าจอ Retina จะดูดีที่สุดเมื่อแสดงภาพที่มี DPI สูงและมี tileSize เท่ากับ 512 ในขณะที่แผนที่ที่แสดงบนอุปกรณ์ที่ไม่ใช่ Retina จะดูดีด้วยภาพปกติ และ tileSize เริ่มต้นคือ 256 ภาพ

กําลังล้างชิ้นส่วนที่ไม่มีอัปเดต

หากชิ้นส่วนที่ระบุโดยเลเยอร์กลายเป็น "ไม่มีอัปเดต" เมธอด clearTileCache ควรถูกเรียกในเลเยอร์เพื่อบังคับให้รีเฟรช ซึ่งจะทําให้ชิ้นส่วนทั้งหมดในเลเยอร์นี้โหลดซ้ํา

layer.clearTileCache()
      

[layer clearTileCache];