阅读 351

基于 Swift 多地图源业务向地图控件实现(二):自定义 UI 展示

在封装了地图源之后,我们开始实现最常用的功能,自定义 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 可以和业务解耦,只是特供了标注的绘制能力。而地图控件需要管理坐标转换,地图区域变动后的重新渲染的时机。