iOS

[Swift]MapViewでクラスタ機能を利用する。

投稿日:2018年12月10日 更新日:

はじめに

こんにちはsuzukiです。本日はSwiftのMapViewのクラスタ機能について触れていこうと思います。 Clusterというライブラリでクラスタリングを行っていたのですが、iOSの11から標準のMapKitでクラスタリングが出来るようになりました。

クラスタリングとは

マップ上の複数のピンを一つにまとめることができます。こちらの機能を利用する事により、マップ上にピンが乱立していると分かりずらかった画面もわかりやすくする事ができます。

PINのクラスタリング機能を利用する

それでは実際にマップとピンを作成していきます。 今回マップはStoryBoardから実装します。

マップの作成

StoryBoard

StoryBoardを利用すればMapViewの配置はとても簡単です。 PINの作成でDelegateの接続が必要になるので、忘れず設定しましょう。

コードから配置したMapに対して指示を出したいのでOutlet接続して起きましょう。一度ビルドを行いMapが全画面で表示されていることを確認して下さい。

PINの作成

それではPINを作成していきます。下記のコードでPinをマップに追加できます。MKPointAnnotationをMapViewにaddAnnotationsで渡しています。

ここまで記述してアプリを起動するとPinがマップに追加されているのが確認出来るかと思います。しかしながら、Pinをまとめる機能は動作しておらず、最適な状態とは言えません。クラスタリングを行うためには少しコードを追加しましょう。またPinを装飾するためのカスタムクラスを作成します。

Pinのカスタマイズ

Pinのカスタムを行うためにカスタムクラスを作成します。iOS11から追加されたMKMarkerAnnotationViewを使いやすくするため下記のようなカスタムクラスを作成しました。

カスタムしたPinの利用

ViewDidLoadで記述したPinの追加コードをCustomPinAnnotationに変更します。

これでカスタムしたPinクラスを使う準備ができました。

CustomPinからMKMarkerAnnotationViewに変換する

それでは最後にmapViewのdelegateでPin情報を取得して置き換えていきましょう。こちらのコードを書いてビルドすると同じclusteringIdentifierを設定しているPinがひとまとまりになっているのが確認できます。

こちらのコードでMap上のannotation(CustomPinAnnotation)からMKMarkerAnnotationViewを作成し返却します。個人的にMapKitのコードで解りづらい点として、delegateで渡されるannotationをダウンキャストして、情報を取得する点と、MKAnnotationViewのサブクラスを返却する点です。

  • Pinの情報を持っているクラスは何か
  • 最終的にMap上に配置したいオブジェクトは何か

上記を整理をしながら作成する必要があります。

修正版コード

念のためコードの全部記述いたします。

さいごに

最後までお付き合い頂き有難うございます。今回の機能は基本的にiOS11からの機能です。もしどうしてもiOS9とかが切れない場合、Clusterというライブラリを使うとPINのクラスタリングができます。以前に使った時は拡張や細かな変更もしやすく大変助かりました。

blog-page_footer_336




blog-page_footer_336




-iOS
-

執筆者:


comment

メールアドレスが公開されることはありません。

CAPTCHA


関連記事

[Swift]クラスタされているPINを取得する

1 はじめに2 前回からの修正箇所3 クラスタリングされたPINの内容を取得する3.1 クラスタリングされているPINか判別3.2 クラスタリングされているPINを取得する4 TableViewとの連 ...

[Swift]Alamofireを使ってファイルをDLしてみる

1 はじめに1.1 前提条件2 今回やること3 準備4 実装4.1 DLしたファイルへのアクセス5 さいごに はじめに こんにちは、nukkyです。 みなさんSwiftでの通信ライブラリは何を使ってま ...

Swift Chartsライブラリでボリンジャーバンドを描画してみる。

1 はじめに2 ボリンジャーバンドとは2.1 ライブラリの導入2.2 描画の準備3 ボリンジャーバンドを描画する3.1 CombinedChartViewの設定3.2 CombinedChartVie ...

swift

SwiftでS3への画像アップロード

1 はじめに2 AWS上での事前準備3 CocoaPodsでAWS SDKをインストールをする4 認証の設定をする5 UIImageを保存して、URLを取得する6 S3へアップロードする7 さいごに ...

CollectionViewの並び替えを実装する

1 はじめに2 実装方法3 手順4 ロングタップの実装5 並び替えを可とする6 並び替え時のデータ処理7 次回表示時8 他に9 さいごに10 おすすめ書籍 はじめに こんにちは。Yossyです。 前回 ...

フォロー

follow us in feedly

blog-page_side_responsive

2018年12月
 1
2345678
9101112131415
16171819202122
23242526272829
3031 

アプリ情報

私たちは無料アプリもリリースしています、ぜひご覧ください。 下記のアイコンから無料でダウンロードできます。