Формы

Оптимизируйте свои подборки Сохраняйте и классифицируйте контент в соответствии со своими настройками.
Выберите платформу: Android iOS JavaScript

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

Цель-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];
      

Добавление полилинии

  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
      

Цель-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;
      

Прямоугольная полилиния

Удаление полилинии

Вы можете удалить полилинию с карты, установив для свойства map GMSPolyline значение nil . Кроме того, вы можете удалить все наложения (включая полилинии и другие фигуры), которые в настоящее время находятся на карте, вызвав метод clear GMSMapView .

Быстрый

mapView.clear()
      

Цель-C

[mapView clear];
      

Настройка полилинии

Объект GMSPolyline предоставляет несколько свойств для управления внешним видом линии. Он поддерживает следующие параметры:

strokeWidth
Ширина всей линии в пунктах экрана. По умолчанию 1. Ширина не изменяется при увеличении карты.
geodesic
Если YES , визуализировать ребро полилинии как геодезическую. Геодезические сегменты проходят по кратчайшему пути вдоль поверхности Земли и могут отображаться в виде изогнутых линий на карте с проекцией Меркатора. Негеодезические сегменты изображаются на карте прямыми линиями. По умолчанию 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
      

Цель-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;
      

Чтобы изменить полилинию после ее добавления на карту, не забудьте сохранить объект GMSPolyline .

Быстрый

polyline.strokeColor = .blue
      

Цель-C

polyline.strokeColor = [UIColor blueColor];
      

Изменение цвета полилинии

Полилинии рисуются в виде серии сегментов на карте. Вы можете изменить цвет отдельных сегментов или всей линии с помощью свойства spans . Хотя это свойство дает вам детальный контроль над окраской полилинии, существует несколько удобных способов, упрощающих применение единого стиля ко всей линии.

В приведенном ниже фрагменте используется метод spanWithColor: для изменения цвета всей строки на красный.

Быстрый

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

Цель-C

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

В качестве альтернативы, если у вас уже есть доступ к объекту GMSStrokeStyle , вы можете использовать метод spanWithStyle:

Быстрый

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

Цель-C

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

До версии 1.7 Maps SDK для iOS единственное свойство strokeColor было доступно для установки всего цвета GMSPolyline . Свойство spans имеет приоритет над strokeColor .

Быстрый

polyline.strokeColor = .red
      

Цель-C

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)
      

Цель-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];
      

Стиль span будет продолжаться до конца полилинии или до тех пор, пока не будет установлен новый стиль. Вы можете изменить цвет всей линии, задав для свойства spans полилинии один GMSStyleSpan . Фрагмент ниже демонстрирует, как применить градиент по всей длине полилинии.

Быстрый

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

Цель-C

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

Изменение цвета отдельных сегментов линии

Если вы хотите задать стиль каждому сегменту полилинии отдельно, вы можете сделать это, создав массив объектов GMSStyleSpan и передав его свойству spans . По умолчанию каждый элемент массива задает цвет соответствующего сегмента линии. Если в массиве больше элементов, чем сегментов в строке, лишние элементы будут проигнорированы. Если в массиве меньше элементов, окончательный GMSStyleSpan будет описывать цвет оставшейся части строки.

Вы можете использовать блоки полилиний цвета и/или градиента, чтобы указать изменения вдоль полилинии, такие как высота или скорость. Приведенный ниже фрагмент задает цвет первых двух сегментов полилинии красным, а оставшаяся часть линии представляет собой градиент от красного к желтому.

Быстрый

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

Цель-C

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

Цель-C

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

Цель-C

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 принимает два массива, определяющих повторяющийся шаблон. Один массив задает стили, которые должны повторяться, а другой определяет интервал повторения. Вместе вы можете создать шаблон, который можно применить к любой полилинии, независимо от ее длины или количества доступных сегментов.

Например, приведенный ниже фрагмент кода определяет полилинию с чередующимся черным и белым узором. Его длины обрабатываются как метры вдоль прямой линии (в Меркатор это прямая линия), так как тип указан как kGMSLengthRhumb .

Быстрый

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

Цель-C

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

Полигоны

Многоугольники похожи на полилинии тем, что состоят из ряда координат в упорядоченной последовательности. Однако вместо того, чтобы быть открытыми, полигоны предназначены для определения сплошных областей в замкнутом цикле. Многоугольники определяются в Maps 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
      

Цель-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;
      

Вы можете настроить внешний вид полигона как до его добавления на карту, так и после его добавления на карту.

Удаление полигона

Удалите многоугольник, установив для его свойства GMSPolygon.map значение nil и отсоединив layer от его родителя.

Быстрый

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

Цель-C

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

Круги

В дополнение к универсальному классу GMSPolygon , Maps SDK для iOS также включает GMSCircle , позволяющий легко рисовать круги на поверхности земли.

Чтобы построить круг, необходимо указать следующие два свойства:

  • position как CLLocationCoordinate2D .
  • radius в метрах.

Затем круг определяется как множество всех точек на поверхности Земли, которые находятся в radius метров от данного center . Из-за того, как проекция Меркатора, используемая Maps API, отображает сферу на плоской поверхности, она будет выглядеть как почти идеальный круг на карте, когда расположена вблизи экватора, и будет казаться все более некруглой (на экране) по мере того, как круг удаляется от экватора.

Добавление круга

Следующий фрагмент кода добавляет круг на карту:

Быстрый

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

Цель-C

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
      

Цель-C

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
      

Цель-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;