在封装了地图源之后，我们开始实现最常用的功能，自定义 UI 展示。这里我以绘制一个标注举例。
自定义 UI 可以用 CoreGraphic 绘制，也可以用传统的 UIKit 那套。我这里自定义标注的样式并不复杂，我使用传统的 UIView 展示。当然有一些图形的 UI 我也有用到 CoreGraphic。
因为我的自定义标注出了图片外还有一些信息要展示（标注标题），因此我用一个数据结构来表示标注的信息。
public enum MeshAnnotationType {
case homePoint
}
public class MeshMapAnnotation {
public var type: MeshAnnotationType
init(type: MeshAnnotationType) {
self.type = type
}
}
因为是很简单的标注样式，所以 View 的实现也很简单：
class MeshAnnotaionView: UIView {
private(set) var annotion: MeshMapAnnotation
private(set) var imageView = UIImageView(image: nil)
init(annotion: MeshMapAnnotation) {
self.annotion = annotion
super.init(frame: CGRect.zero)
addSubview(imageView)
setupUI()
}
private func setupUI() {
switch type {
case .homePoint:
imageView.image = Asset.Map.iconMapHomepoint.image
imageView.frame = CGRect(x: 0, y: 0, width: 32, height: 32)
bounds = imageView.frame
default:
break
}
}
}
这里的样式就是简单的一个 icon。标注的样式这里就不展开讲了（不是重点），总之就是自己实现了一个 View。
下一步我们定义一个 CustomMapOverlayView 专门用来管理绘制自定义的需要展示的 UI。
class CustomMapOverlayView: UIView {
private var homePointAnnotationView: MeshAnnotaionView?
override init(frame: CGRect) {
super.init(frame: frame)
backgroundColor = UIColor.clear
isUserInteractionEnabled = false
}
func updateHomePoint(_ point: CGPoint?) {
if let point = point {
if homePointAnnotationView == nil {
let annotation = MeshMapAnnotation(type: .homePoint)
homePointAnnotationView = MeshAnnotaionView(annotion: annotation)
addSubview(homePointAnnotationView!)
}
homePointAnnotationView?.center = point
} else {
homePointAnnotationView?.removeFromSuperview()
}
}
}
CustomMapOverlayView 的一个细节要把 isUserInteractionEnabled 设为 false，因为这层覆盖在地图源上层，如果也响应交互事件，那么用户就无法拖动、缩放地图了。
至于自定义标注在这个 View 里怎么管理，就看各自的业务场景。因为我这里的地图标注就几个类型，直接定义成了可选的属性。如果要给上层更大的灵活性，也可以用字典存储。
在目前这个结构里，我们的自定义标注是可以脱离地图单独测试的。我们可以在测试项目中，直接初始化 CustomMapOverlayView，调用 updateHomePoint 就可以渲染出 homePointView。自定义 UI 的元素就可以良好的支持单元测试。这也是在设计的时候要考虑到一点，每一个单元尽量内聚。和外部通过数据连接，自身的逻辑可以独立的运行。这样最后整体的结构就会是各个小单元连接起来，而不是一堆单元直接焊死在一起。
接下来我们把 CustomMapOverlayView 集成到地图控件中：
public class MeshMapView: UIView {
let customOverlayView: CustomMapOverlayView
public init() {
customOverlayView = CustomMapOverlayView(frame: CGRect.zero)
super.init(frame: CGRect.zero)
addVendorMapView()
addSubview(customOverlayView)
customOverlayView.snp.makeConstraints { (make) in
make.edges.equalToSuperview()
}
}
}
这里需要稍微注意一下图层的顺序，因为自定义 UI 层要在地图源上方，因此需要先添加地图，再添加自定义 View。
集成之后就可以暴露接口给外部调用：
public class MeshMapView: UIView {
public var homePoint: CLLocationCoordinate2D? {
didSet {
updateHomePoint(homePoint)
}
}
private func updateHomePoint(_ coordinate: CLLocationCoordinate2D?) {
let correspondingPoint = convertCoordinateToCustomOverlayView(coordinate: coordinate)
customOverlayView.updateHomePoint(correspondingPoint)
}
private func convertCoordinateToCustomOverlayView(coordinate: CLLocationCoordinate2D?) -> CGPoint? {
guard let coordinate = coordinate else { return nil }
let standardCoordindate = MeshMapView.convertCoordinateToGCJIfNeeded(coordinate: coordinate)
guard let point = map?.convert(coordinate: standardCoordindate, toPointTo: customOverlayView) else { return nil }
if point.x.isNaN || point.y.isNaN { //如果转换时地图还没有加载完会返回无效的点
return nil
}
return point
}
}
国内地图使用的坐标都是 GCJ，但是国际上很多地方存的都是 GPS 坐标，因此这里在转换坐标的时候调用了一个接口将 WGS84 转成 GCJ，当然这里的误差肯定是有的。
上面的代码重点是，我们需要保存标注的地理坐标，添加到 customOverlayView 之前需要将地理坐标转换为平面坐标。转换完成之后就可以调用 customOverlayView.updateHomePoint 了。
还有一个细节是地理坐标到平面坐标的转换，有时地图没加载完会转换失败。因为 CGPoint 是值类型，有的地图 SDK 转换失败会转出值为 NaN。转换后还需要判断一下 x 和 y 的值是否是有效的。
完成上面的代码后，调用 updateHomePoint 后可以展示标注的位置了。但是目前这个实现还有一个问题，当用户移动地图的时候，标注在视图的位置没有跟着一下变动。正确的反应应该是地图位置变了，标注的位置也跟着一起变化。很自然的，我们需要监听地图区域变化通知，接着更新标注的位置。
首先我们声明一个类当做地图源的代理对象：
protocol VendorMapDelegate: class {
func mapViewDidChange()
func mapInitComplete()
}
class VendorMapDelegateProxy: NSObject, MAMapViewDelegate {
weak var delegate: VendorMapDelegate?
init(vendorMapDelegate: VendorMapDelegate) {
self.delegate = vendorMapDelegate
super.init()
}
func mapViewRegionChanged(_ mapView: MAMapView!) {
delegate?.mapViewDidChange()
}
func mapInitComplete(_ mapView: MAMapView!) {
delegate?.mapInitComplete()
}
}
声明了一个通用的接口 VendorMapDelegate 来表示地图源的通知事件。因为每个时刻只会有一个地图源存在，因此 VendorMapDelegateProxy 也只会有一个实例和 MeshMapView 关联。mapInitComplete 方法是高德特有的，不同的地图 SDK 有不同的方式表示自己加载完成，有的是 finishLoading，高德则是 mapInitComplete。地图加载完成的事件外界也会关心，因此也声明了这个方法。
接着我们把代理对象集成到 MeshMapView 中：
public class MeshMapView: UIView {
public var homePoint: CLLocationCoordinate2D? {
didSet {
updateHomePoint(homePoint)
}
}
private lazy var mapDelegateProxy: VendorMapDelegateProxy = {
return VendorMapDelegateProxy(vendorMapDelegate: self)
}()
private func addVendorMapView() {
switch MeshMapView.currentMapVendor {
case .gaode:
let gaodeMap = MAMapView(frame: CGRect.zero)
gaodeMap.delegate = mapDelegateProxy
addSubview(gaodeMap)
gaodeMap.snp.makeConstraints { (make) in
make.edges.equalToSuperview()
}
self.gaodeMap = gaodeMap
case .baidu:
// 。。。
}
}
func refreshCustomOverlay() {
updateHomePoint(homePoint)
}
}
extension MeshMapView: VendorMapDelegate {
func mapViewDidChange() {
refreshCustomOverlay()
}
func mapInitComplete() {
//。。。
}
}
集成这段代码后可以看出为什么之前需要保存 homePoint 的地理坐标了：因为地图区域变化后需要重新渲染标注，需要元数据重新映射平面坐标，好更新位置。
这个模块的设计要点是 CustomMapOverlayView 的职责一定要划分清楚，它只接受平面坐标更新位置。这样 CustomMapOverlayView 可以和业务解耦，只是特供了标注的绘制能力。而地图控件需要管理坐标转换，地图区域变动后的重新渲染的时机。
