שכבות אריחים

בחירת פלטפורמה: Android iOS JavaScript

אתם יכולים להוסיף תמונות מעל המפה כשכבת משבצות. שכבות של קטעי מפה ממוקמות מעל קטע מפה ברמת זום ספציפית. אם יש לכם מספיק משבצות, אתם יכולים להוסיף לנתוני המפה של Google את כל המפה, בכמה רמות זום.

מבוא

שכבות של קטעי מפה, שלפעמים נקראות שכבות מעל קטעי מפה, מאפשרות להציב תמונות מעל קטעי המפה הבסיסית של Google. אתם יכולים להשתמש בתכונה הזו כדי להוסיף לאפליקציה נתונים, כמו נקודות עניין או מידע על תנועה, ותמונות מקומיות. בשילוב עם סוג המפה kGMSTypeNone, שכבות משבצות מאפשרות לכם להחליף את נתוני המפה הבסיסית של Google בנתונים משלכם.

שכבות של משבצות מפה שימושיות כשרוצים להוסיף למפה תמונות נרחבות, שבדרך כלל מכסות אזורים גיאוגרפיים גדולים. לעומת זאת, שכבות-על של פני השטח שימושיות כשרוצים לתקן תמונה אחת בנקודה אחת במפה.

קואורדינטות של קטע במפה

‫Maps API מחלק את התמונות בכל רמת זום לקבוצה של משבצות מפה ריבועיות, שמסודרות ברשת. כשגוללים במפה למיקום חדש או לרמת זום חדשה, Maps API קובע אילו משבצות נדרשות ומתרגם את זה לקבוצה של משבצות שצריך לאחזר.

בהטלת מרקטור של Google, המשבצת עם הקואורדינטה (0,0) תמיד נמצאת בפינה הצפון-מערבית של המפה, כאשר ערכי x גדלים ממערב למזרח וערכי y גדלים מצפון לדרום. המשבצות נוספות לאינדקס באמצעות קואורדינטות x,y מאותה נקודת מוצא. לדוגמה, ברמת זום 2, כשהעולם מחולק ל-16 משבצות, אפשר להפנות לכל משבצת באמצעות זוג ערכי x,y ייחודי:

מפת העולם מחולקת לארבע שורות וארבע עמודות של משבצות.

כל משבצת במפה היא ריבוע של 256x256 נקודות. ברמת זום 0, כל העולם מוצג במשבצת אחת. כל רמת זום מגדילה את התצוגה פי שניים. לדוגמה, ברמת זום 1 המפה מוצגת כרשת של 2x2 משבצות, ברמת זום 2 כרשת של 4x4 משבצות וברמת זום 3 כרשת של 8x8 משבצות. כדי ליצור תמונות לשכבת משבצות, יוצרים תמונה בגודל 256x256 נקודות לכל משבצת בכל רמת זום שרוצים לתמוך בה.

הוספת שכבת משבצות

  1. יוצרים אובייקט GMSURLTileLayer או מחלקת משנה בהתאמה אישית של GMSTileLayer או GMSSyncTileLayer.
  2. אפשר לשנות את המאפיין zIndex כדי להתאים את המיקום שלו ביחס לשכבות אחרות של משבצות.
  3. מקצים את האובייקט GMSTileLayer למפה על ידי הגדרת המאפיין map שלו.

‫SDK של מפות ל-iOS כולל שלוש מחלקות שאפשר להשתמש בהן כדי להטמיע שכבת קטעי מפה. בכל מחלקה, תצטרכו להגדיר איך לאחזר את משבצת המפה הנכונה לקבוצה נתונה של קואורדינטות {x,y,zoom}. האפשרויות הזמינות הן:

  • מחלקה משנית GMSSyncTileLayer, שמספקת את ההטמעה של tileForX:y:zoom שמחזירה מופעים של UIImage.
  • מגדירים מחלקת משנה של GMSTileLayer, ומספקים את ההטמעה של השיטה האסינכרונית requestTileForX:y:zoom, שבהמשך מבצעת קריאה חוזרת עם תמונת משבצת.
  • משתמשים במחלקה הקיימת, GMSURLTileLayer, כדי לאחזר משבצות באופן אוטומטי מכתובות URL, ומספקים את הבלוק GMSTileURLConstructor. ‫GMSURLTileLayer היא מחלקה קונקרטית שאי אפשר ליצור לה מחלקת משנה.

אם משתמשים במחלקת משנה של GMSSyncTileLayer או GMSTileLayer, שליחת תוצאת משבצת nil תציין ל-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 במכשיר שאינו Retina.

אם אתם מציגים משבצות עם DPI רגיל במכשיר עם DPI גבוה, אתם יכולים להגדיל את התמונות על ידי הגדרת tileSize ל-512. חשוב לזכור שהגדלת התמונות עלולה לפגוע באיכות שלהן, במיוחד בקווים דקים או בטקסט. כדי לקבל את התוצאות הכי טובות, צריך להתאים את ה-DPI של ה-tileSize ושל התמונה למסך. מפות שמוצגות במכשיר Retina ייראו הכי טוב כשהן מציגות תמונות עם DPI גבוה ו-tileSize של 512. לעומת זאת, מפות שמוצגות במכשיר שאינו Retina ייראו מצוין עם תמונות רגילות ו-tileSize של 256 כברירת מחדל.

ניקוי משבצות לא עדכניות

אם המשבצות שסופקו על ידי השכבה הופכות ל"לא עדכניות", צריך לקרוא ל-method‏ clearTileCache בשכבה כדי לאלץ רענון. הפעולה הזו תגרום לטעינה מחדש של כל המשבצות בשכבה הזו.

Swift

layer.clearTileCache()

Objective-C

[layer clearTileCache];