iOS 11은 MapKit에 다음과 같은 새로운 기능을 추가합니다.
확대/축소하는 동안 표식 자동 그룹화
이 샘플에서는 새 iOS 11 주석 클러스터링 기능을 구현하는 방법을 보여 있습니다.
1. 하위 클래스 만들기 MKPointAnnotation
점 주석 클래스는 지도의 각 표식을 나타냅니다. 를 사용하여 MapView.AddAnnotations()배열을 사용 MapView.AddAnnotation() 하거나 배열에서 개별적으로 추가할 수 있습니다.
점 주석 클래스에는 시각적 표현이 없으며 표식과 연결된 데이터(가장 중요한 것은 Coordinate 지도의 위도 및 경도인 속성) 및 사용자 지정 속성만 나타내기만 하면 됩니다.
public class Bike : MKPointAnnotation
{
public BikeType Type { get; set; } = BikeType.Tricycle;
public Bike(){}
public Bike(NSNumber lat, NSNumber lgn, NSNumber type)
{
Coordinate = new CLLocationCoordinate2D(lat.NFloatValue, lgn.NFloatValue);
switch(type.NUIntValue) {
case 0:
Type = BikeType.Unicycle;
break;
case 1:
Type = BikeType.Tricycle;
break;
}
}
}
2. 단일 표식에 MKMarkerAnnotationView 대한 서브클래스 만들기
표식 주석 뷰는 각 주석의 시각적 표현이며 다음과 같은 속성을 사용하여 스타일이 지정됩니다.
- MarkerTintColor – 표식의 색입니다.
- 문자 모양 텍스트 – 표식에 표시되는 텍스트입니다.
- GlyphImage – 표식에 표시되는 이미지를 설정합니다.
- DisplayPriority – 지도가 표식으로 붐비는 경우 z 순서(누적 동작)를 결정합니다. ,
DefaultHigh또는DefaultLow. 중Required하나를 사용합니다.
자동 클러스터링 지원하려면 다음도 설정해야 합니다.
- ClusteringIdentifier – 이 컨트롤은 마커가 함께 클러스터링되는 것을 제어합니다. 모든 표식에 대해 동일한 식별자를 사용하거나 다른 식별자를 사용하여 함께 그룹화되는 방식을 제어할 수 있습니다.
[Register("BikeView")]
public class BikeView : MKMarkerAnnotationView
{
public static UIColor UnicycleColor = UIColor.FromRGB(254, 122, 36);
public static UIColor TricycleColor = UIColor.FromRGB(153, 180, 44);
public override IMKAnnotation Annotation
{
get {
return base.Annotation;
}
set {
base.Annotation = value;
var bike = value as Bike;
if (bike != null){
ClusteringIdentifier = "bike";
switch(bike.Type){
case BikeType.Unicycle:
MarkerTintColor = UnicycleColor;
GlyphImage = UIImage.FromBundle("Unicycle");
DisplayPriority = MKFeatureDisplayPriority.DefaultLow;
break;
case BikeType.Tricycle:
MarkerTintColor = TricycleColor;
GlyphImage = UIImage.FromBundle("Tricycle");
DisplayPriority = MKFeatureDisplayPriority.DefaultHigh;
break;
}
}
}
}
3. 표식의 클러스터를 나타내는 방법 만들기 MKAnnotationView
마커 클러스터를 나타내는 주석 보기는 간단한 이미지일 수 있지만, 사용자는 앱이 함께 그룹화된 표식 수에 대한 시각적 신호를 제공할 것으로 기대합니다.
이 샘플에서는 CoreGraphics를 사용하여 클러스터의 표식 수와 각 표식 형식의 비율에 대한 원 그래프 표현을 렌더링합니다.
또한 다음을 설정해야 합니다.
- DisplayPriority – 지도가 표식으로 붐비는 경우 z 순서(누적 동작)를 결정합니다. ,
DefaultHigh또는DefaultLow. 중Required하나를 사용합니다. - CollisionMode –
Circle또는Rectangle.
[Register("ClusterView")]
public class ClusterView : MKAnnotationView
{
public static UIColor ClusterColor = UIColor.FromRGB(202, 150, 38);
public override IMKAnnotation Annotation
{
get {
return base.Annotation;
}
set {
base.Annotation = value;
var cluster = MKAnnotationWrapperExtensions.UnwrapClusterAnnotation(value);
if (cluster != null)
{
var renderer = new UIGraphicsImageRenderer(new CGSize(40, 40));
var count = cluster.MemberAnnotations.Length;
var unicycleCount = CountBikeType(cluster.MemberAnnotations, BikeType.Unicycle);
Image = renderer.CreateImage((context) => {
// Fill full circle with tricycle color
BikeView.TricycleColor.SetFill();
UIBezierPath.FromOval(new CGRect(0, 0, 40, 40)).Fill();
// Fill pie with unicycle color
BikeView.UnicycleColor.SetFill();
var piePath = new UIBezierPath();
piePath.AddArc(new CGPoint(20,20), 20, 0, (nfloat)(Math.PI * 2.0 * unicycleCount / count), true);
piePath.AddLineTo(new CGPoint(20, 20));
piePath.ClosePath();
piePath.Fill();
// Fill inner circle with white color
UIColor.White.SetFill();
UIBezierPath.FromOval(new CGRect(8, 8, 24, 24)).Fill();
// Finally draw count text vertically and horizontally centered
var attributes = new UIStringAttributes() {
ForegroundColor = UIColor.Black,
Font = UIFont.BoldSystemFontOfSize(20)
};
var text = new NSString($"{count}");
var size = text.GetSizeUsingAttributes(attributes);
var rect = new CGRect(20 - size.Width / 2, 20 - size.Height / 2, size.Width, size.Height);
text.DrawString(rect, attributes);
});
}
}
}
public ClusterView(){}
public ClusterView(MKAnnotation annotation, string reuseIdentifier) : base(annotation, reuseIdentifier)
{
DisplayPriority = MKFeatureDisplayPriority.DefaultHigh;
CollisionMode = MKAnnotationViewCollisionMode.Circle;
// Offset center point to animate better with marker annotations
CenterOffset = new CoreGraphics.CGPoint(0, -10);
}
private nuint CountBikeType(IMKAnnotation[] members, BikeType type) {
nuint count = 0;
foreach(Bike member in members){
if (member.Type == type) ++count;
}
return count;
}
}
4. 보기 클래스 등록
지도 보기 컨트롤이 만들어지고 뷰에 추가되는 경우 주석 보기 형식을 등록하여 지도가 확대 및 축소될 때 자동 클러스터링 동작을 사용하도록 설정합니다.
MapView.Register(typeof(BikeView), MKMapViewDefault.AnnotationViewReuseIdentifier);
MapView.Register(typeof(ClusterView), MKMapViewDefault.ClusterAnnotationViewReuseIdentifier);
5. 지도를 렌더링합니다!
지도가 렌더링되면 확대/축소 수준에 따라 주석 표식이 클러스터링되거나 렌더링됩니다. 확대/축소 수준이 변경되면 표식이 클러스터 안팎으로 애니메이션 효과를 줍니다.
MapKit을 사용하여 데이터를 표시하는 방법에 대한 자세한 내용은 지도 섹션을 참조하세요.
나침반 단추
iOS 11은 맵에서 나침반을 팝하고 보기의 다른 곳에 렌더링하는 기능을 추가합니다.
나침반처럼 보이는 단추(지도 방향이 변경될 때 라이브 애니메이션 포함)를 만들고 다른 컨트롤에 렌더링합니다.
아래 코드는 나침반 단추를 만들고 탐색 모음에 렌더링합니다.
var compass = MKCompassButton.FromMapView(MapView);
compass.CompassVisibility = MKFeatureVisibility.Visible;
NavigationItem.RightBarButtonItem = new UIBarButtonItem(compass);
MapView.ShowsCompass = false; // so we don't have two compasses!
이 ShowsCompass 속성을 사용하여 지도 보기 내에서 기본 나침반의 표시 유형을 제어할 수 있습니다.
배율 보기
뷰 계층 구조의 다른 위치에 추가할 확장 보기의 인스턴스를 가져오는 메서드를 사용하여 MKScaleView.FromMapView() 뷰의 다른 위치에 배율을 추가합니다.
var scale = MKScaleView.FromMapView(MapView);
scale.LegendAlignment = MKScaleViewAlignment.Trailing;
scale.TranslatesAutoresizingMaskIntoConstraints = false;
View.AddSubview(scale); // constraints omitted for simplicity
MapView.ShowsScale = false; // so we don't have two scale displays!
이 ShowsScale 속성을 사용하여 지도 보기 내에서 기본 나침반의 표시 유형을 제어할 수 있습니다.
사용자 추적 단추
사용자 추적 단추는 맵을 사용자의 현재 위치에 가운데에 배치합니다. 이 메서드를 MKUserTrackingButton.FromMapView() 사용하여 단추의 인스턴스를 가져와서 서식 변경 내용을 적용하고 보기 계층 구조의 다른 곳에 추가합니다.
var button = MKUserTrackingButton.FromMapView(MapView);
button.Layer.BackgroundColor = UIColor.FromRGBA(255,255,255,80).CGColor;
button.Layer.BorderColor = UIColor.White.CGColor;
button.Layer.BorderWidth = 1;
button.Layer.CornerRadius = 5;
button.TranslatesAutoresizingMaskIntoConstraints = false;
View.AddSubview(button); // constraints omitted for simplicity