sos の 作業メモ

プログラミングや英会話学習、マイルや旅行、日常生活など。最近はWebFormなASP.NETのお守りがお仕事です。

日々の生活にhappyをプラスする｜ハピタス Ｇポイント

その5: Shapes (Google Maps SDK for iOS)

GoogleMaps iOS

前回の続き

Shapes

Polylines

Polylineは地図上に線を書くためのもの。 GMSPolylineオブジェクトは座標の並びを表し、指定した色や太さで一連の線分を描画する。

Polylineを作成するには、GMSMutablePathオブジェクトを作って座標群を格納してPathを作り、それをGMSPolylineオブジェクトに設定する。

座標は地表の点を示すCLLocationCoordinate2Dで指定する。それぞれの点間は追加された順に線で結ばれる。Pathに点を追加するにはaddCoordinate:かaddLatitude:longitude:を使用する。

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

Add a polyline

  1. GMSMutablePathオブジェクトを生成
  2. addCoordinate: か addLatitude:longitude: メソッドでPathに点を追加
  3. GMSPolylineオブジェクトを+polylineWithPath:で2のPathを指定して生成
  4. 必要に応じて線の幅や色等のプロパティを設定
  5. mapプロパティにGMSMapViewを設定
  6. マップ上にpolylineが表示される

以下はマップ上に矩形のpolylineを表示するサンプル

GMSMutablePath *path = [GMSMutablePath path];
[path addCoordinate:CLLocationCoordinate2DMake(37.36, -122.0)];
[path addCoordinate:CLLocationCoordinate2DMake(37.45, -122.0)];
[path addCoordinate:CLLocationCoordinate2DMake(37.45, -122.2)];
[path addCoordinate:CLLocationCoordinate2DMake(37.36, -122.2)];
[path addCoordinate:CLLocationCoordinate2DMake(37.36, -122.0)];

GMSPolyline *rectangle = [GMSPolyline polylineWithPath:path];
rectangle.map = mapView_;

Remove a polyline

GMSPolylineオブジェクトのmapプロパティをnilにすればマップからpolylineを削除できる。 また、GMSMapViewのclearメソッドなら、マップ上の全てのOverlay(polylineや他のshape)を消去できる。

polyline.map = nil;

[mapView_ clear];

polylineをマップに追加したあとでpolylineに変更を加えたいなら、そのpolylineオブジェクトを保持しておけばよい。後でこのオブジェクトを使って変更が可能である。

polyline.strokeColor = [UIColor blackColor];

Customize a polyline

Polylineは線分が連なったものとして地図に描画されるが、GMSPolylineオブジェクトを変更することで色と太さを変えられる。

  • strokeColor

    UIColorオブジェクトで、線の色を指定する。デフォルトはblueColor

  • strokeWidth

    線の太さをスクリーンのポイント(pixel)で指定する。デフォルトは1。ズームしても線の太さは一定のままスケーリングされない。

  • geodesic

    YESならpolylineは測地線となる。測地線は、地表面に沿った線で、メルカトル図法のマップ上では、短い距離は直線で、ある程度長くなると曲線で表示されることになる。デフォルトはNO.

以下はメルボルンからパースまでの緑色のpolylineをgeodesicで設定する例

GMSMutablePath *path = [GMSMutablePath path];
[path addLatitude:-37.81319 longitude:144.96298];
[path addLatitude:-31.95285 longitude:115.85734];
GMSPolyline *polyline = [GMSPolyline polylineWithPath:path];
polyline.strokeColor = [UIColor greenColor];
polyline.strokeWidth = 10.f;
polyline.geodesic = YES;
polyline.map = mapView_;

マップに追加したあとにpolylineを変更するなら、GMSPolylineオブジェクトを保持しておけばよい。

polyline.strokeColor = [UIColor blueColor];

Polygons

PolygonはPolylineに似ており、点が並んだもので構成されるが、最初と最後が閉じられて輪になるのが特徴。SDKではGMSPolygonクラスとして定義されている。

GMSPolygonは、GMSPolylineと同じ方法でマップに登録する。最初にGMSMutablePathでpathを作成し、それを元にGMSPolylineを生成する。

Add a polygon

  1. GMSMutablePathオブジェクトを生成
  2. addCoordinate: か addLatitude:longitude: メソッドで座標を登録。これはpolygonの外側のラインとなる。
  3. pathを引数としてGMSPolygonオブジェクトを生成
  4. 線の太さや色、塗りつぶし色を設定
  5. GMSPolygonのmapプロパティにGMSMapViewオブジェクトをセット
  6. ポリゴンが表示される

以下はマップ上に矩形のpolygonを追加するサンプル

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

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; // 線の太さは2ピクセル
polygon.map = mapView_;

マップに追加したあとにpolygonを変更するなら、GMSPolygonオブジェクトを保持しておけばよい。

Circles

GMSPolygonクラスに加え、Google Maps SDK for iOSでは GMSCircleも用意されており、簡単に地図上に簡単に円を表示できる。

Circleは以下の２つの値で定義される

  • CLLocationCoordinate2Dで示される座標
  • メートルでの半径

circleは地表での円の中心と半径で定義されるため、メルカトル投影法のGoogleMapsAPIにおいては、赤道付近では真円に近くなるが、そこから極方向へ行くにつれて楕円になっていく。

Add a circle

以下はCircleを追加する例

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

Customize a circle

Circleは、マップに追加する前でも後でもどちらでも値の変更が可能。GMSCircleで変更可能な値は以下。

  • fillColor

    円の塗り潰し色。デフォルトは透明

  • strokeColor

    円の周囲の線の色。デフォルトは黒

  • strokeWidth

    円の周囲の線の幅。スクリーンのポイント(pixel)で指定。デフォルトは1。ズームしても線の太さは一定のままスケーリングされない

    CLLocationCoordinate2D circleCenter = CLLocationCoordinate2DMake(37.35, -122.0); GMSCircle *circ = [GMSCircle circleWithPosition:circleCenter radius:1000]; circ.fillColor = [UIColor colorWithRed:0.25 green:0 blue:0 alpha:0.05]; circ.strokeColor = [UIColor redColor]; circ.strokeWidth = 5; circ.map = mapView;

polylineとpolygonとcircleと、マップ上に図形を描く手段の説明でした。Android版のpolygonのような穴空きはサポートされていませんが、それほど必要性がないってことでしょうか。

次回へ続く