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

1 はじめに
2 クラスタリングとは
3 PINのクラスタリング機能を利用する
4 さいごに

はじめに

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

クラスタリングとは

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

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

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

マップの作成

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

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

PINの作成

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

 import UIKit import MapKit class ViewController: UIViewController,MKMapViewDelegate { @IBOutlet weak var mapView: MKMapView! override func viewDidLoad() { super.viewDidLoad() // Do any additional setup after loading the view, typically from a nib. //Mapの中心座標設定 let centerCoordinate = CLLocationCoordinate2D(latitude: 35.444374, longitude: 139.635466) let span = MKCoordinateSpan(latitudeDelta: 0.2, longitudeDelta: 0.2) let centerPosition = MKCoordinateRegion(center: centerCoordinate, span: span) self.mapView.setRegion(centerPosition,animated:true) //Pinの作成 let pin1 = MKPointAnnotation() pin1.coordinate = CLLocationCoordinate2D(latitude: 35.44, longitude: 139.64) pin1.title = "pin1" let pin2 = MKPointAnnotation() pin2.coordinate = CLLocationCoordinate2D(latitude: 35.45, longitude: 139.65) pin2.title = "pin2" let pin3 = MKPointAnnotation() pin3.coordinate = CLLocationCoordinate2D(latitude: 35.46, longitude: 139.66) pin3.title = "pin3" //作成したPinをマップ上に追加 mapView.addAnnotations([pin1,pin2,pin3]) } }

import UIKit

import MapKit

classViewController:UIViewController,MKMapViewDelegate{

@IBOutlet weak varmapView:MKMapView!

override func viewDidLoad(){

super.viewDidLoad()

// Do any additional setup after loading the view, typically from a nib.

//Mapの中心座標設定

let centerCoordinate =CLLocationCoordinate2D(latitude:35.444374,longitude:139.635466)

let span=MKCoordinateSpan(latitudeDelta:0.2,longitudeDelta:0.2)

let centerPosition=MKCoordinateRegion(center:centerCoordinate,span:span)

self.mapView.setRegion(centerPosition,animated:true)

//Pinの作成

let pin1=MKPointAnnotation()

pin1.coordinate=CLLocationCoordinate2D(latitude:35.44,longitude:139.64)

pin1.title="pin1"

let pin2=MKPointAnnotation()

pin2.coordinate=CLLocationCoordinate2D(latitude:35.45,longitude:139.65)

pin2.title="pin2"

let pin3=MKPointAnnotation()

pin3.coordinate=CLLocationCoordinate2D(latitude:35.46,longitude:139.66)

pin3.title="pin3"

//作成したPinをマップ上に追加

mapView.addAnnotations([pin1,pin2,pin3])

}

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

Pinのカスタマイズ

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

 class CustomPinAnnotation: NSObject, MKAnnotation { //ID let clusteringIdentifier : String //座標 let coordinate: CLLocationCoordinate2D //Pinのテキスト let glyphText: String //Pinのテキストの文字色 let glyphTintColor: UIColor //Pinの色 let markerTintColor: UIColor init(_ identifier: String, coordinate: CLLocationCoordinate2D, glyphText: String, glyphTintColor: UIColor = .white, markerTintColor: UIColor) { self.clusteringIdentifier = identifier self.coordinate = coordinate self.glyphText = glyphText self.glyphTintColor = glyphTintColor self.markerTintColor = markerTintColor } }

classCustomPinAnnotation:NSObject,MKAnnotation{

//ID

let clusteringIdentifier:String

//座標

let coordinate:CLLocationCoordinate2D

//Pinのテキスト

let glyphText:String

//Pinのテキストの文字色

let glyphTintColor:UIColor

//Pinの色

let markerTintColor:UIColor

init(_identifier:String,coordinate:CLLocationCoordinate2D,glyphText:String,glyphTintColor:UIColor=.white,markerTintColor:UIColor){

self.clusteringIdentifier=identifier

self.coordinate=coordinate

self.glyphText=glyphText

self.glyphTintColor=glyphTintColor

self.markerTintColor=markerTintColor

}

カスタムしたPinの利用

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

 override func viewDidLoad() { super.viewDidLoad() // Do any additional setup after loading the view, typically from a nib. //Mapの中心座標設定 let centerCoordinate = CLLocationCoordinate2D(latitude: 35.444374, longitude: 139.635466) let span = MKCoordinateSpan(latitudeDelta: 0.2, longitudeDelta: 0.2) let centerPosition = MKCoordinateRegion(center: centerCoordinate, span: span) self.mapView.setRegion(centerPosition,animated:true) //Pinの追加 let pin1 = CustomPinAnnotation("group1",coordinate: CLLocationCoordinate2D(latitude: 35.44, longitude: 139.64), glyphText: "pin1", glyphTintColor: .white, markerTintColor: .black) let pin2 = CustomPinAnnotation("group1",coordinate: CLLocationCoordinate2D(latitude: 35.45, longitude: 139.65), glyphText: "pin2", glyphTintColor: .white, markerTintColor: .black) let pin3 = CustomPinAnnotation("group3",coordinate: CLLocationCoordinate2D(latitude: 35.46, longitude: 139.66), glyphText: "pin3", glyphTintColor: .white, markerTintColor: .black) mapView.addAnnotations([pin1,pin2,pin3]) }

override func viewDidLoad(){

super.viewDidLoad()

// Do any additional setup after loading the view, typically from a nib.

//Mapの中心座標設定

let centerCoordinate =CLLocationCoordinate2D(latitude:35.444374,longitude:139.635466)

let span=MKCoordinateSpan(latitudeDelta:0.2,longitudeDelta:0.2)

let centerPosition=MKCoordinateRegion(center:centerCoordinate,span:span)

self.mapView.setRegion(centerPosition,animated:true)

//Pinの追加

let pin1=CustomPinAnnotation("group1",coordinate:CLLocationCoordinate2D(latitude:35.44,longitude:139.64),glyphText:"pin1",glyphTintColor:.white,markerTintColor:.black)

let pin2=CustomPinAnnotation("group1",coordinate:CLLocationCoordinate2D(latitude:35.45,longitude:139.65),glyphText:"pin2",glyphTintColor:.white,markerTintColor:.black)

let pin3=CustomPinAnnotation("group3",coordinate:CLLocationCoordinate2D(latitude:35.46,longitude:139.66),glyphText:"pin3",glyphTintColor:.white,markerTintColor:.black)

mapView.addAnnotations([pin1,pin2,pin3])

}

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

CustomPinからMKMarkerAnnotationViewに変換する

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

 func mapView(_ mapView: MKMapView, viewFor annotation: MKAnnotation) -> MKAnnotationView? { let annotationView = mapView.dequeueReusableAnnotationView(withIdentifier: MKMapViewDefaultAnnotationViewReuseIdentifier, for: annotation) guard let markerAnnotationView = annotationView as? MKMarkerAnnotationView, let annotation = annotation as? CustomPinAnnotation else { return annotationView } markerAnnotationView.clusteringIdentifier = annotation.clusteringIdentifier markerAnnotationView.glyphText = annotation.glyphText markerAnnotationView.glyphTintColor = annotation.glyphTintColor markerAnnotationView.markerTintColor = annotation.markerTintColor return markerAnnotationView }

func mapView(_mapView:MKMapView,viewFor annotation:MKAnnotation)->MKAnnotationView?{

let annotationView=mapView.dequeueReusableAnnotationView(withIdentifier:MKMapViewDefaultAnnotationViewReuseIdentifier,for:annotation)

guard let markerAnnotationView=annotationView as?MKMarkerAnnotationView,

let annotation=annotationas?CustomPinAnnotationelse{

returnannotationView

}

markerAnnotationView.clusteringIdentifier=annotation.clusteringIdentifier

markerAnnotationView.glyphText=annotation.glyphText

markerAnnotationView.glyphTintColor=annotation.glyphTintColor

markerAnnotationView.markerTintColor=annotation.markerTintColor

returnmarkerAnnotationView

}

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

Pinの情報を持っているクラスは何か

最終的にMap上に配置したいオブジェクトは何か

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

修正版コード

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

 import UIKit import MapKit class ViewController: UIViewController,MKMapViewDelegate { @IBOutlet weak var mapView: MKMapView! override func viewDidLoad() { super.viewDidLoad() // Do any additional setup after loading the view, typically from a nib. //Mapの中心座標設定 let centerCoordinate = CLLocationCoordinate2D(latitude: 35.444374, longitude: 139.635466) let span = MKCoordinateSpan(latitudeDelta: 0.2, longitudeDelta: 0.2) let centerPosition = MKCoordinateRegion(center: centerCoordinate, span: span) self.mapView.setRegion(centerPosition,animated:true) //Pinの追加 let pin1 = CustomPinAnnotation("group1",coordinate: CLLocationCoordinate2D(latitude: 35.44, longitude: 139.64), glyphText: "pin1", glyphTintColor: .white, markerTintColor: .black) let pin2 = CustomPinAnnotation("group1",coordinate: CLLocationCoordinate2D(latitude: 35.45, longitude: 139.65), glyphText: "pin2", glyphTintColor: .white, markerTintColor: .black) let pin3 = CustomPinAnnotation("group3",coordinate: CLLocationCoordinate2D(latitude: 35.46, longitude: 139.66), glyphText: "pin3", glyphTintColor: .white, markerTintColor: .black) mapView.addAnnotations([pin1,pin2,pin3]) } func mapView(_ mapView: MKMapView, viewFor annotation: MKAnnotation) -> MKAnnotationView? { let annotationView = mapView.dequeueReusableAnnotationView(withIdentifier: MKMapViewDefaultAnnotationViewReuseIdentifier, for: annotation) guard let markerAnnotationView = annotationView as? MKMarkerAnnotationView, let annotation = annotation as? CustomPinAnnotation else { return annotationView } markerAnnotationView.clusteringIdentifier = annotation.clusteringIdentifier markerAnnotationView.glyphText = annotation.glyphText markerAnnotationView.glyphTintColor = annotation.glyphTintColor markerAnnotationView.markerTintColor = annotation.markerTintColor return markerAnnotationView } } class CustomPinAnnotation: NSObject, MKAnnotation { //ID let clusteringIdentifier : String //座標 let coordinate: CLLocationCoordinate2D //Pinのテキスト let glyphText: String //Pinのテキストの文字色 let glyphTintColor: UIColor //Pinの色 let markerTintColor: UIColor init(_ identifier: String, coordinate: CLLocationCoordinate2D, glyphText: String, glyphTintColor: UIColor = .white, markerTintColor: UIColor) { self.clusteringIdentifier = identifier self.coordinate = coordinate self.glyphText = glyphText self.glyphTintColor = glyphTintColor self.markerTintColor = markerTintColor } }

import UIKit

import MapKit

classViewController:UIViewController,MKMapViewDelegate{

@IBOutlet weak varmapView:MKMapView!

override func viewDidLoad(){

super.viewDidLoad()

// Do any additional setup after loading the view, typically from a nib.

//Mapの中心座標設定

let centerCoordinate =CLLocationCoordinate2D(latitude:35.444374,longitude:139.635466)

let span=MKCoordinateSpan(latitudeDelta:0.2,longitudeDelta:0.2)

let centerPosition=MKCoordinateRegion(center:centerCoordinate,span:span)

self.mapView.setRegion(centerPosition,animated:true)

//Pinの追加

let pin1=CustomPinAnnotation("group1",coordinate:CLLocationCoordinate2D(latitude:35.44,longitude:139.64),glyphText:"pin1",glyphTintColor:.white,markerTintColor:.black)

let pin2=CustomPinAnnotation("group1",coordinate:CLLocationCoordinate2D(latitude:35.45,longitude:139.65),glyphText:"pin2",glyphTintColor:.white,markerTintColor:.black)

let pin3=CustomPinAnnotation("group3",coordinate:CLLocationCoordinate2D(latitude:35.46,longitude:139.66),glyphText:"pin3",glyphTintColor:.white,markerTintColor:.black)

mapView.addAnnotations([pin1,pin2,pin3])

}

func mapView(_mapView:MKMapView,viewFor annotation:MKAnnotation)->MKAnnotationView?{

let annotationView=mapView.dequeueReusableAnnotationView(withIdentifier:MKMapViewDefaultAnnotationViewReuseIdentifier,for:annotation)

guard let markerAnnotationView=annotationView as?MKMarkerAnnotationView,

let annotation=annotationas?CustomPinAnnotationelse{returnannotationView}

markerAnnotationView.clusteringIdentifier=annotation.clusteringIdentifier

markerAnnotationView.glyphText=annotation.glyphText

markerAnnotationView.glyphTintColor=annotation.glyphTintColor

markerAnnotationView.markerTintColor=annotation.markerTintColor

returnmarkerAnnotationView

}

classCustomPinAnnotation:NSObject,MKAnnotation{

//ID

let clusteringIdentifier:String

//座標

let coordinate:CLLocationCoordinate2D

//Pinのテキスト

let glyphText:String

//Pinのテキストの文字色

let glyphTintColor:UIColor

//Pinの色

let markerTintColor:UIColor

init(_identifier:String,coordinate:CLLocationCoordinate2D,glyphText:String,glyphTintColor:UIColor=.white,markerTintColor:UIColor){

self.clusteringIdentifier=identifier

self.coordinate=coordinate

self.glyphText=glyphText

self.glyphTintColor=glyphTintColor

self.markerTintColor=markerTintColor

}

さいごに

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

日	月	火	水	木	金	土
						1
2	3	4	5	6	7	8
9	10	11	12	13	14	15
16	17	18	19	20	21	22
23	24	25	26	27	28	29
30	31

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

はじめに

クラスタリングとは

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

マップの作成

PINの作成

Pinのカスタマイズ

カスタムしたPinの利用

CustomPinからMKMarkerAnnotationViewに変換する

修正版コード

さいごに

フォロー

アプリ情報