Şekiller

iOS için Haritalar SDK'sı, haritalarınıza şekil eklemek için bazı basit yollar sunar. Aşağıdaki şekiller desteklenir:

• Çoklu çizgi, istediğiniz şekli oluşturabilen ve haritadaki yollar ile rotaları işaretlemek için kullanılabilecek bir dizi bağlı çizgi segmentidir.
• Çokgen, haritadaki alanları işaretlemek için kullanılabilen kapalı bir şekildir.
• Daire, Dünya'nın yüzeyinde coğrafi olarak doğru bir döngüdür.

Her bir şeklin görünümünü birkaç şekilde değiştirebilirsiniz.

Çoklu çizgiler

Çoklu çizgiler haritada çizgi çizebilmenizi sağlar. GMSPolyline nesnesi, bir dizi satır segmenti olarak görüntülenen sıralı bir konum sırasını temsil eder. Bir çoklu çizginin rengini GMSStrokeStyle ile ayarlayabilirsiniz.

Bir çoklu çizgi oluşturmak için iki veya daha fazla noktanın karşılık gelen bir GMSMutablePath nesnesi oluşturarak yolunu belirtmeniz gerekir. Her CLLocationCoordinate2D, Dünya yüzeyindeki bir noktayı temsil eder. Çizgi segmentleri, bunları yola eklediğiniz sıraya göre çizilir. addCoordinate: veya addLatitude:longitude: yöntemleriyle yola nokta ekleyebilirsiniz.

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];
      

Çoklu çizgi ekleme

1. Bir GMSMutablePath nesnesi oluşturun.
2. addCoordinate: veya addLatitude:longitude: yöntemleriyle yoldaki noktaları ayarlayın.
3. Yolu bağımsız değişken olarak kullanarak yeni bir GMSPolyline nesnesi oluşturun.
4. strokeWidth ve strokeColor gibi diğer özellikleri istediğiniz şekilde ayarlayın.
5. GMSPolyline öğesinin map özelliğini ayarlayın.
6. Çoklu çizgi haritada görünür.

Aşağıdaki kod snippet'i bir haritaya dikdörtgen ekler:

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;
      

Çoklu çizgiyi kaldırma

GMSPolyline map Mülkünüzü nil şeklinde ayarlayarak birden çok çizgiyi haritadan kaldırabilirsiniz. Alternatif olarak, GMSMapView clear yöntemini çağırarak haritadaki mevcut tüm yer paylaşımlarını (çoklu çizgiler ve diğer şekiller dahil) kaldırabilirsiniz.

mapView.clear()
      

[mapView clear];
      

Çoklu çizgiyi özelleştirme

GMSPolyline nesnesi, çizginin görünümünü kontrol etmek için birkaç özellik sağlar. Aşağıdaki seçenekleri destekler:

strokeWidth

Tüm noktaların, ekran noktalarındaki genişliği. Varsayılan olarak 1 değerine ayarlanır. Harita yakınlaştırıldığında genişlik ölçeklendirilmez.

geodesic

YES olduğunda bu çoklu çizgi kenarını jeodezik olarak oluşturun. Jeodezik segmentler yeryüzünün üzerindeki en kısa yolu izler ve Mercator projeksiyonu bulunan bir harita üzerinde kavisli çizgiler şeklinde görünebilir. Coğrafi olmayan segmentler haritada düz çizgiler olarak çizilir. Varsayılan olarak NO değerine ayarlanır.

spans

Bir veya daha fazla çoklu çizginin rengini belirtmek için kullanılır. Kapsamlar özelliği GMSStyleSpan nesneden oluşan bir dizidir. Bir çoklu çizginin rengini değiştirmek için spans özelliğini ayarlamak tercih edilir.

strokeColor

Çoklu çizginin rengini belirten UIColor nesnesi. Varsayılan olarak blueColor değerine ayarlanır. spans ayarlanırsa strokeColor özelliği yoksayılır.

Aşağıdaki snippet'te, Melbourne'den Perth'e kadar uzanan kalın çizgili bir coğrafi çizgi eklenmiştir.

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;
      

Çoklu çizgiyi haritaya eklendikten sonra değiştirmek için GMSPolyline nesnesini tuttuğunuzdan emin olun.

polyline.strokeColor = .blue
      

polyline.strokeColor = [UIColor blueColor];
      

Çoklu çizginin rengini değiştirme

Çoklu çizgiler haritada bir dizi segment olarak çizilir. spans özelliğini kullanarak segmentlerin rengini veya çizginin tamamını değiştirebilirsiniz. Bu özellik, bir çoklu çizginin rengi üzerinde ayrıntılı kontrol imkanı sağlar, ancak tüm çizgiye tek bir stilin uygulanmasını kolaylaştıran çeşitli avantajlar vardır.

Aşağıdaki snippet'te, çizginin tamamının rengini kırmızı olarak değiştirmek için spanWithColor: yöntemi kullanılmaktadır.

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

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

Alternatif olarak, bir GMSStrokeStyle nesnesine zaten erişiminiz varsa spanWithStyle: yöntemini kullanabilirsiniz.

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

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

iOS için Haritalar SDK'sının 1.7 sürümünden önce, strokeColor tek bir mülk, bir GMSPolyline rengin tamamını ayarlamak için kullanılabiliyordu. spans özelliği, strokeColor özelliğine göre önceliklidir.

polyline.strokeColor = .red
      

polyline.strokeColor = [UIColor redColor];
      

Stiller

Uygulamanız aynı fırça rengini birden fazla kez uygularsa yeniden kullanılabilir bir stil tanımlamanız faydalı olabilir. Çoklu çizgi stilleri GMSStrokeStyle nesnesi kullanılarak belirtilir. Fırça stili, tek bir renk veya bir renkten diğerine renk geçişi olabilir. Bir stil oluşturduktan sonra bu stili spanWithStyle: yöntemiyle GMSStyleSpan öğesine uygulayabilirsiniz.

// 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 öğesinin stili, çoklu çizginin sonuna kadar veya yeni bir stil ayarlanana kadar devam eder. Bir çizginin spans özelliğini tek bir GMSStyleSpan şeklinde ayarlayarak tüm çizginin rengini değiştirebilirsiniz. Aşağıdaki snippet'te, çizginin tüm uzunluğu boyunca bir gradyanın nasıl uygulanacağı gösterilmektedir.

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

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

Bağımsız segment segmentlerinin rengini değiştirme

Çoklu çizginizin her bir segmentinin stilini tek tek ayarlamak isterseniz GMSStyleSpan nesne dizisi oluşturup bunu spans özelliğine iletebilirsiniz. Varsayılan olarak dizideki her öğe, karşılık gelen satır segmentinin rengini belirler. Dizide, segmentlerden daha fazla öğe varsa fazladan öğeler yok sayılır. Dizide daha az öğe varsa son GMSStyleSpan, çizginin kalan kısmının rengini açıklar.

Çizginiz üzerindeki yükseklik veya hız gibi değişiklikleri belirtmek için renk blokları ve/veya gradyan çoklu çizgileri kullanabilirsiniz. Aşağıdaki snippet'te, bir çoklu çizginin ilk iki segmentinin rengi kırmızı olarak ayarlanır ve çizginin geri kalanı kırmızıdan sarıya kadar bir gradyandır.

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

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

Birden çok segmentin stilini aynı anda ayarlamak için spanWithStyle:segments: yöntemini kullanabilirsiniz. Örneğin, aşağıdaki kod yukarıdakiyle eşdeğerdir. Satırın geri kalanını açıklamak için stil kullanılacağından son GMSStyleSpan öğesinin segment uzunluğu her zaman yok sayılır.

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

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

Kesirli segmentler

Segmentler, kesirli bir değer olarak da belirtilebilir. Bu, stili kesirli segment sayısına uygulayarak tek bir segmentin bölünmesine neden olabilir. Her GMSStyleSpan öncekinden hemen sonra başlar: Aşağıdaki örnekte gri renk 1⁄2 ile ikinci segment arasında başlar ve üçüncü segmentte 1⁄2 olarak devam eder.

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]];
      

Bir çoklu çizgiye tekrarlanan renk deseni ekleme

Çoklu çizgiye desen eklemek istiyorsanız GMSGeometryUtils içinde GMSStyleSpans yardımcı programını kullanabilirsiniz. GMSStyleSpans yöntemi, tekrarlanan bir kalıp tanımlayan iki diziyi kabul eder. Bir dizi, tekrarlanması gereken stilleri belirler; diğeri ise tekrarlama aralığını tanımlar. Birlikte kullanıldığında, uzunluğu veya kullanılabilir segment sayısı ne olursa olsun herhangi bir çoklu çizgiye uygulanabilecek bir kalıp oluşturabilirsiniz.

Örneğin, aşağıdaki kod snippet'i siyah-beyaz alternatif bir desene sahip bir çoklu çizgiyi tanımlamaktadır. Türler, kGMSLengthRhumb olarak belirtildiği için başparmak çizgisi boyunca metre olarak kabul edilir (Mertor'da bu düz bir çizgidir).

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);
      

Poligonlar

Poligonlar, sıralı bir sırayla bir dizi koordinattan oluştuğu için çoklu çizgilere benzer. Ancak poligonlar açık uçlu olmak yerine kapalı bir döngüdeki katı bölgeleri tanımlamak için tasarlanmıştır. Poligonlar iOS için Haritalar SDK'sında GMSPolygon sınıfına göre tanımlanır.

GMSPolygon öğesini haritaya GMSPolyline ile aynı şekilde ekleyebilirsiniz. İlk olarak, karşılık gelen bir GMSMutablePath nesnesi oluşturup buna nokta ekleyerek yolunu belirtin. Bu noktalar çokgenin ana hatlarını oluşturur. Her CLLocationCoordinate2D, Dünya yüzeyindeki bir noktayı temsil eder. Çizgi segmentleri, bunları yola eklediğiniz sıraya göre çizilir.

Poligon ekle

1. Bir GMSMutablePath nesnesi oluşturun.
2. addCoordinate: veya addLatitude:longitude: yöntemleriyle yoldaki noktaları ayarlayın. Bu noktalar çokgenin ana hatlarını oluşturur.
3. Yolu bağımsız değişken olarak kullanarak yeni bir GMSPolygon nesnesi oluşturun.
4. strokeWidth, strokeColor ve fillColor gibi diğer özellikleri istediğiniz şekilde ayarlayın.
5. GMSPolygon.map özelliğini ayarlayarak poligonu bir GMSMapView nesnesine atayın.
6. Poligon harita üzerinde görünür.

Aşağıdaki kod snippet'i bir haritaya dikdörtgen ekler.

// 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;
      

Poligonun görünümünü hem haritaya eklemeden önce hem de haritaya eklendikten sonra özelleştirebilirsiniz.

Çokgen kaldırma

Bir Çokgeni kaldırmak için GMSPolygon.map özelliğini nil değerine ayarlayın ve layer öğesini üst öğesinden ayırın.

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

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

Daireler

iOS için Haritalar SDK'sı, genel GMSPolygon sınıfının yanı sıra dünyanın yüzeyinde kolayca daire çizebilmenizi sağlayan GMSCircle özelliğini de içerir.

Bir çevre oluşturmak için aşağıdaki iki özelliği belirtmeniz gerekir:

• CLLocationCoordinate2D olarak position
• Metre cinsinden radius.

Daire, Dünya'nın yüzeyinde bulunan belirli bir center radius metre uzaklıktaki tüm noktaların kümesi olarak tanımlanır. Haritalar API'si tarafından kullanılan Mercator projeksiyonu düz bir yüzeyde nasıl bir yer oluşturduğundan bu simge, ekvatorun yakınındayken haritada neredeyse mükemmel bir daire olarak görünür ve daire ekvatordan uzaklaştıkça giderek daha fazla dairesel olmaz (ekranda).

Çevre ekleme

Aşağıdaki kod snippet'i haritaya bir daire ekler:

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;
      

Dairenin görünümünü, hem haritaya eklemeden önce hem de haritaya eklendikten sonra özelleştirebilirsiniz.

Çevreyi özelleştirme

GMSCircle özelliklerini değiştirerek özel renkler ve fırça genişlikleri belirtebilirsiniz. Aşağıdaki seçenekleri destekler:

fillColor

Dairenin iç rengini belirten UIColor nesnesi. Varsayılan olarak şeffaftır.

strokeColor

Dairenin dış hatlarının rengini belirten UIColor nesnesi. Varsayılan olarak blackColor değerine ayarlanır.

strokeWidth

Ekrandaki dairenin sınırlarının kalınlığı. Varsayılan olarak 1 değerine ayarlanır. Harita yakınlaştırıldığında kalınlık ölçeklenmez.

Aşağıdaki snippet'in iç kısmı yarı şeffaf kırmızı renkli kalın bir kırmızı daire ekler.

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;
      

Boş bir çokgen oluşturma

Dolu halkalar veya halkalar gibi karmaşık şekiller oluşturmak için birden fazla yolu tek bir GMSPolygon nesnesinde birleştirebilirsiniz (poligonal alanlar çokgenin içinde ayrı şekiller olarak görünür). Karmaşık şekiller, birden çok yolun bileşimidir.

Çokgenin kapsadığı en büyük alanı belirten bir yolla bir poligon oluşturun. Ardından, poligonun holes özelliğini, bir veya daha fazla GMSPath nesnesinden oluşan dizi olarak belirtin. Bu, poligonun içindeki delikleri tanımlar.

Küçük bir yol, daha büyük bir yolun tamamıyla kaplanmışsa çokgenin bir bölümü kaldırılmış gibi görünür.

Aşağıdaki kod örneği iki delikli bir poligon oluşturur:

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;