その8: Street View (Google Maps SDK for iOS)

前回の続き

Street View

Overview

Google Street Viewは、道路からの360度のパノラマ(風景)を提供する。 SDKを通して利用可能な範囲は、Google Maps for iOSアプリや、 https://maps.google.com/で表示されるものと同じものであり、現在サポートされている都市のリストは、Google Maps Help CenterのStreet View coverage and frequencyや、この辺り にある。

SDKは Street Viewのパノラマ(風景)画像を表示・操作するための GMSPanoramaViewオブジェクトを提供している。

Street View Panoramas

ストリートビューの風景は、ある一カ所からの360度の景色を提供する一枚の画像、もしくは複数の画像のセット。

画像は、Equirectangular（エクイレクタングラー: 正距円筒図法）と呼ばれる図法に準拠し、 水平方向の360度のビューと、垂直方向(上から下まで)の180度が含まれている。

360度の風景は、球の表面を包むように投影されたものとして定義される。

ストリートビューパノラマはGMSPanoramaViewオブジェクトで表示。 このオブジェクトは中心にカメラを置いた、球としてパノラマを描画する。

プログラムからカメラの方向やいくつかの設定を変更することができる。

Accessing Street View Data

ストリートビューパノラマは、以下のmeta-dataのうちの1つで識別される。

• panoramaID

  ストリートビューパノラマのユニークID。このIDは変化する可能性があるため、ハードコーディング等での参照には適さない。異なるストリートビューイメージにアクセスするための利用に適している。

• coordinate

  イメージの正確な位置がCLLocationCoordinate2Dで表されている。パノラマに保持されているcoordinateか、マップ上でユーザーの操作した場所が変換されたものである。

GMSPanoramaオブジェクトにはpanoramaIDとcoordinateの両方が格納される。 coordinateかpanoramaIDを使ってGMSPanoramaServiceにGMSPanoramaを要求できる。 返されたオブジェクトには、meta-dataの両方と、近くのパノラマへのリンクの配列が含まれている。

Viewing Street View images

Add a Street View viewer

ストリートビューのviewerを追加する基本的なステップは以下：

1. Getting Startedに従って、SDKのフレームワークを追加し、APIキーを取得する(最初に一度)
2. ViewControllerを新規作成/編集する。このビューコントローラーが表示された時にパノラマが表示されるようにするには、loadViewメソッド内に処理を記述
3. GMSPanoramaViewクラスのinitWithFrame:メソッドを使って、オブジェクトを生成・初期化する。PanoramaViewがViewControllerの唯一のViewの時は、マップのフレームとしてCGRectZeroを指定すれば自動的にリサイズされる
4. ViewControllerのviewプロパティにGMSPanoramaViewオブジェクトを設定する
5. moveNearCoordinate: のようなメソッドを使って、ストリートビューイメージをセットする

以下はコード例

#import "ViewController.h"
#import <GoogleMaps/GoogleMaps.h>

@implementation ViewController {
    GMSPanoramaView *panoView_;
}

- (void)loadView {
    panoView_ = [[GMSPanoramaView alloc] initWithFrame:CGRectZero];
    self.view = panoView_;

    [panoView_ moveNearCoordinate:CLLocationCoordinate2DMake(-33.732, 150.312)];
}
@end

Customize the viewer

ジェスチャーでの操作を有効にするかどうかを設定できる。デフォルトでは、パン(スクロール)、ズーム(拡大縮小)、隣接するパノラマへ移動が有効。

各ジェスチャーは、以下のプロパティで個別に有効/無効の設定が可能。ジェスチャーが無効になっていても、プログラムからの制御は依然として可能である。

• orientationGestures

  タップやドラッグによるカメラの向きの変更を許可するかどうかの設定。Noならカメラは動かせない

• zoomGestures

  ピンチ操作によるズーム操作を許可するかどうかの設定。Noならズーム操作はできない

• navigationGestures

  パノラマの変更操作を許可するかどうかの設定。ユーザーはナビゲーションリンクをシングルタップするか、ビューをダブルタップすることでパノラマを変更できるが、Noなら変更できない。

全てのジェスチャーの有効/無効を設定する場合は、setAllGesturesEnabled:メソッドが使える。

[panoView_ setAllGesturesEnabled:NO];

Launch Street View with the URL Scheme

Google Street View 画像は、 Google Maps for iOSアプリ内でも見られるが、 "comgooglemaps"のURL Schemeを使って、アプリをStreetViewモードで起動することもできる。

以下は起動例。詳しくはURL Schemeドキュメントを参照。

comgooglemaps://?center=46.414382,10.013988&mapmode=streetview

Street View Locations and Point-of-View (POV)

GMSPanoramaCameraは、 heading(方位)とpitch(俯仰角)とzoom(縮尺)を組み合わせて、視点を設定するためのもの。

以下は南向きでやや俯き加減のカメラのコード例

panoView.camera = [GMSPanoramaCamera cameraWithHeading:180 pitch:-10 zoom:1];

Orientation

ストリートビューで指定する座標は、イメージの何処にカメラをおくかは定義しているが、カメラの向きを定義しているわけではない。

この目的のために、GMSOrientationオブジェクトの2つのプロパティを定義する。

• heading

  方位。真北を0として、時計回りに真東が90,真南が180,真西が270

• pitch

  俯仰角。カメラに水平なデフォルトのピッチ(地面に対して水平であって、海面に対して水平ではない) に対し、足下の-90から頭上の90

Zoom

ストリートビューは、異なる解像度のイメージをサポートしており、それらは、プログラムでの指定や、ユーザーによるピンチ操作によるズームの際に使用される

Moving the camera

GMSPanoramaViewオブジェクトにはデフォルトのカメラがセットされているが、 これはいくつかの方法で変更が可能である。

カメラのを変更するときに、カメラの動きをアニメーションにするオプションもある。 アニメーションは、現在のカメラと新しいカメラの属性を補間して行われる。

新しいGMSPanoramaCameraオプジェクとを作り、それをGMSPanoramaViewのcameraプロパティにセットしてカメラを変更できる。

GMSCameraPositionは、orientationやzoomを組み合わせて設定するように作成される。

panoView.camera = [GMSPanoramaCamera cameraWithHeading:180 pitch:-10 zoom:1];

アニメーションを行う場合は setCamera:camera:animationDuration: メソッドを使う。 加えて、Core Animatinを使ったカメラ制御も可能である。 これはGMSPanoramaViewのcustom CALayerであるGMSPanoramaLayerを通して有効になる。

Markers within Street View

GMSPanoramaViewオブジェクトはマーカーの表示も可能で、対応するプロパティを使ってGMSMapViewとGMSPanoramaViewのどちらにも同じGMSMarkerを設定できる。

// エッフェル塔のマーカーを作成
CLLocationCoordinate2D position = CLLocationCoordinate2DMake(48.858,2.294);
GMSMarker* marker = [GMSMarker markerWithPosition:position];
// panoViewという名前のGMSPanoramaViewオブジェクトにマーカーを追加
marker.panoramaView = panoView;
// mapViewという名前のGMSMapViewオブジェクトにマーカーを追加
marker.map = mapView;

マーカーとカメラの間の距離でによってマーカーはスケールされ、描画されるサイズは変わる。距離が離れすぎてマーカーが小さくなりすぎる場合は表示されなくなる。

GMSPanoramaViewで使うときには、GMSMarkerの機能の一部は制限される。

GMSPanoramaViewからマーカーを削除するには、マーカーのpanoramaViewプロパティをnilにセットする。

marker.panoramaView = nil;

　

---

次回へ続く