MapKit使用介绍：大头针和图形渲染

作者&＃xff1a;PRANJAL SATIJA&＃xff0c;原文链接&＃xff0c;原文日期&＃xff1a;2016-11-13
译者&＃xff1a;TonyHan&＃xff1b;校对&＃xff1a;Cwift&＃xff1b;定稿&＃xff1a;CMB

最近 APP 中的地图功能变得越来越流行了。从优步到 Instagram &＃xff0c;再到我的新应用 peek &＃xff0c;地图功能在各种 APP 中都能见到。虽然地图很常见&＃xff0c;但是往地图功能添加一些更复杂的功能还是有点挑战的。在这篇文章中&＃xff0c;咱们就讨论下在 MapKit 中的大头针和图形渲染&＃xff0c;MapKit 是苹果 iOS 系统中的地图库。你在 iOS 系统中看到的许多地图都依赖 MapKit 的强大支撑——当然包括苹果内置地图 APP&＃xff01;MapKit 是一个功能强大、稳定的、健壮的地图库。当然它也很易用&＃xff0c;让我们开始吧&＃xff01;

准备工作

开始之前&＃xff0c;请先下载实例程序。打开之后你会发现这些文件&＃xff1a;

Places.plist&＃xff1a;这是存储我们要渲染的坐标信息的配置文件。
Places.swift&＃xff1a;这个 swift 文件加载 Places.plist 文件中的数据并暴露给其他代码。
Main.storyboard&＃xff1a;这是我们应用使用的主 storyboard 。里面是一个带有地图视图的视图控制器。我已经搭建好界面和约束了。
ViewController.swift&＃xff1a;这是用于控制地图的试图控制器。我已经创建好一个连线来连接 storyboard 中的地图视图。

在构建运行应用之前&＃xff0c;还有一件事情需要做&＃xff1a;导入 MapKit.framework 到我们项目中&＃xff0c;这样才能使用 MapKit。有两种方式&＃xff1a;一种是手动添加依赖库。点击项目导航中的 MapKit starter &＃xff0c;向下滚动到 Linked Frameworks and Libraries &＃xff1a;

点击加号图标添加 MapKit.framework。如果 Embedded Binaries 中没有自动添加&＃xff0c;则在此处也要点击加号添加。

或者&＃xff0c;你可以去 Capabilities 界面将 Maps 选项设置为 ON。

现在我们已经准备完毕&＃xff01;编译并运行应用看看会效果&＃xff01;你将会看到 MKMapView 占据了整个屏幕。默认情况下&＃xff0c;地图视图支持放大、旋转、滚动以及 3D 模式。它还显示有趣的地点&＃xff0c;并在主要城市以 3D 显示建筑物。相当酷吧&＃xff01;这篇文章中我们将使用这个地图&＃xff0c;泡杯咖啡坐下来&＃xff0c;一起进行这项工作吧&＃xff01;

用户坐标展示

首先&＃xff0c;将用户的坐标展示到地图上是很重要的&＃xff0c;这样用户就可以对其所在位置周围的建筑有所感知。很幸运&＃xff0c;用 MapKit 很容易做到这一点。打开 Storyboard&＃xff0c;选择我们的地图&＃xff0c;勾选 User Location 这一项&＃xff1a;

如果你想通过代码实现&＃xff0c;把下面这一行放到控制器中的 viewDidLoad 方法中&＃xff1a;

mapView?.showsUserLocation &＃61; true

在达到目标前还有几步要完成。现在&＃xff0c;MapKit 将会展示用户的位置&＃xff0c;但我们还没有申请用户授权。我们来完成这个。

打开 ViewController.swift 并且添加一个方法 requestLocationAccess()&＃xff1a;

func requestLocationAccess() {let status &＃61; CLLocationManager.authorizationStatus()switch status {case .authorizedAlways, .authorizedWhenInUse:returncase .denied, .restricted:print("location access denied")default:locationManager.requestWhenInUseAuthorization()} }

这个方法实现一个简单的目标&＃xff1a;检查用户是否授权使用位置并作出响应。如果用户已经授权过&＃xff0c;那直接返回&＃xff0c;不再有其他操作。如果用户拒绝或限制位置信息使用&＃xff0c;则会输出错误信息。否则&＃xff0c;我们在应用中会向用户申请使用位置信息。

最后一件事。找到 Info.plist 文件。增加一个类型为 String 的键 NSLocationWhenInUseUsageDescription&＃xff0c;然后设置值为 MapKit starter needs your location so that you can see it on a map.。通过这个可以告诉用户我们为什么要去请求使用位置信息&＃xff0c;从而让用户更倾向于同意访问。从 iOS 8 开始&＃xff0c;系统要求我们必须添加这段字符信息。

还有一步&＃xff01;在 ViewController.swift 中重写 viewDidLoad() 方法并调用 requestLocationAccess() 方法&＃xff1a;

override func viewDidLoad() {requestLocationAccess() }

再一次编译并运行应用。你会得到一个获取用户信息的提示。点击接受&＃xff0c;然后看着吧。现在会显示出你所在的位置。MapKit 会随着用户位置的移动而自动更新坐标。

如果你在用模拟器测试应用&＃xff0c;你可以点击调试区域的位置按钮&＃xff0c;Xcode 提供了一系列位置信息来模拟用户的位置。

现在让我们试试显示更牛逼的内容吧。

展示自定义大头针

我们已经知道如何展示用户的坐标了&＃xff0c;但是现在&＃xff0c;我们需要展示用我们的自己的图片自定义的大头针样式。打开 Places.plist 文件&＃xff0c;查看其内容。你能看到一个简短的城市列表。由于只是个例子&＃xff0c;我们并没有准备太多数据。

html titleNew YorkdescriptionWelcome to New York City!latitude40.7128longitude-74.0059titleSan FranciscodescriptionWelcome to San Francisco!latitude37.7749longitude-122.4194titleLos AngelesdescriptionWelcome to Los Angeles!latitude34.0522longitude-118.2437

列表里有纽约、旧金山和洛杉矶及其经纬度坐标。虽然有关配置文件的知识已经超出了本篇教程的范围&＃xff0c;但是你可以在这篇文章里找到关于 .plist 配置文件的内容。

打开 Places.swift 文件&＃xff0c;你会看到一个静态方法&＃xff0c;用来获取 Places.plist 文件中的所有地点。你不用关心实现&＃xff0c;你只需要去调用 Place.getPlaces() 方法&＃xff0c;便可以返回 Places.plist 中的所有地点。让我们在 ViewController 中添加一个属性&＃xff0c;用来保存所有已加载的地点信息&＃xff1a;

let places &＃61; Place.getPlaces()

确保 ViewController.swift 中的代码如下&＃xff1a;

现在&＃xff0c;让我们看看关键的地方。下面是在 MKMapView 上添加大头针的基本流程&＃xff1a;

创建遵从 MKAnnotation 协议的对象&＃xff0c;扩展已存在的对象也可以。
通过 addAnnotation(_:) 在一个 MKMapView 实例中添加大头针对象。
创建遵从 MKMapViewDelegate 协议的对象并指定其代理为我们的地图视图。
实现 mapView(_: viewFor:) 方法&＃xff0c;为 MapKit 提供需要渲染的大头针视图。

下面我们会实现上面的四个步骤。

创建遵从 `MKAnnotation` 协议的对象

MKAnnotation 协议定义在 MapKit 中&＃xff0c;用来给 MapKit 提供数据。我们来实现 MKAnnotation 协议的要求&＃xff1a;

var title: String? var subtitle: String? var location: CLLocationCoordinate2D

任何用来保存或展示大头针的自定义对象都可以通过遵守 MKAnnotation 协议从而使用相关的功能。随后每个对象都会作为地图上大头针的数据源&＃xff0c;提供关键的信息&＃xff0c;比如大头针在地图上的位置。

如你所料&＃xff0c;我们扩展 Place 类并遵从 MKAnnotation 协议。在 Place.swift 中导入 MapKit 并添加 MKAnnotation 协议&＃xff1a;

extension Place: MKAnnotation { }

编译并运行&＃xff0c;啥东西也没有。这是正常的。同时&＃xff0c;我们的 Place 类也已满足 MKAnnotation 的所有的要求。

很好。让我们接着做下一步。

向地图视图添加大头针

这步不难。我们只需要告诉 mapView 我们已经加载的每一个地点即可。在 ViewController.swift 中添加一个方法。命名为 addAnnotations()&＃xff1a;

func addAnnotations() {mapView?.delegate &＃61; selfmapView?.addAnnotations(places) }

这并不复杂。将地图视图的代理设置成 self。然后&＃xff0c;我们将地点大头针添加到地图上。简单吧&＃xff01;继续之前记得在 viewDidLoad() 中调用 addAnnotations() 方法。

遵守 MKMapViewDelegate 协议

接下来我们需要创建一个遵守 MKMapViewDelegate 协议的对象。跟 MKAnnotation 协议一样&＃xff0c;我们需要扩展一个类来实现。如果你之前用过 UITableView&＃xff0c;那这跟使用 UITableViewDelegate 和 UITableViewDataSource 相似。我们使用 ViewController 的扩展来实现 MKMapViewDelegate 协议&＃xff1a;

extension ViewController: MKMapViewDelegate {func mapView(_ mapView: MKMapView, viewFor annotation: MKAnnotation) -> MKAnnotationView? {} }

上面的代码扩展了 ViewController 类&＃xff0c;并且添加了向每个大头针返回相应视图的方法。让我们继续&＃xff1a;

func mapView(_ mapView: MKMapView, viewFor annotation: MKAnnotation) -> MKAnnotationView? {if annotation is MKUserLocation {return nil}else {let annotationView &＃61; mapView.dequeueReusableAnnotationView(withIdentifier: "annotationView") ?? MKAnnotationView()annotationView.image &＃61; UIImage(named: "place icon")return annotationView} }

很简单是吧&＃xff1f;首先我们检查一下大头针是否展示在了用户位置上。如果是&＃xff0c;我们不用返回自定义大头针&＃xff0c;因为我们希望和往常一样来展示用户的位置。如果没有的话&＃xff0c;我们新建一个大头针&＃xff0c;我们通过 **[复用队列
](https://en.wiktionary.org/wik...** 来创建一个新的大头针。这样我们就能有效的复用大头针视图。然后&＃xff0c;我们设置大头针视图上的图片&＃xff08;在 Assets.xcassets 中使用的图片&＃xff09;。最后&＃xff0c;我们返回大头针视图。

审查代码

看下 ViewController.swift 文件。如果你按照步骤做完&＃xff0c;那代码应该是这样的&＃xff1a;

import UIKit import MapKitclass ViewController: UIViewController {&＃64;IBOutlet var mapView: MKMapView?let locationManager &＃61; CLLocationManager()let places &＃61; Place.getPlaces()override func viewDidLoad() {requestLocationAccess()addAnnotations()}func requestLocationAccess() {let status &＃61; CLLocationManager.authorizationStatus()switch status {case .authorizedAlways, .authorizedWhenInUse:returncase .denied, .restricted:print("location access denied")default:locationManager.requestWhenInUseAuthorization()}}func addAnnotations() {mapView?.delegate &＃61; selfmapView?.addAnnotations(places)} }extension ViewController: MKMapViewDelegate {func mapView(_ mapView: MKMapView, viewFor annotation: MKAnnotation) -> MKAnnotationView? {if annotation is MKUserLocation {return nil}else {let annotationView &＃61; mapView.dequeueReusableAnnotationView(withIdentifier: "annotationView") ?? MKAnnotationView()annotationView.image &＃61; UIImage(named: "place icon")return annotationView}} }

运行应用&＃xff0c;你会发现地图中有三个大头针分别对应 Place.plist 文件中指定的地点。

如果没成功&＃xff0c;请往前查看是否遗漏了某一步。如果需要帮助请随时留言。现在我们已经掌握了向 MKMapView 添加了大头针的技巧。peek 中就是用这样的方式向用户展示事件发生的位置。大多数带地图功能的应用都使用这个技术来向用户展示指定的地点。

现在我们来看看如何添加图层渲染。

展示图层渲染

目前为止&＃xff0c;我们已经学会如何展示自定义的大头针以便标注出地图上的地点。接下来我们来学习在地图上绘出图形。例如&＃xff0c;我们可能会在每个地点周围画出半径 100 米圆。为了实现这点&＃xff0c;我们需要做两件事&＃xff1a;

1.在我们的地图上添加遮罩。
2.为每个遮罩指定渲染器&＃xff0c;让 MapKit 去渲染这些图层。

添加遮罩

首先&＃xff0c;需要告诉 MapKit 我们想在地图上展示遮罩。修改 addAnnotations()&＃xff0c;如下&＃xff1a;

func addAnnotations() {mapView?.delegate &＃61; selfmapView?.addAnnotations(places)let overlays &＃61; places.map { MKCircle(center: $0.coordinate, radius: 100) }mapView?.addOverlays(overlays) }

前两行很相似&＃xff0c;后面两行代码是新的。我们使用 map —— Swift 的集合操作函数&＃xff0c;来生成一个基于我们的地点的 MKCircle 对象数组。如果你对 map 感到陌生&＃xff0c;可以理解为 for 循环。但是你可以一行代码实现。

接下来&＃xff0c;通过 mapView?.addOverlays(_:) 添加遮罩。跟添加大头针类似。

渲染遮罩

添加遮罩还不够。你只有渲染并设置可见&＃xff0c;MapKit 才会去显示这些遮罩。我们对每个地点添加了圆形的遮罩&＃xff0c;对应地要对遮罩进行渲染。在 ViewController 扩展中添加 mapView(_: rendererFor:) 方法&＃xff1a;

func mapView(_ mapView: MKMapView, rendererFor overlay: MKOverlay) -> MKOverlayRenderer {let renderer &＃61; MKCircleRenderer(overlay: overlay)renderer.fillColor &＃61; UIColor.black.withAlphaComponent(0.5)renderer.strokeColor &＃61; UIColor.bluerenderer.lineWidth &＃61; 2return renderer }

正如名字所显示的&＃xff0c;这个方法允许我们返回 MKOverlayRenderer &＃xff0c;为每个遮罩提供合适的渲染。MapKit 对于圆形的渲染有一个类&＃xff0c;叫做 MKCircleRenderer。我们创建一个渲染器&＃xff0c;并且设置成想要的外观&＃xff0c;并将其返回&＃xff0c; MapKit 就可以使用渲染器了。

现在你可以再次测试应用。放大纽约、旧金山或洛杉矶&＃xff0c;能看到圆形的遮罩。