シェイプ

プラットフォームを選択: Android iOS JavaScript

Maps SDK for iOS には、地図に図形を簡単に追加する方法がいくつか用意されています。サポートされている図形は、以下のとおりです。

• ポリラインは一連の連結された線分で、任意の形状に形成したり、地図上の経路やルートに印を付けるために使用できます。
• ポリゴンは閉じたシェイプです。地図上の領域をマーキングするために使用できます。
• 円は、地表面上の円を地理的に正確に投影したものです。

各図形の外観は、さまざまな方法で変更できます。

ポリライン

ポリラインを使用すると、地図上に線を描画できます。GMSPolyline オブジェクトは、順序付けされた一連の場所を表し、一連の線分として表示されます。GMSStrokeStyle を使用してポリラインの色を設定できます。

ポリラインを作成するには、対応する複数の GMSMutablePath オブジェクト（2 つ以上の点を含む）を作成して、パスを指定する必要があります。各 CLLocationCoordinate2D は地表面上の 1 点を表します。線分は、パスにポイントを追加した順序に従って、ポイント間に描画されます。addCoordinate: メソッドまたは 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];
      

ポリラインの追加

1. GMSMutablePath オブジェクトを作成する。
2. addCoordinate: メソッドまたは addLatitude:longitude: メソッドを使用して、パス内のポイントを設定します。
3. パスを引数として新しい GMSPolyline オブジェクトをインスタンス化します。
4. 必要に応じて、strokeWidth や strokeColor などの他のプロパティを設定します。
5. GMSPolyline の map プロパティを設定します。
6. ポリラインが地図上に表示されます。

次のコード スニペットでは、マップに長方形を追加しています。

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;
      

ポリラインの削除

GMSPolyline の map プロパティを nil に設定して、地図からポリラインを削除できます。または、GMSMapView の clear メソッドを呼び出して、現在地図上にあるすべてのオーバーレイ（ポリラインやその他のシェイプを含む）を削除することもできます。

Swift

mapView.clear()
      

Objective-C

[mapView clear];
      

ポリラインのカスタマイズ

GMSPolyline オブジェクトは、ラインの外観を制御する複数のプロパティを提供します。次のオプションを使用できます。

strokeWidth

画面全体の線の幅。デフォルトは 1 です。地図をズームしても幅は拡大されません。

geodesic

YES の場合、このポリラインのエッジを測地線としてレンダリングします。測地線セグメントは、地表面に沿った最短パスをたどり、メルカトル図法による地図上に曲線として表示されることがあります。測地線的でないセグメントは、地図上に直線として描画されます。デフォルトは NO です。

spans

ポリラインの 1 つまたは複数の線分の色を指定するために使用されます。span プロパティは GMSStyleSpan オブジェクトの配列です。ポリラインの色を変更するには、spans プロパティを設定することをおすすめします。

strokeColor

ポリラインの色を指定する UIColor オブジェクト。デフォルトは blueColor です。spans が設定されている場合、strokeColor プロパティは無視されます。

次のスニペットでは、メルボルンからパースへの太いポリラインが測地線として補間されています。

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;
      

ポリラインを地図に追加した後に変更するには、必ず GMSPolyline オブジェクトを保持するようにしてください。

Swift

polyline.strokeColor = .blue
      

Objective-C

polyline.strokeColor = [UIColor blueColor];
      

ポリラインの色を変更する

ポリラインは、一連のセグメントとして地図上に描画されます。spans プロパティを使用して、個々のセグメントまたはライン全体の色を変更できます。このプロパティを使用すると、ポリラインの色を細かく制御できますが、ライン全体に単一のスタイルを簡単に適用できる便利なツールがいくつかあります。

以下のスニペットでは、spanWithColor: メソッドを使用して、行全体の色を赤に変更しています。

Swift

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

Objective-C

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

または、GMSStrokeStyle オブジェクトにアクセスできる場合は、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]];
      

Maps SDK for iOS のバージョン 1.7 より前では、単一のプロパティ strokeColor を使用して GMSPolyline の色全体を設定できました。spans プロパティは strokeColor よりも優先されます。

Swift

polyline.strokeColor = .red
      

Objective-C

polyline.strokeColor = [UIColor redColor];
      

スタイル

アプリで同じストローク色を数回適用すると、再利用可能なスタイルの定義に役立つことがあります。ポリラインのスタイルは、GMSStrokeStyle オブジェクトを使用して指定します。ストロークのスタイルは、単色か、ある色から別の色へのグラデーションのいずれかです。スタイルを作成したら、spanWithStyle: メソッドを使用して GMSStyleSpan に適用できます。

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

span のスタイルは、ポリラインの終わりまで、または新しいスタイルが設定されるまで継続します。ポリラインの spans プロパティを単一の GMSStyleSpan に設定することで、ライン全体の色を変更できます。以下のスニペットは、ポリラインの全長にグラデーションを適用する方法を示しています。

Swift

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

Objective-C

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

線分ごとに色を変更する

ポリラインの各セグメントのスタイルを個別に設定するには、GMSStyleSpan オブジェクトの配列を作成し、これを spans プロパティに渡します。デフォルトでは、配列の各アイテムが対応する線分の色に設定されます。行内のセグメントよりも配列内の要素が多い場合、余分な要素は無視されます。配列内の要素の数が少ない場合、最後の GMSStyleSpan は行の残りの色を表します。

色ポリラインやグラデーション ポリラインのブロックを使って、ポリラインに沿った高度や速度などの変化を示すことができます。以下のスニペットでは、ポリラインの最初の 2 つのセグメントの色が赤に設定されており、残りの線は赤から黄色へのグラデーションになっています。

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

spanWithStyle:segments: メソッドを使用して、複数のセグメントのスタイルを一度に設定できます。たとえば、次のコードは上記と同等です。 線の残りの部分を示すためにスタイルが使用されるため、最後の GMSStyleSpan のセグメントの長さは常に無視されます。

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

小数セグメント

セグメントは小数値として指定することもできます。一部のセグメントにスタイルが適用され、単一のセグメントが分割される可能性があります。各 GMSStyleSpan は、前のセグメントの直後に始まります。次の例では、灰色は 2 番目のセグメントから 1/2 に始まり、3 番目のセグメントまで 1/2 に続きます。

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

ポリラインに繰り返しカラーパターンを追加する

ポリラインにパターンを追加する場合は、GMSGeometryUtils の GMSStyleSpans ユーティリティ メソッドを使用できます。GMSStyleSpans メソッドは、繰り返しパターンを定義する 2 つの配列を受け入れます。一方の配列では繰り返す必要があるスタイルを設定し、もう一方の配列で繰り返しの間隔を定義します。組み合わせることで、ポリラインの長さや利用可能なセグメントの数に関係なく、どのポリラインにも適用できるパターンを作成できます。

たとえば、次のコード スニペットでは、黒と白の交互のパターンを持つポリラインを定義しています。その長さは、型が 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);
      

ポリゴン

ポリゴンは、次の順序に並んだ一連の座標で構成されるという点で、ポリラインと似ています。ただし、ポリゴンはエンドレスではなく、クローズド ループ内のソリッド リージョンを定義するように設計されています。ポリゴンは、Maps SDK for iOS で GMSPolygon クラスによって定義されます。

GMSPolyline を追加するのと同じ方法で、GMSPolygon を地図に追加できます。まず、対応する GMSMutablePath オブジェクトを作成し、ポイントを追加してパスを指定します。これらの点がポリゴンの輪郭を形成します。各 CLLocationCoordinate2D は地表面上の 1 点を表します。線分は、パスにポイントを追加した順序に従って、ポイント間に描画されます。

ポリゴンを追加する

1. GMSMutablePath オブジェクトを作成する。
2. addCoordinate: メソッドまたは addLatitude:longitude: メソッドを使用して、パス内のポイントを設定します。これらの点がポリゴンの輪郭を形成します。
3. パスを引数として新しい GMSPolygon オブジェクトをインスタンス化します。
4. 必要に応じて、strokeWidth、strokeColor、fillColor などの他のプロパティを設定します。
5. GMSPolygon.map プロパティを設定して、GMSMapView オブジェクトにポリゴンを割り当てます。
6. 地図上にポリゴンが表示されます。

次のコード スニペットでは、マップに長方形を追加しています。

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;
      

ポリゴンの外観は、地図に追加する前でも、地図に追加した後でもカスタマイズできます。

ポリゴンの削除

GMSPolygon.map プロパティを nil に設定し、layer を親から接続解除して、ポリゴンを削除します。

Swift

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

Objective-C

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

円

汎用の GMSPolygon クラスに加え、Maps SDK for iOS には GMSCircle も含まれており、地表面に円を簡単に描画できます。

円を作成するには、次の 2 つのプロパティを指定する必要があります。

• CLLocationCoordinate2D による position
• radius（メートル単位）

これにより、指定された center から radius メートルの地点にある、地表面上のすべてのポイントのセットとして円が定義されます。Maps API で使用されているメルカトル図法では、地球が平面上にレンダリングされるため、この円はマップの赤道付近ではほぼ完全な円として表示されますが、円が赤道から遠ざかるにつれて、（画面上の表示では）歪んだ円となっていきます。

円を追加する

次のコード スニペットでは、マップに円を追加しています。

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;
      

円の外観は、地図に追加する前でも、地図に追加した後でもカスタマイズできます。

円をカスタマイズする

GMSCircle のプロパティを変更することで、カスタムの色とストローク幅を指定できます。次のオプションを使用できます。

fillColor

円の内側の色を指定する UIColor オブジェクト。デフォルトは透明です。

strokeColor

円の輪郭の色を指定する UIColor オブジェクト。デフォルトでは blackColor に設定されます。

strokeWidth

スクリーン ポイントでの円の輪郭の太さ。デフォルトは 1 です。地図をズームしても、太さは拡大されません。

次のスニペットでは、内部が半透明の赤色で太い赤色の円を追加しています。

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;
      

中が空洞のポリゴンを作成する

単一の GMSPolygon オブジェクトで複数のパスを組み合わせることで、塗りつぶしリングやドーナツなどのポリゴンの形状を作成できます（ポリゴン領域のポリゴン内は個別のシェイプとして表示されます）。複雑なシェイプは複数のパスの合成です。

パスで指定し、ポリゴンがカバーする最大の領域を指定するポリゴンを作成します。次に、ポリゴンの holes プロパティを 1 つ以上の GMSPath オブジェクトの配列として指定します。これにより、ポリゴン内の穴が定義されます。

小さなパスが大きなパスで完全に囲まれている場合、ポリゴンの一部が削除されているかのように表示されます。

次のコードサンプルは、2 つの穴を持つポリゴンを作成します。

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;