基于 Swift 多地图源业务向地图控件实现（二）：自定义 UI 展现

时间 2019-12-28

原文原文链接

多地图源业务向地图控件开发思路

基于 Swift 多地图源业务向地图控件实现（一）：封装地图源

基于 Swift 多地图源业务向地图控件实现（二）：自定义 UI 展现

基于 Swift 多地图源业务向地图控件实现（三）：交互事件处理

一段代码的重构实践记录

在封装了地图源以后，咱们开始实现最经常使用的功能，自定义 UI 展现。这里我以绘制一个标注举例。自定义 UI 能够用 CoreGraphic 绘制，也能够用传统的 UIKit 那套。我这里自定义标注的样式并不复杂，我使用传统的 UIView 展现。固然有一些图形的 UI 我也有用到 CoreGraphic。swift

由于个人自定义标注出了图片外还有一些信息要展现（标注标题），所以我用一个数据结构来表示标注的信息。bash

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。ide

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 里怎么管理，就看各自的业务场景。由于我这里的地图标注就几个类型，直接定义成了可选的属性。若是要给上层更大的灵活性，也能够用字典存储。post

在目前这个结构里，咱们的自定义标注是能够脱离地图单独测试的。咱们能够在测试项目中，直接初始化 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。ui

集成以后就能够暴露接口给外部调用：spa

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 能够和业务解耦，只是特供了标注的绘制能力。而地图控件须要管理坐标转换，地图区域变更后的从新渲染的时机。