Aracılığıyla paylaş


iOS 11'de MapKit'teki Yeni Özellikler

iOS 11, MapKit'e aşağıdaki yeni özellikleri ekler:

Kümelenmiş işaretçileri ve pusula düğmesini gösteren harita

Yakınlaştırma sırasında işaretçileri otomatik olarak gruplandırma

Örnekte, yeni iOS 11 ek açıklama kümeleme özelliğinin nasıl uygulandığı gösterilmektedir.

1. Alt sınıf oluşturma MKPointAnnotation

Nokta ek açıklama sınıfı, haritadaki her işaretçiyi temsil eder. Kullanılarak veya kullanılarak bir diziden MapView.AddAnnotations()tek tek MapView.AddAnnotation() eklenebilirler.

Nokta ek açıklama sınıflarının görsel gösterimi yoktur; yalnızca işaretçiyle ilişkili verileri (en önemlisi, Coordinate haritadaki enlem ve boylam olan özellik) ve tüm özel özellikleri temsil etmek için gereklidir:

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. Tek işaretçiler için alt MKMarkerAnnotationView sınıf oluşturma

İşaretçi ek açıklaması görünümü, her ek açıklamanın görsel gösterimidir ve aşağıdaki gibi özellikler kullanılarak stillendirilir:

  • MarkerTintColor : İşaretçinin rengi.
  • GlyphText : İşaretçide görüntülenen metin.
  • GlyphImage : İşaretçide görüntülenen görüntüyü ayarlar.
  • DisplayPriority – Harita işaretçilerle dolu olduğunda z sırasını (yığınlama davranışını) belirler. , veya DefaultHighDefaultLowtürlerinden Requiredbirini kullanın.

Otomatik kümelemeye destek olmak için şunları da ayarlamanız gerekir:

  • ClusteringIdentifier – Bu, hangi işaretçilerin birlikte kümelendiğini denetler. Tüm işaretçileriniz için aynı tanımlayıcıyı kullanabilir veya bunların birlikte gruplandırma şeklini denetlemek için farklı tanımlayıcılar kullanabilirsiniz.
[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. İşaretçi kümelerini temsil etmek için oluşturma MKAnnotationView

bir işaretçi kümesini temsil eden ek açıklama görünümü basit bir görüntü olsa da, kullanıcılar uygulamanın birlikte gruplandırılan işaretçi sayısı hakkında görsel ipuçları sağlamasını bekler.

Örnek, kümedeki işaretçi sayısını işlemek için CoreGraphics'i ve her işaretçi türünün oranının daire grafiği gösterimini kullanır.

Ayrıca şunları da ayarlamalısınız:

  • DisplayPriority – Harita işaretçilerle dolu olduğunda z sırasını (yığınlama davranışını) belirler. , veya DefaultHighDefaultLowtürlerinden Requiredbirini kullanın.
  • CollisionModeCircle veya 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. Görünüm sınıflarını kaydetme

Harita görünümü denetimi oluşturulduğunda ve bir görünüme eklendiğinde, harita yakınlaştırılıp uzaklaştırıldığında otomatik kümeleme davranışını etkinleştirmek için ek açıklama görünümü türlerini kaydedin:

MapView.Register(typeof(BikeView), MKMapViewDefault.AnnotationViewReuseIdentifier);
MapView.Register(typeof(ClusterView), MKMapViewDefault.ClusterAnnotationViewReuseIdentifier);

5. Haritayı işleyin!

Eşleme işlendiğinde, ek açıklama işaretçileri yakınlaştırma düzeyine bağlı olarak kümelenir veya işlenir. Yakınlaştırma düzeyi değiştikçe, işaretçiler kümelerin içinde ve dışında hareket eder.

Harita üzerinde kümelenmiş işaretçileri gösteren simülatör

MapKit ile veri görüntüleme hakkında daha fazla bilgi için Haritalar bölümüne bakın.

Pusula Düğmesi

iOS 11, pusulayı haritanın dışına çıkarma ve görünümün başka bir yerinde işleme özelliği ekler.

Pusulaya benzeyen bir düğme oluşturun (harita yönü değiştirildiğinde canlı animasyon dahil) ve bunu başka bir denetimde işler.

Gezinti çubuğunda pusula düğmesi

Aşağıdaki kod bir pusula düğmesi oluşturur ve gezinti çubuğunda işler:

var compass = MKCompassButton.FromMapView(MapView);
compass.CompassVisibility = MKFeatureVisibility.Visible;
NavigationItem.RightBarButtonItem = new UIBarButtonItem(compass);
MapView.ShowsCompass = false; // so we don't have two compasses!

özelliği, ShowsCompass harita görünümünde varsayılan pusulanın görünürlüğünü denetlemek için kullanılabilir.

Ölçek Görünümü

Görünüm hiyerarşisinde başka bir yere eklemek üzere ölçek görünümünün bir örneğini almak için yöntemini kullanarak MKScaleView.FromMapView() ölçeği görünümün başka bir yerinde ekleyin.

Harita üzerinde ölçek görünümü yer paylaşımlı

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!

özelliği, ShowsScale harita görünümünde varsayılan pusulanın görünürlüğünü denetlemek için kullanılabilir.

Kullanıcı İzleme Düğmesi

Kullanıcı izleme düğmesi, haritayı kullanıcının geçerli konumuna ortalar. Düğmenin MKUserTrackingButton.FromMapView() bir örneğini almak, biçimlendirme değişiklikleri uygulamak ve görünüm hiyerarşisinde başka bir yere eklemek için yöntemini kullanın.

Harita üzerinde yer paylaşımlı kullanıcı konumu düğmesi

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