Kształty

Maps SDK na iOS pozwala w prosty sposób dodawać kształty do map. Obsługiwane są te kształty:

• Linia łamana to seria połączonych ze sobą segmentów, które mogą tworzyć dowolny kształt i służyć do oznaczania ścieżek i tras na mapie.
• Wielokąt to zamknięty kształt, którego można używać do zaznaczania obszarów na mapie.
• Kółko to geograficzne odwzorowanie okręgu na powierzchni Ziemi.

Wygląd poszczególnych kształtów możesz modyfikować na wiele sposobów.

Linie łamane

Linie umożliwiają rysowanie linii na mapie. Obiekt GMSPolyline reprezentuje uporządkowaną sekwencję lokalizacji i jest wyświetlany jako seria segmentów liniowych. Kolor linii łamanej możesz ustawić w GMSStrokeStyle.

Aby utworzyć linię łamaną, musisz określić jej ścieżkę, tworząc odpowiedni obiekt GMSMutablePath z co najmniej 2 punktami. Każdy CLLocationCoordinate2D reprezentuje punkt na powierzchni Ziemi. Segmenty linii są rysowane między punktami zgodnie z kolejnością dodania ich do ścieżki. Punkty możesz dodawać do ścieżki za pomocą metody addCoordinate: lub 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];
      

Dodawanie linii łamanej

1. Utwórz obiekt GMSMutablePath.
2. Punkty na ścieżce ustaw za pomocą metody addCoordinate: lub addLatitude:longitude:.
3. Utwórz instancję nowego obiektu GMSPolyline za pomocą ścieżki jako argumentu.
4. W razie potrzeby ustaw inne właściwości, takie jak strokeWidth i strokeColor.
5. Ustaw właściwość map elementu GMSPolyline.
6. Linia łamana pojawi się na mapie.

Ten fragment kodu dodaje do mapy prostokąt:

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;
      

Usuwanie linii łamanej

Możesz usunąć linię wyznaczoną na mapie, ustawiając właściwość map obiektu GMSPolyline na nil. Możesz też usunąć wszystkie nakładki (w tym linie łamane i inne kształty) dostępne obecnie na mapie, wywołując metodę GMSMapView clear.

mapView.clear()
      

[mapView clear];
      

Dostosowywanie linii łamanej

Obiekt GMSPolyline udostępnia kilka właściwości do kontrolowania wyglądu wiersza. Obsługuje te opcje:

strokeWidth

Szerokość całej linii w punktach na ekranie. Domyślna wartość to 1. Szerokość nie jest skalowana po powiększeniu mapy.

geodesic

Gdy YES ma zostać wyrenderowana ta linia łamana jako geodezyjna, Segmenty geodezyjne prowadzą najkrótszą ścieżką wzdłuż powierzchni Ziemi i mogą być wyświetlane jako zakrzywione linie na odwzorowaniu Merkatora. Segmenty niegeograficzne są rysowane na mapie jako proste linie. Domyślna wartość to NO.

spans

– określa kolor co najmniej jednego segmentu linii łamanej. Właściwość spans to tablica obiektów GMSStyleSpan. Ustawienie właściwości spans to preferowany sposób zmiany koloru linii łamanej.

strokeColor

Obiekt UIColor określający kolor linii łamanej. Domyślna wartość to blueColor. Właściwość strokeColor jest ignorowana, jeśli ustawiona jest właściwość spans.

Fragment kodu poniżej zawiera gęstą linię łamaną między Melbourne a Perth i interpolacją geograficzną.

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;
      

Aby zmodyfikować linię łamaną po jej dodaniu do mapy, pamiętaj, aby trzymać obiekt GMSPolyline.

polyline.strokeColor = .blue
      

polyline.strokeColor = [UIColor blueColor];
      

Zmienianie koloru linii łamanej

Linie łamane są narysowane na mapie jako seria segmentów. Za pomocą właściwości spans możesz zmieniać kolor poszczególnych segmentów lub całego wiersza. Chociaż ta właściwość zapewnia szczegółową kontrolę nad kolorem linii łamanej, dostępnych jest kilka udogodnień, które ułatwiają stosowanie tego samego stylu w całej linii.

Poniższy fragment kodu wykorzystuje metodę spanWithColor: do zmiany koloru całej linii na czerwony.

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

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

Jeśli masz już dostęp do obiektu GMSStrokeStyle, możesz też użyć metody spanWithStyle:.

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

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

W wersji 1.7 pakietu SDK Map na iOS 1 usługa strokeColor umożliwiała ustawienie koloru o kolorze GMSPolyline. Właściwość spans ma pierwszeństwo przed wartością strokeColor.

polyline.strokeColor = .red
      

polyline.strokeColor = [UIColor redColor];
      

Style

Jeśli aplikacja będzie wielokrotnie stosować ten sam kolor kreski, może się przydać w określeniu stylu wielokrotnego użytku. Style linii łamanych są określane za pomocą obiektu GMSStrokeStyle. Styl kreski może być jednolitym kolorem lub gradientem między jednym kolorem a innym. Po utworzeniu stylu możesz go zastosować do metody GMSStyleSpan za pomocą metody 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];
      

Styl elementu span będzie kontynuowany do końca linii łamanej lub do ustawienia nowego stylu. Możesz zmienić kolor całej linii, ustawiając właściwość spans linii łamanej na GMSStyleSpan. Fragment poniżej pokazuje, jak zastosować gradient na całej długości linii łamanej.

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

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

Zmiana koloru poszczególnych segmentów linii

Jeśli chcesz indywidualnie określić każdy segment linii łamanej, możesz utworzyć tablicę obiektów GMSStyleSpan i przekazać tę właściwość do właściwości spans. Domyślnie każdy element w tablicy ustawia kolor odpowiedniego segmentu linii. Jeśli w tablicy jest więcej elementów niż segmentów, dodatkowe elementy będą ignorowane. Jeśli w tablicy jest mniej elementów, końcowy element GMSStyleSpan będzie określać kolor pozostałej linii.

Do zaznaczania zmian wzdłuż linii łamanej możesz użyć bloków koloru lub linii gradientu, takich jak wysokość lub prędkość. Poniższy fragment kodu ustawia kolor pierwszych 2 linii na czerwony, a pozostała część jest gradientem od czerwonego do żółtego.

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

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

Możesz użyć metody spanWithStyle:segments:, aby ustawić styl dla kilku segmentów jednocześnie. Na przykład poniższy kod jest odpowiednikiem powyższego kodu. Długość segmentu GMSStyleSpan jest zawsze ignorowana, ponieważ styl będzie używany do opisania pozostałej części wiersza.

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

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

Segmenty ułamkowe

Segmenty można też podawać jako wartość ułamkową. Spowoduje to zastosowanie stylu do ułamkowej liczby segmentów, co może spowodować podział w jednym segmencie. Każdy GMSStyleSpan zaczyna się zaraz po poprzednim: w poniższym przykładzie kolor szary będzie zaczynać się od 1⁄2 przez 2 segment, a 1⁄2 przez 3 segment.

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

Dodawanie powtarzającego się koloru do linii łamanej

Jeśli chcesz dodać do linii łamanej wzór, możesz użyć metody narzędziowej GMSStyleSpans w GMSGeometryUtils. Metoda GMSStyleSpans akceptuje 2 tablice definiujące powtarzalny wzorzec. Jedna z nich określa style, które mają być powtarzane, a druga określa przedział powtórzeń. Wspólnie możesz utworzyć wzorzec, który można zastosować w każdej linii łamanej niezależnie od jego długości i liczby dostępnych segmentów.

Na przykład ten fragment kodu definiuje linię łamaną z czarno-białym wzorem alternatywnym. Jego długość jest traktowana jako metry wzdłuż krańca linii (w Mercaorze to linia prosta), ponieważ jej typ jest określony jako 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);
      

Wielokąty

Wielokąty są podobne do linii łamanych, ponieważ składają się z wielu współrzędnych w ułożonej kolejności. Jednak wielokąty nie są otwarte, ale definiują obszary ciągłe w pętli. Wielokąty są zdefiniowane w pakiecie Maps SDK na iOS przez klasę GMSPolygon.

Obiekt GMSPolygon możesz dodać do mapy tak samo jak GMSPolyline. Najpierw podaj ścieżkę, tworząc odpowiedni obiekt GMSMutablePath i dodając do niego punkty. Punkty te stanowią konspekt wielokąta. Każdy CLLocationCoordinate2D reprezentuje punkt na powierzchni Ziemi. Segmenty liniowe są rysowane między punktami zgodnie z kolejnością dodania ich do ścieżki.

Dodaj wielokąt

1. Utwórz obiekt GMSMutablePath.
2. Punkty na ścieżce ustaw za pomocą metody addCoordinate: lub addLatitude:longitude:. Punkty te tworzą kontur wielokąta.
3. Utwórz instancję nowego obiektu GMSPolygon za pomocą ścieżki jako argumentu.
4. Ustaw inne właściwości, np. strokeWidth, strokeColor i fillColor.
5. Przypisz wielokąt do obiektu GMSMapView, ustawiając właściwość GMSPolygon.map.
6. Wielokąt pojawi się na mapie.

Ten fragment kodu dodaje do mapy prostokąt.

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

Wygląd wielokąta możesz dostosować przed dodaniem go do mapy oraz po dodaniu go do mapy.

Usuwanie wielokąta

Aby usunąć wielokąt, ustaw jego właściwość GMSPolygon.map na nil i odłącz layer od elementu nadrzędnego.

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

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

Kółka

Oprócz ogólnej klasy GMSPolygon pakiet SDK Map na iOS zawiera też GMSCircle, który pozwala łatwo rysować kręgi na powierzchni Ziemi.

Aby utworzyć okrąg, musisz określić te 2 właściwości:

• position jako CLLocationCoordinate2D.
• radius w metrach

Następnie okrąg jest określany jako zbiór wszystkich punktów na powierzchni Ziemi, które są oddalone o radius m od danego center. Ze względu na to, jak odwzorowanie Merkatora użyte przez interfejs API Map Google renderuje kulę ziemską na płaskiej powierzchni, gdy wyświetla się ona w pobliżu równika, na mapie wyświetla się niemal idealnie, a gdy koło odbiega od równika, na ekranie pojawia się coraz mniej okręgów (na ekranie).

Dodawanie kręgu

Ten fragment kodu dodaje okrąg do mapy:

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;
      

Wygląd okręgu można dostosować zarówno przed dodaniem go do mapy, jak i po jego dodaniu do mapy.

Dostosowywanie kręgu

Możesz określić kolory niestandardowe i szerokość kreski, modyfikując właściwości GMSCircle. Obsługuje te opcje:

fillColor

Obiekt UIColor określający kolor wnętrza okręgu. Domyślnie jest przezroczysty.

strokeColor

Obiekt UIColor określający kolor konturu okręgu. Domyślna wartość to blackColor.

strokeWidth

Grubość konturu okręgu w punktach na ekranie. Domyślna wartość to 1. Grubość nie jest skalowana, gdy mapa jest powiększona.

Fragment kodu poniżej ma grube czerwone koło i półprzezroczyste czerwone wnętrze.

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;
      

Tworzenie pustego wielokąta

W obiekcie GMSPolygon możesz połączyć wiele ścieżek, aby utworzyć złożone kształty, takie jak wypełnione pierścieniami lub pierścieniami (gdzie wielokąty są widoczne w kształcie wielokąta jako osobne kształty). Złożone kształty składają się z wielu ścieżek.

Utwórz wielokąt ze ścieżką określającą największy obszar objęty wielokątem. Następnie określ właściwość holes wielokąta jako tablicę jednego lub większej liczby obiektów GMSPath, które określają jego otwory.

Jeśli mniejsza ścieżka jest w całości zamknięta przez większą ścieżkę, wygląda na to, że element wielokąta został usunięty.

Ten przykładowy kod tworzy wielokąt z dwoma otworami:

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;