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

[Swift]iPadのActionSheet表示でクラッシュする問題

1 はじめに2 エラー内容2.1 エラー原因2.2 まだこれで解決ではない3 さいごに はじめに こんにちは、nukkyです。 私は普段iPhoneアプリの開発を主に行っているのですが 慣れか油断かi ...

swift

Swift3でSCLAlertViewを使ってみた

1 はじめに2 準備3 実装 はじめに 今回はSwiftでフラットなデザインの アニメーション付きアラートビューが扱える SCLAlertViewを試してみたいと思います。 準備 おなじみCocoaP ...

swift

Swiftの配列、辞書関連メソッドの基本

1 はじめに2 配列(Array)2.1 filter2.2 map2.3 reduce3 辞書(Dictionary)3.1 filter3.2 map3.3 reduce4 さいごに はじめに 普 ...

swift

SwiftでTTTAttributedLabelの文字列からリンク表示

1 はじめに2 TTTAttributedLabelとは3 CocoaPodsでインストール4 実装4.1 Labelの表示4.2 タップの検知5 さいごに はじめに こんにちは。 はじめましてnuk ...

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

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

フォロー

blog-page_side_responsive

2018年12月
 1
2345678
9101112131415
16171819202122
23242526272829
3031  

アプリ情報

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