Swift Playgroundsで学ぶiOSプログラミング

たった4行でiPad上に地図を表示するプログラム

文●柴田文彦 編集●吉田ヒロ

2017年05月01日 17時00分

ビューコントローラーのビューとしてマップビューをはめ込む

 MapKitを利用してとりあえず地図を表示するだけなら、驚くほど簡単なプログラムで実現できます。基本的に必要なのは、次の4つのステップだけです。

1. マップビューオブジェクトを作成
2. ビューコントローラーオブジェクトを作成
3. 2のビューコントローラーのビューとして1のマップビューを設定
4. 2のビューコントローラーをプレイグラウンドのライブビューとして設定

 この4つのステップを、それぞれ1行ずつのプログラムで表すと、以下のようになります。

let mapView = MKMapView()
let pgvc = UIViewController()
pgvc.view = mapView
PlaygroundPage.current.liveView = pgvc

 このプログラムを実際に動かすには、先頭でUIKit、MapKit、PlaygroundSupportの各フレームワークをインポートすることが必要です。白紙のプレイグラウンドにそれらを入力したら、さっそく動かしてみましょう。

考えられる最小限の手順で、MapKitによる地図を表示しました。何も指定しないと、日本列島全体がちょうど収まるような地図になります

 右側のグラフィック画面には、ほぼ日本列島全体が収まった地図が表示されました。純正アプリの「マップ」と同じように、1本指のドラッグ操作で表示位置を移動したり、2本指の操作でズームイン/アウトしたりして、好きな場所を好きな縮尺で表示することが可能です。

いったん表示された地図は、1本指によるドラッグで位置を変更したり、2本指によるピンチイン/アウトの操作で縮尺を変更したりできます

地図の表示位置と縮尺を指定する

 なんらかのアプリの中でマップビューを使う場合には、最初に日本列島全体を表示して、ユーザーに移動や拡大の操作を毎回してもらうのでは不便です。そこでマップビューには、表示する地図の中心の位置と表示範囲を指定する機能が用意されています。

 位置は緯度と軽度の数値で指定できます。範囲も本来は緯度と経度の範囲で指定するのですが、それでは直感的にわかりにくいので距離(縦横のメートル)で指定することもできるようになっています。距離は南北と東西の距離を別々に指定しますが、それらに異なる値を指定しても、地図の縦横比は1対1のままです。

 位置はCLLocationというオブジェクトで指定します。また位置を含む領域は、MKCoordinateRegionというオブジェクトで指定します。範囲をメートルで指定する場合は、MKCoordinateRegionMakeWithDistanceという長い名前のファンクションを使います。上で示した例に、次の3行を追加するだけで、位置と範囲を指定した地図を表示できます。

let loc = CLLocation(latitude: 35.6986, longitude: 139.7455)
let reg = MKCoordinateRegionMakeWithDistance(loc.coordinate, 1500, 1500)
mapView.setRegion(reg, animated: true)

 さっそく動かしてみましょう。特定の場所が特定の縮尺で表示されました。

地図の中心の位置と表示範囲を指定することで、最初から任意の場所を任意の縮尺で表示させることも可能です。ここから自由に操作することもできます

 こうしておけば、アプリに案内図などを埋め込む際にも便利でしょう。もちろんユーザーは、この状態から地図の表示位置を移動したり、縮尺を自由に変更することができます。

地図の表示内容を選択する

 マップビューで表示する地図も、純正アプリのマップと同じように、表示する内容を地図、または航空写真から選ぶことができます。マップでは、もう1つ「交通情報」の選択肢があるだけですが、マップビューでは、もっと細かく表示内容を選択できます。

 まず表示する地図の種類は、MKMapTypeというタイプによって5種類から選択できます。普通の地図がstandard、航空写真はsatellite、それらを重ねて表示するのがhybridです。さらに地形や建物を3Dデータからレンダリングして、角度を変えて表示できるsatelliteFlyoverと、それに地名や建物の名前、目標物などを重ねて表示するhybridFlyoverも選択できます。

 またマップビューの場合には、そうした表示内容を選択する地図のタイプとは別に、交通情報を表示するかどうかのスイッチshowsTrafficが用意されています。ほかにも、建物の情報を表示するかどうかを決めるshowsBuildingsというスイッチもあります。

 例えば、3DデータからレンダリングするFlyoverを表示するには、作成したマップビューオブジェクトのmapTypeプロパティの値を.satelliteFlyoverに設定すればいいのです。次の1行を加えるだけです。

mapView.mapType = .satelliteFlyover

 この設定で地図を表示してみましょう。

地図のタイプをsatelliteFlyoverに設定して表示しました。これだけでは通常の航空写真(satellite)と大きな違いはありませんが、実は3Dデータからレンダリングされています

 これだけでは通常の航空写真(satellite)との違いははっきりしません。

 次にタイプを.hybridFlyoverに設定してから表示してみましょう。

今度は地図のタイプをhybridFlyoverに設定して表示してみました。幹線道路の名前や郵便局や病院、飲食店などの目標物のマークが追加されていることに気づきます

 道路の名前や目標物が表示されました。

 マップビューで表示した地図でも、純正アプリ同様、2本指でドラッグすることで見る角度を変更することができます。その効果は3DデータからレンダリングするFlyover表示でこそ最大限に発揮されます。現状では大都市部のデータしか用意されていませんが、ぜひ試してみてください。

Flyover表示で2本指ドラッグして角度を変更すると、上空を飛行しながら地上を眺めたような表示が楽しめます。2本指で回転させたり、ドラッグしてみましょう

 そのまま1本指ドラッグで表示位置を動かすと、街の上を低空飛行しているような効果が得られます。2本指でひねるようにして回転させることもできます。こんなに簡単なプログラムで、ここまで絶大な効果が得られる機能は、他にはほとんど例がありません。いろいろと試してみてください。

次回の予定

 今回は、Swift Playgroundsとしての新機能、マップキットを使って地図を表示してみました。せっかくなので次回もマップキットを取り上げます。次回は任意の場所にアノテーション(ピン)を設定して表示する方法を紹介する予定です。

■今回作ったプログラム

Swift_38-1
Swift_38-2
Swift_38-3

mobileASCII.jp TOPページへ

mobile ASCII

Access Rankingアクセスランキング