צורות

ב-SDK של מפות ל-iOS יש כמה דרכים להוסיף צורות למפות. המערכת תומכת בצורות הבאות:

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

יש כמה דרכים לשנות את המראה של כל צורה.

קווים פוליגונים

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

כדי ליצור קו פוליגון, צריך לציין את הנתיב שלו על ידי יצירת אובייקט GMSMutablePath תואם עם שתי נקודות או יותר. כל CLLocationCoordinate2D מייצג נקודה על פני כדור הארץ. קטעי הקו נמתחים בין הנקודות לפי הסדר שבו מוסיפים אותן לנתיב. אפשר להוסיף נקודות לנתיב באמצעות השיטות addCoordinate: או addLatitude:longitude:.

let path = GMSMutablePath()
path.add(CLLocationCoordinate2D(latitude: -33.85, longitude: 151.20))
path.add(CLLocationCoordinate2D(latitude: -33.70, longitude: 151.40))
path.add(CLLocationCoordinate2D(latitude: -33.73, longitude: 151.41))
let polyline = GMSPolyline(path: path)
      

GMSMutablePath *path = [GMSMutablePath path];
[path addCoordinate:CLLocationCoordinate2DMake(-33.85, 151.20)];
[path addCoordinate:CLLocationCoordinate2DMake(-33.70, 151.40)];
[path addCoordinate:CLLocationCoordinate2DMake(-33.73, 151.41)];
GMSPolyline *polyline = [GMSPolyline polylineWithPath:path];
      

הוספת קו מרובה

1. יוצרים אובייקט GMSMutablePath.
2. מגדירים את הנקודות בנתיב באמצעות השיטות addCoordinate: או addLatitude:longitude:.
3. יוצרים אובייקט GMSPolyline חדש באמצעות הנתיב כארגומנטים.
4. מגדירים מאפיינים אחרים, כמו strokeWidth ו-strokeColor, לפי הצורך.
5. מגדירים את המאפיין map של GMSPolyline.
6. הקו הרצוף מופיע במפה.

קטע הקוד הבא מוסיף מלבן למפה:

let rectanglePath = GMSMutablePath()
rectanglePath.add(CLLocationCoordinate2D(latitude: 37.36, longitude: -122.0))
rectanglePath.add(CLLocationCoordinate2D(latitude: 37.45, longitude: -122.0))
rectanglePath.add(CLLocationCoordinate2D(latitude: 37.45, longitude: -122.2))
rectanglePath.add(CLLocationCoordinate2D(latitude: 37.36, longitude: -122.2))
rectanglePath.add(CLLocationCoordinate2D(latitude: 37.36, longitude: -122.0))

let rectangle = GMSPolyline(path: path)
rectangle.map = mapView
      

GMSMutablePath *rectanglePath = [GMSMutablePath path];
[rectanglePath addCoordinate:CLLocationCoordinate2DMake(37.36, -122.0)];
[rectanglePath addCoordinate:CLLocationCoordinate2DMake(37.45, -122.0)];
[rectanglePath addCoordinate:CLLocationCoordinate2DMake(37.45, -122.2)];
[rectanglePath addCoordinate:CLLocationCoordinate2DMake(37.36, -122.2)];
[rectanglePath addCoordinate:CLLocationCoordinate2DMake(37.36, -122.0)];

GMSPolyline *rectangle = [GMSPolyline polylineWithPath:path];
rectangle.map = mapView;
      

הסרת קו מרובה

כדי להסיר קו פוליגון מהמפה, מגדירים את המאפיין map של GMSPolyline לערך nil. לחלופין, אפשר להסיר את כל השכבות (כולל קווים פוליגונליים וצורות אחרות) במפה על ידי קריאה ל-method‏ GMSMapView‏clear.

mapView.clear()
      

[mapView clear];
      

התאמה אישית של קו פוליגוני

באובייקט GMSPolyline יש כמה מאפיינים שאפשר להשתמש בהם כדי לקבוע את המראה של הקו. הוא תומך באפשרויות הבאות:

strokeWidth

רוחב הקו כולו, בנקודות מסך. ברירת המחדל היא 1. רוחב התמונה לא משתנה כשמשנים את מרחק התצוגה במפה.

geodesic

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

spans

משמש לציון הצבע של מקטע אחד או יותר של קו פוליגון. המאפיין spans הוא מערך של אובייקטים מסוג GMSStyleSpan. הגדרת המאפיין spans היא הדרך המועדפת לשינוי הצבע של קו פוליגון.

strokeColor

אובייקט UIColor שמציין את הצבע של קו הפוליגון. ברירת המחדל היא blueColor. המערכת מתעלמת מהמאפיין strokeColor אם המאפיין spans מוגדר.

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

let path = GMSMutablePath()
path.addLatitude(-37.81319, longitude: 144.96298)
path.addLatitude(-31.95285, longitude: 115.85734)
let polyline = GMSPolyline(path: path)
polyline.strokeWidth = 10.0
polyline.geodesic = true
polyline.map = mapView
      

GMSMutablePath *path = [GMSMutablePath path];
[path addLatitude:-37.81319 longitude:144.96298];
[path addLatitude:-31.95285 longitude:115.85734];
GMSPolyline *polyline = [GMSPolyline polylineWithPath:path];
polyline.strokeWidth = 10.f;
polyline.geodesic = YES;
polyline.map = mapView;
      

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

polyline.strokeColor = .blue
      

polyline.strokeColor = [UIColor blueColor];
      

שינוי הצבע של קו מרובע

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

קטע הקוד הבא משתמש בשיטה spanWithColor: כדי לשנות את הצבע של כל הקו לאדום.

polyline.spans = [GMSStyleSpan(color: .red)]
      

polyline.spans = @[[GMSStyleSpan spanWithColor:[UIColor redColor]]];
      

לחלופין, אם כבר יש לכם גישה לאובייקט GMSStrokeStyle, תוכלו להשתמש בשיטה spanWithStyle:.

let solidRed = GMSStrokeStyle.solidColor(.red)
polyline.spans = [GMSStyleSpan(style: solidRed)]
      

GMSStrokeStyle *solidRed = [GMSStrokeStyle solidColor:[UIColor redColor]];
polyline.spans = @[[GMSStyleSpan spanWithStyle:solidRed]];
      

לפני גרסה 1.7 של SDK של מפות ל-iOS, אפשר היה להשתמש במאפיין היחיד strokeColor כדי להגדיר את כל הצבע של GMSPolyline. המאפיין spans מקבל עדיפות על פני strokeColor.

polyline.strokeColor = .red
      

polyline.strokeColor = [UIColor redColor];
      

סגנונות

אם באפליקציה שלכם נעשה שימוש באותו צבע קו כמה פעמים, כדאי להגדיר סגנון לשימוש חוזר. סגנונות של קווים פוליגונים מצוינים באמצעות האובייקט GMSStrokeStyle. סגנון הקו יכול להיות צבע אחיד או שינוי הדרגתי מצבע אחד לצבע אחר. אחרי שיוצרים סגנון, אפשר להחיל אותו על GMSStyleSpan באמצעות השיטה spanWithStyle:.

// Create two styles: one that is solid blue, and one that is a gradient from red to yellow
let solidBlue = GMSStrokeStyle.solidColor(.blue)
let solidBlueSpan = GMSStyleSpan(style: solidBlue)
let redYellow = GMSStrokeStyle.gradient(from: .red, to: .yellow)
let redYellowSpan = GMSStyleSpan(style: redYellow)
      

// Create two styles: one that is solid blue, and one that is a gradient from red to yellow
GMSStrokeStyle *solidBlue = [GMSStrokeStyle solidColor:[UIColor blueColor]];
GMSStyleSpan *solidBlueSpan = [GMSStyleSpan spanWithStyle:solidBlue];
GMSStrokeStyle *redYellow =
    [GMSStrokeStyle gradientFromColor:[UIColor redColor] toColor:[UIColor yellowColor]];
GMSStyleSpan *redYellowSpan = [GMSStyleSpan spanWithStyle:redYellow];
      

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

polyline.spans = [GMSStyleSpan(style: redYellow)]
      

polyline.spans = @[[GMSStyleSpan spanWithStyle:redYellow]];
      

שינוי הצבע של קטעי קו ספציפיים

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

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

polyline.spans = [
  GMSStyleSpan(style: solidRed),
  GMSStyleSpan(style: solidRed),
  GMSStyleSpan(style: redYellow)
]
      

polyline.spans = @[[GMSStyleSpan spanWithStyle:solidRed],
                   [GMSStyleSpan spanWithStyle:solidRed],
                   [GMSStyleSpan spanWithStyle:redYellow]];
      

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

polyline.spans = [
  GMSStyleSpan(style: solidRed, segments:2),
  GMSStyleSpan(style: redYellow, segments:10)
]
      

polyline.spans = @[[GMSStyleSpan spanWithStyle:solidRed segments:2],
                   [GMSStyleSpan spanWithStyle:redYellow segments:10]];
      

פלחים חלקיים

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

polyline.spans = [
  GMSStyleSpan(style: solidRed, segments: 2.5),
  GMSStyleSpan(color: .gray),
  GMSStyleSpan(color: .purple, segments: 0.75),
  GMSStyleSpan(style: redYellow)
]
      

polyline.spans = @[[GMSStyleSpan spanWithStyle:solidRed segments:2.5],
                   [GMSStyleSpan spanWithColor:[UIColor grayColor]],
                   [GMSStyleSpan spanWithColor:[UIColor purpleColor] segments:0.75],
                   [GMSStyleSpan spanWithStyle:redYellow]];
      

הוספת דפוס צבע חוזר לקו מרובה

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

לדוגמה, קטע הקוד הבא מגדיר קו פוליגון עם דפוס שחור-לבן לסירוגין. האורך שלהם מחושב במטרים לאורך קו רוחב (ב-Mercator, זהו קו ישר) כי הסוג שצוין הוא kGMSLengthRhumb.

let styles = [
  GMSStrokeStyle.solidColor(.white),
  GMSStrokeStyle.solidColor(.black)
]
let lengths: [NSNumber] = [100000, 50000]
polyline.spans = GMSStyleSpans(
  polyline.path!,
  styles,
  lengths,
  GMSLengthKind.rhumb
)
      

NSArray *styles = @[[GMSStrokeStyle solidColor:[UIColor whiteColor]],
                    [GMSStrokeStyle solidColor:[UIColor blackColor]]];
NSArray *lengths = @[@100000, @50000];
polyline.spans = GMSStyleSpans(polyline.path, styles, lengths, kGMSLengthRhumb);
      

קווים פוליגונים עם חותמת של Sprite

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

אפשר להשתמש בתכונה הזו באמצעות GMSSpriteStyle ולהגדיר אותה כחותמת באמצעות המאפיין stampStyle של GMSStrokeStyle.

let path = GMSMutablePath()
path.addLatitude(-37.81319, longitude: 144.96298)
path.addLatitude(-31.95285, longitude: 115.85734)
let polyline = GMSPolyline(path: path)
polyline.strokeWidth = 20
let image = UIImage(named: "imageFromBundleOrAsset")! // Image could be from anywhere
let stampStyle = GMSSpriteStyle(image: image)
let transparentStampStroke = GMSStrokeStyle.transparentStroke(withStamp: stampStyle)
let span = GMSStyleSpan(style: transparentStampStroke)
polyline.spans = [span]
polyline.map = mapView
      

GMSMutablePath *path = [GMSMutablePath path];
[path addLatitude:-37.81319 longitude:144.96298];
[path addLatitude:-31.95285 longitude:115.85734];
polyline.strokeWidth = 20;
GMSPolyline *polyline = [GMSPolyline polylineWithPath:path];

UIImage *image = [UIImage imageNamed:@"imageFromBundleOrAsset"];
GMSStrokeStyle *transparentStampStroke = [GMSStrokeStyle transparentStrokeWithStampStyle:[GMSSpriteStyle spriteStyleWithImage:image]];

GMSStyleSpan *span = [GMSStyleSpan spanWithStyle:transparentStampStroke];
polyline.spans = @[span];
polyline.map = _mapView;
      

קווים פוליגונים עם חותמת מרקם

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

אפשר להשתמש בתכונה הזו באמצעות GMSTextureStyle ולהגדיר אותה כחותמת באמצעות המאפיין stampStyle של GMSStrokeStyle.

let path = GMSMutablePath()
path.addLatitude(-37.81319, longitude: 144.96298)
path.addLatitude(-31.95285, longitude: 115.85734)
let polyline = GMSPolyline(path: path)
polyline.strokeWidth = 20
let redWithStamp = GMSStrokeStyle.solidColor(.red)
let image = UIImage(named: "imageFromBundleOrAsset")! // Image could be from anywhere
redWithStamp.stampStyle = GMSTextureStyle(image: image)
let span = GMSStyleSpan(style: redWithStamp)
polyline.spans = [span]
polyline.map = mapView
      

GMSMutablePath *path = [GMSMutablePath path];
[path addLatitude:-37.81319 longitude:144.96298];
[path addLatitude:-31.95285 longitude:115.85734];
GMSPolyline *polyline = [GMSPolyline polylineWithPath:path];
polyline.strokeWidth = 20;
GMSStrokeStyle *redWithStamp = [GMSStrokeStyle solidColor:[UIColor redColor]];

UIImage *image = [UIImage imageNamed:@"imageFromBundleOrAsset"]; // Image could be from anywhere
redWithStamp.stampStyle = [GMSTextureStyle textureStyleWithImage:image];

GMSStyleSpan *span = [GMSStyleSpan spanWithStyle:redWithStamp];
polyline.spans = @[span];
polyline.map = _mapView;
      

יכולות המפה

המאפיין mapCapabilities ב-GMSMapView מוסיף בדיקה פרוגרמטית של תכונות ספציפיות למפה. האפשרות הזו שימושית אם רוצים לדעת אם capabilities מסוימים של מפה זמינים לפני שמפעילים ממשקי API ספציפיים. השאילתה הזו קובעת אם תצוגת המפה תומכת בקוים פוליגונים עם חותמת של Sprite.

let path = GMSMutablePath()
path.addLatitude(-37.81319, longitude: 144.96298)
path.addLatitude(-31.95285, longitude: 115.85734)
let polyline = GMSPolyline(path: path)
polyline.strokeWidth = 20
let image = UIImage(named: "imageFromBundleOrAsset")! // Image could be from anywhere
let spans: [GMSStyleSpan]
if (mapView.mapCapabilities.contains(.spritePolylines)) {
  let spriteStyle = GMSSpriteStyle(image: image)
  let stroke = GMSStrokeStyle.transparentStroke(withStamp: spriteStyle)
  spans = [ GMSStyleSpan(style: stroke) ]
} else {
  let stroke = GMSStrokeStyle.solidColor(.clear)
  stroke.stampStyle = GMSTextureStyle(image: image)
  spans = [ GMSStyleSpan(style: stroke) ]
}
polyline.spans = spans
polyline.map = mapView
      

GMSMutablePath *path = [GMSMutablePath path];
[path addLatitude:-37.81319 longitude:144.96298];
[path addLatitude:-31.95285 longitude:115.85734];

UIImage *_Nonnull image = [UIImage imageNamed:@"imageFromBundleOrAsset"]; // Image could be from anywhere

NSArray<GMSStyleSpan *> * spans;
if (_mapView.mapCapabilities & GMSMapCapabilityFlagsSpritePolylines) {
  GMSSpriteStyle *spriteStyle = [GMSSpriteStyle spriteStyleWithImage:image];
  GMSStrokeStyle *stroke = [GMSStrokeStyle transparentStrokeWithStampStyle:spriteStyle];
  spans = @[ [GMSStyleSpan spanWithStyle:stroke] ];
} else {
  GMSStrokeStyle *stroke = [GMSStrokeStyle solidColor:UIColor.clearColor];
  stroke.stampStyle = [GMSTextureStyle textureStyleWithImage:image];
  spans = @[ [GMSStyleSpan spanWithStyle:stroke] ];
}

GMSPolyline *polyline = [GMSPolyline polylineWithPath:path];
polyline.strokeWidth = 20;
polyline.spans = spans;
polyline.map = _mapView;
      

התבנית הזו מאפשרת לכם להירשם לשינויים ולהגיב לעדכונים באמצעות מצב תצוגת המפה. אפשר גם להטמיע את didChangeMapCapabilities ב-GMSMapViewDelegate כדי לקבל עדכונים לגבי זמינות התכונות.

פוליגונים

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

אפשר להוסיף GMSPolygon למפה באותו אופן שבו מוסיפים GMSPolyline. קודם כול, צריך לציין את הנתיב שלו על ידי יצירת אובייקט GMSMutablePath תואם והוספת נקודות אליו. הנקודות האלה יוצרות את קווי המתאר של הפוליגון. כל CLLocationCoordinate2D מייצג נקודה על פני כדור הארץ. קטעי הקו נמתחים בין הנקודות לפי הסדר שבו מוסיפים אותם לנתיב.

הוספת מצולע

1. יוצרים אובייקט GMSMutablePath.
2. מגדירים את הנקודות בנתיב באמצעות השיטות addCoordinate: או addLatitude:longitude:. הנקודות האלה יוצרות את קווי המתאר של הפוליגון.
3. יוצרים אובייקט GMSPolygon חדש באמצעות הנתיב כארגומנטים.
4. מגדירים מאפיינים אחרים, כמו strokeWidth, ‏ strokeColor ו-fillColor, לפי הצורך.
5. מקצים את הפוליגון לאובייקט GMSMapView על ידי הגדרת המאפיין GMSPolygon.map.
6. הפוליגון יופיע במפה.

קטע הקוד הבא מוסיף מלבן למפה.

// Create a rectangular path
let rect = GMSMutablePath()
rect.add(CLLocationCoordinate2D(latitude: 37.36, longitude: -122.0))
rect.add(CLLocationCoordinate2D(latitude: 37.45, longitude: -122.0))
rect.add(CLLocationCoordinate2D(latitude: 37.45, longitude: -122.2))
rect.add(CLLocationCoordinate2D(latitude: 37.36, longitude: -122.2))

// Create the polygon, and assign it to the map.
let polygon = GMSPolygon(path: rect)
polygon.fillColor = UIColor(red: 0.25, green: 0, blue: 0, alpha: 0.05);
polygon.strokeColor = .black
polygon.strokeWidth = 2
polygon.map = mapView
      

// Create a rectangular path
GMSMutablePath *rect = [GMSMutablePath path];
[rect addCoordinate:CLLocationCoordinate2DMake(37.36, -122.0)];
[rect addCoordinate:CLLocationCoordinate2DMake(37.45, -122.0)];
[rect addCoordinate:CLLocationCoordinate2DMake(37.45, -122.2)];
[rect addCoordinate:CLLocationCoordinate2DMake(37.36, -122.2)];

// Create the polygon, and assign it to the map.
GMSPolygon *polygon = [GMSPolygon polygonWithPath:rect];
polygon.fillColor = [UIColor colorWithRed:0.25 green:0 blue:0 alpha:0.05];
polygon.strokeColor = [UIColor blackColor];
polygon.strokeWidth = 2;
polygon.map = mapView;
      

אפשר להתאים אישית את המראה של הפוליגון גם לפני שמוסיפים אותו למפה וגם אחרי שמוסיפים אותו למפה.

הסרת פוליגון

כדי להסיר פוליגון, מגדירים את המאפיין GMSPolygon.map לערך nil ומנתקים את layer מהורה שלו.

 polygon.map = nil
 polygon.layer.removeFromSuperLayer()

 polygon.map = nil;
 [polygon.layer removeFromSuperlayer];
 

מעגלים

בנוסף למחלקה הגנרית GMSPolygon, ה-SDK של מפות ל-iOS כולל גם את GMSCircle, שמאפשרת לצייר עיגולים על פני כדור הארץ.

כדי ליצור עיגול, צריך לציין את שני המאפיינים הבאים:

• position כ-CLLocationCoordinate2D.
• radius במטרים.

לאחר מכן, מעגל מוגדר כקבוצה של כל הנקודות על פני כדור הארץ שנמצאות במרחק radius מטרים מנקודת center הנתונה. בגלל אופן ההצגה של תרשים מרקטור (Mercator) שמשמש את Maps API להצגת כדור על משטח שטוח, הוא מופיע כמעגל כמעט מושלם במפה כשהוא ממוקם ליד קו המשווה, והוא נראה פחות עגול (במסך) ככל שהוא מתרחק מקו המשווה.

הוספת מעגל

קטע הקוד הבא מוסיף עיגול למפה:

let circleCenter = CLLocationCoordinate2D(latitude: 37.35, longitude: -122.0)
let circle = GMSCircle(position: circleCenter, radius: 1000)
circle.map = mapView
      

CLLocationCoordinate2D circleCenter = CLLocationCoordinate2DMake(37.35, -122.0);
GMSCircle *circle = [GMSCircle circleWithPosition:circleCenter
                                         radius:1000];
circle.map = mapView;
      

אפשר להתאים אישית את המראה של העיגול גם לפני שמוסיפים אותו למפה וגם אחרי שמוסיפים אותו למפה.

התאמה אישית של מעגל

כדי לציין צבעים ורוחבי קווים מותאמים אישית, משנים את המאפיינים של GMSCircle. הוא תומך באפשרויות הבאות:

fillColor

אובייקט UIColor שמציין את הצבע הפנימי של העיגול. ברירת המחדל היא שקיפות.

strokeColor

אובייקט UIColor שמציין את הצבע של קווי המתאר של המעגל. ברירת המחדל היא blackColor.

strokeWidth

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

קטע הקוד הבא מוסיף עיגול אדום עבה עם שטח פנימי אדום שקוף למחצה.

circle.fillColor = UIColor(red: 0.35, green: 0, blue: 0, alpha: 0.05)
circle.strokeColor = .red
circle.strokeWidth = 5
      

circle.fillColor = [UIColor colorWithRed:0.25 green:0 blue:0 alpha:0.05];
circle.strokeColor = [UIColor redColor];
circle.strokeWidth = 5;
      

יצירת פוליגון חלול

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

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

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

בקוד לדוגמה הבא נוצר פוליגון עם שני חורים:

let hydeParkLocation = CLLocationCoordinate2D(latitude: -33.87344, longitude: 151.21135)
let camera = GMSCameraPosition.camera(withTarget: hydeParkLocation, zoom: 16)
let mapView = GMSMapView.map(withFrame: .zero, camera: camera)
mapView.animate(to: camera)

let hydePark = "tpwmEkd|y[QVe@Pk@BsHe@mGc@iNaAKMaBIYIq@qAMo@Eo@@[Fe@DoALu@HUb@c@XUZS^ELGxOhAd@@ZB`@J^BhFRlBN\\BZ@`AFrATAJAR?rAE\\C~BIpD"
let archibaldFountain = "tlvmEqq|y[NNCXSJQOB[TI"
let reflectionPool = "bewmEwk|y[Dm@zAPEj@{AO"

let hollowPolygon = GMSPolygon()
hollowPolygon.path = GMSPath(fromEncodedPath: hydePark)
hollowPolygon.holes = [GMSPath(fromEncodedPath: archibaldFountain)!, GMSPath(fromEncodedPath: reflectionPool)!]
hollowPolygon.fillColor = UIColor(red: 1.0, green: 0.0, blue: 0.0, alpha: 0.2)
hollowPolygon.strokeColor = UIColor(red: 1.0, green: 0.0, blue: 0.0, alpha: 1.0)
hollowPolygon.strokeWidth = 2
hollowPolygon.map = mapView
      

CLLocationCoordinate2D hydeParkLocation = CLLocationCoordinate2DMake(-33.87344, 151.21135);
GMSCameraPosition *camera = [GMSCameraPosition cameraWithTarget:hydeParkLocation
                                                           zoom:16];
mapView = [GMSMapView mapWithFrame:CGRectZero camera:camera];

NSString *hydePark = @"tpwmEkd|y[QVe@Pk@BsHe@mGc@iNaAKMaBIYIq@qAMo@Eo@@[Fe@DoALu@HUb@c@XUZS^ELGxOhAd@@ZB`@J^BhFRlBN\\BZ@`AFrATAJAR?rAE\\C~BIpD";
NSString *archibaldFountain = @"tlvmEqq|y[NNCXSJQOB[TI";
NSString *reflectionPool = @"bewmEwk|y[Dm@zAPEj@{AO";

GMSPolygon *hollowPolygon = [[GMSPolygon alloc] init];
hollowPolygon.path = [GMSPath pathFromEncodedPath:hydePark];
hollowPolygon.holes = @[[GMSPath pathFromEncodedPath:archibaldFountain],
                  [GMSPath pathFromEncodedPath:reflectionPool]];
hollowPolygon.fillColor = [UIColor colorWithRed:1.0 green:0.0 blue:0.0 alpha:0.2];
hollowPolygon.strokeColor = [UIColor colorWithRed:1.0 green:0.0 blue:0.0 alpha:1.0];
hollowPolygon.strokeWidth = 2;
hollowPolygon.map = mapView;