Shapes

Mantieni tutto organizzato con le raccolte Salva e classifica i contenuti in base alle tue preferenze.
Seleziona piattaforma: Android iOS JavaScript

L'SDK Maps per iOS offre alcuni semplici modi per aggiungere forme alle mappe. Sono supportate le seguenti forme:

  • Una polilinea è una serie di segmenti di linee collegate che possono formare qualsiasi forma desiderata e possono essere utilizzati per contrassegnare percorsi e percorsi sulla mappa.
  • Un poligono è una forma racchiusa che può essere utilizzata per contrassegnare aree sulla mappa.
  • Un cerchio è una proiezione geograficamente accurata di un cerchio sulla superficie terrestre.

Puoi modificare l'aspetto di ogni forma in diversi modi.

Polilinee

Le polilinee consentono di tracciare linee sulla mappa. Un oggetto GMSPolyline rappresenta una sequenza ordinata di località, visualizzata come una serie di segmenti di riga. Puoi impostare il colore di una polilinea con GMSStrokeStyle.

Per creare una polilinea, devi specificarne il percorso creando un oggetto GMSMutablePath corrispondente con due o più punti. Ogni CLLocationCoordinate2D rappresenta un punto sulla superficie terrestre. I segmenti di linea vengono tracciati tra i punti in base all'ordine in cui vengono aggiunti al percorso. Puoi aggiungere punti al percorso con i metodi addCoordinate: o addLatitude:longitude:.

Swift

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)
      

Objective-C

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

Aggiungere una polilinea

  1. Crea un oggetto GMSMutablePath.
  2. Imposta i punti del percorso con i metodi addCoordinate: o addLatitude:longitude:.
  3. Creare un'istanza di un nuovo oggetto GMSPolyline utilizzando il percorso come argomento.
  4. Imposta altre proprietà, ad esempio strokeWidth e strokeColor, come preferisci.
  5. Imposta la proprietà map di GMSPolyline.
  6. La polilinea viene visualizzata sulla mappa.

Il seguente snippet di codice aggiunge un rettangolo a una mappa:

Swift

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
      

Objective-C

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;
      

Una polilinea rettangolare

Rimozione di una polilinea

Puoi rimuovere una polilinea dalla mappa impostando la proprietà map di GMSPolyline su nil. In alternativa, puoi rimuovere tutti gli overlay (incluse le polilinee e altre forme) attualmente sulla mappa chiamando il metodo GMSMapView clear.

Swift

mapView.clear()
      

Objective-C

[mapView clear];
      

Personalizzare una polilinea

L'oggetto GMSPolyline fornisce diverse proprietà per controllare l'aspetto della riga. Supporta le seguenti opzioni:

strokeWidth
La larghezza dell'intera linea, in punti dello schermo. Il valore predefinito è 1. La larghezza non viene ridimensionata quando la mappa viene ingrandita.
geodesic
Quando YES, visualizza questo bordo polilinea come geodetica. I segmenti geodetici seguono il percorso più breve sulla superficie terrestre e possono apparire come linee curve su una mappa con una proiezione di Mercatore. I segmenti non geodetici vengono tracciati come linee rette sulla mappa. Il valore predefinito è NO.
spans
Utilizzato per specificare il colore di uno o più segmenti di una polilinea. La proprietà spans è un array di oggetti GMSStyleSpan. Impostare la proprietà spans è il modo migliore per modificare il colore di una polilinea.
strokeColor
Un oggetto UIColor che specifica il colore della polilinea. Il valore predefinito è blueColor. La proprietà strokeColor viene ignorata se viene impostato spans.

Lo snippet seguente aggiunge una polilinea spessa da Melbourne a Perth, con interpolazione geodetica.

Swift

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
      

Objective-C

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;
      

Per modificare una polilinea dopo averla aggiunta alla mappa, ricorda di mantenere l'oggetto GMSPolyline.

Swift

polyline.strokeColor = .blue
      

Objective-C

polyline.strokeColor = [UIColor blueColor];
      

Modificare il colore di una polilinea

Le polilinee vengono tracciate come una serie di segmenti sulla mappa. Puoi modificare il colore di singoli segmenti o dell'intera riga con la proprietà spans. Questa proprietà offre un controllo dettagliato sulla colorazione di una polilinea, ma esistono diverse comodità che consentono di applicare facilmente uno stile a tutta la linea.

Lo snippet seguente utilizza il metodo spanWithColor: per cambiare in rosso il colore dell'intera riga.

Swift

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

Objective-C

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

In alternativa, se hai già accesso a un oggetto GMSStrokeStyle, puoi utilizzare il metodo spanWithStyle:.

Swift

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

Objective-C

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

Prima della versione 1.7 dell'SDK Maps per iOS, la singola proprietà strokeColor era disponibile per impostare l'intero colore di una proprietà GMSPolyline. La proprietà spans ha la precedenza su strokeColor.

Swift

polyline.strokeColor = .red
      

Objective-C

polyline.strokeColor = [UIColor redColor];
      

Stili

Se la tua app applica lo stesso colore del tratto più volte, potresti trovare utile definire uno stile riutilizzabile. Gli stili polilinea vengono specificati utilizzando l'oggetto GMSStrokeStyle. Uno stile di tratto può essere un colore a tinta unita o una sfumatura da un colore a un altro. Dopo aver creato uno stile, puoi applicarlo a un GMSStyleSpan con il metodo spanWithStyle:.

Swift

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

Objective-C

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

Lo stile di span continuerà fino alla fine della polilinea o fino a quando non verrà impostato un nuovo stile. Puoi modificare il colore dell'intera linea impostando la proprietà spans di una polilinea su un singolo GMSStyleSpan. Lo snippet riportato di seguito mostra come applicare una sfumatura su tutta la lunghezza della polilinea.

Swift

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

Objective-C

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

Modificare il colore dei singoli segmenti di una linea

Se vuoi definire uno stile per ogni segmento della polilinea singolarmente, puoi creare un array di oggetti GMSStyleSpan e passarlo alla proprietà spans. Per impostazione predefinita, ogni elemento nell'array imposta il colore del segmento della riga corrispondente. Se l'array contiene più elementi che segmenti nella riga, quelli aggiuntivi verranno ignorati. Se sono presenti meno elementi nell'array, GMSStyleSpan finale descriverà il colore per il resto della riga.

Puoi utilizzare blocchi di polilinea di colore e/o gradiente per indicare variazioni nella polilinea, ad esempio altitudine o velocità. Il seguente snippet imposta il colore dei primi due segmenti di una polilinea sul rosso, mentre il resto della linea mostra una sfumatura dal rosso al giallo.

Swift

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

Objective-C

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

Puoi utilizzare il metodo spanWithStyle:segments: per impostare lo stile per più segmenti contemporaneamente. Ad esempio, il seguente codice è equivalente al precedente. La lunghezza del segmento dell'ultimo GMSStyleSpan verrà sempre ignorata perché verrà utilizzato lo stile per descrivere il resto della riga.

Swift

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

Objective-C

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

Segmenti frazionari

I segmenti possono anche essere specificati come valore frazionario. Lo stile verrà applicato al numero frazionato dei segmenti, causando potenzialmente una suddivisione in un singolo segmento. Ogni GMSStyleSpan inizia subito dopo quello precedente: nell'esempio seguente, il colore grigio inizierà da 1⁄2 al secondo segmento e continuerà a 1⁄2 fino al terzo segmento.

Swift

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

Objective-C

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

Aggiungere una sequenza di colori ripetuta a una polilinea

Se vuoi aggiungere un pattern a una polilinea, puoi usare il metodo delle utilità GMSStyleSpans in GMSGeometryUtils. Il metodo GMSStyleSpans accetta due array che definiscono un pattern ricorrente. Una matrice imposta gli stili da ripetere, mentre l'altra definisce l'intervallo di ripetizioni. Usati insieme, puoi creare un pattern che può essere applicato a qualsiasi polilinea, indipendentemente dalla sua lunghezza o dal numero di segmenti disponibili.

Ad esempio, il seguente snippet di codice definisce una polilinea con un pattern alternato di bianco e nero. Le sue lunghezze vengono trattate come metri lungo una linea di riferimento (in Mercator, si tratta di una linea retta) poiché il tipo viene specificato come kGMSLengthRhumb.

Swift

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

Objective-C

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

Poligoni

I poligoni sono simili alle polilinee in quanto sono costituiti da una serie di coordinate in sequenza ordinata. Tuttavia, anziché essere aperti, i poligoni sono progettati per definire regioni solide all'interno di un anello chiuso. I poligoni sono definiti nell'SDK Maps per iOS dalla classe GMSPolygon.

Puoi aggiungere un GMSPolygon alla mappa nello stesso modo in cui aggiungi un GMSPolyline. Per prima cosa, specifica il suo percorso creando un oggetto GMSMutablePath corrispondente e aggiungendovi punti. Questi punti formeranno il contorno del poligono. Ogni CLLocationCoordinate2D rappresenta un punto sulla terra terrestre. I segmenti vengono tracciati tra i punti in base all'ordine in cui li aggiungi al percorso.

Aggiungere un poligono

  1. Crea un oggetto GMSMutablePath.
  2. Imposta i punti del percorso con i metodi addCoordinate: o addLatitude:longitude:. Questi punti formeranno il contorno del poligono.
  3. Creare un'istanza di un nuovo oggetto GMSPolygon utilizzando il percorso come argomento.
  4. Imposta altre proprietà, ad esempio strokeWidth, strokeColor e fillColor, come preferisci.
  5. Assegna il poligono a un oggetto GMSMapView impostando la proprietà GMSPolygon.map.
  6. Il poligono viene visualizzato sulla mappa.

Il seguente snippet di codice aggiunge un rettangolo a una mappa.

Swift

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

Objective-C

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

Puoi personalizzare l'aspetto del poligono prima di aggiungerlo alla mappa e dopo averlo aggiunto alla mappa.

Rimuovere un poligono

Rimuovi un poligono impostando la relativa proprietà GMSPolygon.map su nil e scollegando layer da quello principale.

Swift

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

Objective-C

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

Cerchi

Oltre alla classe GMSPolygon generica, l'SDK Maps per iOS include anche GMSCircle, che ti consente di disegnare facilmente cerchi sulla superficie terrestre.

Per costruire un cerchio, devi specificare le due proprietà seguenti:

  • position come CLLocationCoordinate2D.
  • radius in metri.

Un cerchio rappresenta quindi l'insieme di tutti i punti sulla superficie terrestre a radius metri di distanza dal dispositivo center specificato. A causa del modo in cui la proiezione di Mercatore utilizzata dall'API di Google Maps esegue il rendering di una sfera su una superficie piana, questo verrà visualizzato come un cerchio quasi perfetto sulla mappa quando si trova vicino all'equatore e verrà visualizzato sempre più non circolare (sullo schermo) quando il cerchio si allontana dall'equatore.

Aggiungere una cerchia

Il seguente snippet di codice aggiunge un cerchio alla mappa:

Swift

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

Objective-C

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

Puoi personalizzare l'aspetto del cerchio prima di aggiungerlo alla mappa e dopo averlo aggiunto alla mappa.

Personalizzare una cerchio

Puoi specificare colori personalizzati e larghezze di tratto modificando le proprietà di GMSCircle. Supporta le seguenti opzioni:

fillColor
Un oggetto UIColor che specifica il colore interno del cerchio. Il valore predefinito è trasparente.
strokeColor
Un oggetto UIColor che specifica il colore del contorno del cerchio. Il valore predefinito è blackColor.
strokeWidth
Lo spessore del contorno del cerchio, in punti sullo schermo. Il valore predefinito è 1. Lo spessore non viene ridimensionato quando la mappa viene ingrandita.

Lo snippet seguente aggiunge un cerchio rosso spesso con un interno rosso semitrasparente.

Swift

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

Objective-C

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

Creazione di un poligono vuoto

Puoi combinare più percorsi in un singolo oggetto GMSPolygon per creare forme complesse, come anelli riempiti o ciambelle (dove le aree poligonali vengono visualizzate all'interno del poligono come forme separate). Le forme complesse sono la composizione di più percorsi.

Crea un poligono con un percorso che specifica la maggiore area coperta dal poligono. Successivamente, specifica la proprietà holes del poligono come array di uno o più oggetti GMSPath, che definiscono i fori all'interno del poligono.

Se un percorso più piccolo è completamente racchiuso dal percorso più grande, sembra che un pezzo del poligono sia stato rimosso.

Il seguente esempio di codice crea un poligono con due fori:

Swift

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
      

Objective-C

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;