首页
学习
活动
专区
工具
TVP
发布
社区首页 >问答首页 >在Swift中缩小地图时的MKMapView非聚类注释

在Swift中缩小地图时的MKMapView非聚类注释
EN

Stack Overflow用户
提问于 2019-05-26 16:19:54
回答 1查看 4.4K关注 0票数 7

在复制我的任务之前,请阅读全文。我在我的应用程序中使用MkMapKit,现在我必须在缩小地图时显示集群中的人,到目前为止,我已经使用苹果的默认集群类从this answer中实现了对他们的计数。现在我不知道如何添加和显示他们与那里计数的所有圆,我知道一些东西,它应该与半径有关,但我不知道如何才能做到这一点,分享我的代码在下面,我希望任何帮助将不胜感激。也感谢展示我所做的事情的图片:

这是我的UserAnnotationClass

代码语言:javascript
复制
class UserAnnotation: NSObject, MKAnnotation {

    let title: String?
    let locationName: String
    let discipline: String
    let coordinate: CLLocationCoordinate2D

    let userProfile: UserProfile!
    let index: Int!
    let memberAnnotations: [UserProfile]!
    init(userProfile: UserProfile, at index: Int) {

        self.title = userProfile.fullName
        self.locationName = (userProfile.locationAddress != nil) ? userProfile.locationAddress : ""
        let userProfilePicture: String = (userProfile.profilePicture == nil || userProfile.profilePicture == "") ? "" : userProfile.profilePicture

        self.discipline = userProfilePicture

       // print("\(userProfile.fullName) \(userProfile.location.dist)")

        if (userProfile.isMapVisibility == true) {
            self.coordinate = CLLocationCoordinate2D(latitude: userProfile.location.lat, longitude: userProfile.location.lon)
        } else {
            self.coordinate = CLLocationCoordinate2D(latitude: 0.0, longitude: 0.0)
        }
        memberAnnotations = [UserProfile]()
        memberAnnotations.append(userProfile)
        self.userProfile = userProfile
        self.index = index

        super.init()
    }

    var subtitle: String? {
        return locationName
    }

    // pinTintColor for disciplines: Sculpture, Plaque, Mural, Monument, other
    var markerTintColor: UIColor  {
        switch discipline {
        case "Monument":
            return .red
        case "Mural":
            return .cyan
        case "Plaque":
            return .blue
        case "Sculpture":
            return .purple
        default:
            return .clear
        }
    }

    // Annotation right callout accessory opens this mapItem in Maps app
    func mapItem() -> MKMapItem {
        let addressDict = [CNPostalAddressStreetKey: subtitle!]
        let placemark = MKPlacemark(coordinate: coordinate, addressDictionary: addressDict)
        let mapItem = MKMapItem(placemark: placemark)
        mapItem.name = title


        return mapItem
    }
}

这是我用来将它们集群化的CLusterViewClass

代码语言:javascript
复制
class ClusterView: MKAnnotationView {


    override func hitTest(_ point: CGPoint, with event: UIEvent?) -> UIView? {
        let hitView = super.hitTest(point, with: event)
        if (hitView != nil)
        {

            if (hitView?.isKind(of: UIButton.self))! {

                let sender: UIButton = hitView as! UIButton

                sender.sendActions(for: .touchUpInside)

            }
            else {

                self.superview?.bringSubviewToFront(self)
            }
        }
        return hitView
    }
    override func point(inside point: CGPoint, with event: UIEvent?) -> Bool {
        let rect = self.bounds
        var isInside: Bool = rect.contains(point)
        if(!isInside)
        {
            for view in self.subviews
            {
                isInside = view.frame.contains(point)
                if isInside
                {
                    break
                }
            }
        }
        return isInside
    }
    override init(annotation: MKAnnotation?, reuseIdentifier: String?) {
        super.init(annotation: annotation, reuseIdentifier: reuseIdentifier)
        displayPriority = .defaultHigh
        collisionMode = .circle
        centerOffset = CGPoint(x: 0, y: -10) // Offset center point to animate better with marker annotations
    }

    required init?(coder aDecoder: NSCoder) {
        fatalError("init(coder:) has not been implemented")
    }

    override var annotation: MKAnnotation? {
        willSet {

            canShowCallout = false

            if let cluster = newValue as? UserAnnotation {
                let renderer = UIGraphicsImageRenderer(size: CGSize(width: 40, height: 40))
                let count = cluster.memberAnnotations.count
                let uniCount = cluster.memberAnnotations.filter { member -> Bool in
                    //Log("Bool  \(member) , \(member.isMapVisibility == false) ")

                    return member.isMapVisibility == true
                }.count
                //Log("COUNTS \(count) , \(uniCount) ❤️")
                image = renderer.image { _ in
                    // Fill full circle with tricycle color
                    if uniCount > 0 {

                        AppTheme.blueColor.setFill()
                        UIBezierPath(ovalIn: CGRect(x: 0, y: 0, width: 40, height: 40)).fill()

                        // Fill inner circle with white color
                        UIColor.white.setFill()
                        UIBezierPath(ovalIn: CGRect(x: 8, y: 8, width: 24, height: 24)).fill()

                        // Finally draw count text vertically and horizontally centered
                        let attributes = [ NSAttributedString.Key.foregroundColor: UIColor.black,
                                           NSAttributedString.Key.font: UIFont.boldSystemFont(ofSize: 20)]
                        //let text = "\(count)"
                        let text = "4"
                        let size = text.size(withAttributes: attributes)
                        let rect = CGRect(x: 20 - size.width / 2, y: 20 - size.height / 2, width: size.width, height: size.height)
                        text.draw(in: rect, withAttributes: attributes)
                    }
                }
            }
        }
    }

}

下面是我的一些MapKit Functions

代码语言:javascript
复制
extension FeedsViewController: MKMapViewDelegate {

    //   1
      func mapView(_ mapView: MKMapView, viewFor annotation: MKAnnotation) -> MKAnnotationView? {
        guard let annotation = annotation as? UserAnnotation else { return nil }
        // 2
        let identifier = "marker"
        if #available(iOS 11.0, *) {
            var view: ClusterView

            if let dequeuedView = mapView.dequeueReusableAnnotationView(withIdentifier: identifier)
                as? ClusterView { // 3
                dequeuedView.annotation = annotation
                view = dequeuedView
            } else {
                // 4
                view = ClusterView(annotation: annotation, reuseIdentifier: identifier)
            }
            return view
        } else {
            // Fallback on earlier versions

            return nil
        }

      }
    func mapView(_ mapView: MKMapView, regionDidChangeAnimated animated: Bool) {
//        let zoomWidth = mapView.visibleMapRect.size.width
//        let zoomFactor = Int(log2(zoomWidth))
//        print("...REGION DID CHANGE: ZOOM FACTOR \(zoomFactor)")
        let centralLocation = CLLocation(latitude: mapView.centerCoordinate.latitude, longitude:  mapView.centerCoordinate.longitude)

        Log(" Radius - \(self.getRadius(centralLocation: centralLocation))")


    }
    func getRadius(centralLocation: CLLocation) -> Double{
        let topCentralLat:Double = centralLocation.coordinate.latitude -  mapView.region.span.latitudeDelta/2
        let topCentralLocation = CLLocation(latitude: topCentralLat, longitude: centralLocation.coordinate.longitude)
        let radius = centralLocation.distance(from: topCentralLocation)
        return radius / 1000.0 // to convert radius to meters
    }
    func mapView(_ mapView: MKMapView,
                 didSelect view: MKAnnotationView)
    {
        // 1
        if view.annotation is MKUserLocation
        {
            // Don't proceed with custom callout
            return
        }
        // 2
        let annotation = view.annotation as! UserAnnotation

        let detailAnnotationView: UserDetailAnnotationView = UserDetailAnnotationView(frame: CGRect(x: 0, y: 0, width: 320, height: 74))

        let url = (annotation.discipline == "") ? nil : URL(string: annotation.discipline)!
        let range = 0.0..<0.9
        if annotation.userProfile.location.dist != nil {
            if range.contains(annotation.userProfile.location.dist) {
                let kMeters = Measurement(value: annotation.userProfile.location.dist, unit: UnitLength.kilometers)
                let meters = kMeters.converted(to: UnitLength.meters)
                detailAnnotationView.distancelbl.text = "\(String(describing: round(Double(meters.value)))) m Away"

            } else {
                detailAnnotationView.distancelbl.text = "\(String(describing: round(annotation.userProfile.location.dist))) Km Away"
            }
        }

        detailAnnotationView.set(Title: annotation.title!, imageUrl: url) { [weak self] (sender) in
            guard let self = self else { return }
            if self.isOpenChat {

                self.isOpenChat = false

                if annotation.userProfile.channel != "" {

                    self.appDelegate.pubNubAddPushNotifications([annotation.userProfile.channel]) { (status) in

                        print(status.description)
                    }

                    let chatViewController: ChatViewController = self.storyboard?.instantiateViewController(withIdentifier: "ChatViewController") as! ChatViewController

                    chatViewController.userProfile = annotation.userProfile
                    chatViewController.loginUserProfile = self.loginUserProfile
                    self.navigationController?.pushViewController(chatViewController, animated: true)
                }
            }

        }

        detailAnnotationView.center = CGPoint(x: view.bounds.size.width / 2, y: -detailAnnotationView.bounds.size.height*0.52)

        view.addSubview(detailAnnotationView)

        mapView.setCenter((view.annotation?.coordinate)!, animated: true)

//        let calloutView = views?[0] as! CustomCalloutView
//        calloutView.starbucksName.text = starbucksAnnotation.name
//        calloutView.starbucksAddress.text = starbucksAnnotation.address
//        calloutView.starbucksPhone.text = starbucksAnnotation.phone
//        calloutView.starbucksImage.image = starbucksAnnotation.image
//        let button = UIButton(frame: calloutView.starbucksPhone.frame)
//        button.addTarget(self, action: #selector(ViewController.callPhoneNumber(sender:)), for: .touchUpInside)
//        calloutView.addSubview(button)
//        // 3
//        calloutView.center = CGPoint(x: view.bounds.size.width / 2, y: -calloutView.bounds.size.height*0.52)
//        view.addSubview(calloutView)
//        mapView.setCenter((view.annotation?.coordinate)!, animated: true)
    }

    func mapView(_ mapView: MKMapView, didDeselect view: MKAnnotationView) {
        if #available(iOS 11.0, *) {
            if view.isKind(of: ClusterView.self)
            {
                for subview in view.subviews
                {
                    subview.removeFromSuperview()
                }
            }
        } else {
            // Fallback on earlier versions
        }
    }

    func mapView(_ mapView: MKMapView, annotationView view: MKAnnotationView,
                 calloutAccessoryControlTapped control: UIControl) {
//        let location = view.annotation as! UserAnnotation
//        let launchOptions = [MKLaunchOptionsDirectionsModeKey:
//            MKLaunchOptionsDirectionsModeDriving]
//        location.mapItem().openInMaps(launchOptions: launchOptions)
    }
}

这就是我设置mapView的方式...

代码语言:javascript
复制
fileprivate func setupMapsLayout() {

    if self.userAnnotationList.count > 0 {
    // HereMap
        self.mapView.removeAnnotations(self.userAnnotationList)
    }

    self.mapView.delegate = self
    //    mapView.register(ArtworkMarkerView.self, forAnnotationViewWithReuseIdentifier: MKMapViewDefaultAnnotationViewReuseIdentifier)
    if #available(iOS 11.0, *) {
        // HereMap
        //self.mapView.register(UserAnnotationView.self, forAnnotationViewWithReuseIdentifier: MKMapViewDefaultAnnotationViewReuseIdentifier)
        mapView.register(ClusterView.self, forAnnotationViewWithReuseIdentifier: MKMapViewDefaultClusterAnnotationViewReuseIdentifier)
    } else {
        // Fallback on earlier versions
    }

    self.loadInitialData()

    self.mapView.addAnnotations(self.userAnnotationList)
    //self.mapView.topCenterCoordinate()
}
EN

回答 1

Stack Overflow用户

回答已采纳

发布于 2019-05-27 07:57:34

好的,iOS 11和更高版本的解决方案非常简单。您有两个注释视图,一个用于您自己的注释,另一个用于注释簇。您的主注释视图只需在初始化和annotation属性更改时指定clusteringIdentifier

代码语言:javascript
复制
class UserAnnotationView: MKMarkerAnnotationView {
    static let preferredClusteringIdentifier = Bundle.main.bundleIdentifier! + ".UserAnnotationView"

    override init(annotation: MKAnnotation?, reuseIdentifier: String?) {
        super.init(annotation: annotation, reuseIdentifier: reuseIdentifier)
        clusteringIdentifier = UserAnnotationView.preferredClusteringIdentifier
        collisionMode = .circle
    }

    required init?(coder aDecoder: NSCoder) {
        fatalError("init(coder:) has not been implemented")
    }

    override var annotation: MKAnnotation? {
        willSet {
            clusteringIdentifier = UserAnnotationView.preferredClusteringIdentifier
        }
    }
}

annotation属性更新时,集群注释视图应该只更新它的图像:

代码语言:javascript
复制
class UserClusterAnnotationView: MKAnnotationView {
    static let preferredClusteringIdentifier = Bundle.main.bundleIdentifier! + ".UserClusterAnnotationView"

    override init(annotation: MKAnnotation?, reuseIdentifier: String?) {
        super.init(annotation: annotation, reuseIdentifier: reuseIdentifier)
        collisionMode = .circle
        updateImage()
    }

    required init?(coder aDecoder: NSCoder) {
        fatalError("init(coder:) has not been implemented")
    }

    override var annotation: MKAnnotation? { didSet { updateImage() } }

    private func updateImage() {
        if let clusterAnnotation = annotation as? MKClusterAnnotation {
            self.image = image(count: clusterAnnotation.memberAnnotations.count)
        } else {
            self.image = image(count: 1)
        }
    }

    func image(count: Int) -> UIImage {
        let bounds = CGRect(origin: .zero, size: CGSize(width: 40, height: 40))

        let renderer = UIGraphicsImageRenderer(bounds: bounds)
        return renderer.image { _ in
            // Fill full circle with tricycle color
            AppTheme.blueColor.setFill()
            UIBezierPath(ovalIn: bounds).fill()

            // Fill inner circle with white color
            UIColor.white.setFill()
            UIBezierPath(ovalIn: bounds.insetBy(dx: 8, dy: 8)).fill()

            // Finally draw count text vertically and horizontally centered
            let attributes: [NSAttributedString.Key: Any] = [
                .foregroundColor: UIColor.black,
                .font: UIFont.boldSystemFont(ofSize: 20)
            ]

            let text = "\(count)"
            let size = text.size(withAttributes: attributes)
            let origin = CGPoint(x: bounds.midX - size.width / 2, y: bounds.midY - size.height / 2)
            let rect = CGRect(origin: origin, size: size)
            text.draw(in: rect, withAttributes: attributes)
        }
    }
}

然后,您所要做的就是注册您的类:

代码语言:javascript
复制
mapView.register(UserAnnotationView.self, forAnnotationViewWithReuseIdentifier: MKMapViewDefaultAnnotationViewReuseIdentifier)
mapView.register(UserClusterAnnotationView.self, forAnnotationViewWithReuseIdentifier: MKMapViewDefaultClusterAnnotationViewReuseIdentifier)

不需要(也不需要)任何mapView(_:viewFor:)实现。但上面的结果(在缩小和放大时显示默认动画):

现在,很明显,您可以随心所欲地修改UserAnnotationView。(您的问题没有指出标准的单用户注释视图是什么样子)。但是通过设置它的clusteringIdentifier并注册一个MKMapViewDefaultClusterAnnotationViewReuseIdentifier,你可以很容易地在iOS 11和更高版本中实现集群。

如果您真的想让集群注释视图看起来像标准注释视图,您可以为两者注册相同的注释视图类:

代码语言:javascript
复制
mapView.register(UserClusterAnnotationView.self, forAnnotationViewWithReuseIdentifier: MKMapViewDefaultAnnotationViewReuseIdentifier)
mapView.register(UserClusterAnnotationView.self, forAnnotationViewWithReuseIdentifier: MKMapViewDefaultClusterAnnotationViewReuseIdentifier)

但是,您必须为集群注释视图提供与我们之前为标准注释视图提供的相同的clusteringIdentifier:

代码语言:javascript
复制
class UserClusterAnnotationView: MKAnnotationView {
    static let preferredClusteringIdentifier = Bundle.main.bundleIdentifier! + ".UserClusterAnnotationView"

    override init(annotation: MKAnnotation?, reuseIdentifier: String?) {
        super.init(annotation: annotation, reuseIdentifier: reuseIdentifier)
        clusteringIdentifier = UserClusterAnnotationView.preferredClusteringIdentifier
        collisionMode = .circle
        updateImage()
    }

    required init?(coder aDecoder: NSCoder) {
        fatalError("init(coder:) has not been implemented")
    }

    override var annotation: MKAnnotation? {
        didSet {
            clusteringIdentifier = UserClusterAnnotationView.preferredClusteringIdentifier
            updateImage()
        }
    }

    private func updateImage() {
        if let clusterAnnotation = annotation as? MKClusterAnnotation {
            self.image = image(count: clusterAnnotation.memberAnnotations.count)
        } else {
            self.image = image(count: 1)
        }
    }

    func image(count: Int) -> UIImage {
        let bounds = CGRect(origin: .zero, size: CGSize(width: 40, height: 40))

        let renderer = UIGraphicsImageRenderer(bounds: bounds)
        return renderer.image { _ in
            // Fill full circle with tricycle color
            AppTheme.blueColor.setFill()
            UIBezierPath(ovalIn: bounds).fill()

            // Fill inner circle with white color
            UIColor.white.setFill()
            UIBezierPath(ovalIn: bounds.insetBy(dx: 8, dy: 8)).fill()

            // Finally draw count text vertically and horizontally centered
            let attributes: [NSAttributedString.Key: Any] = [
                .foregroundColor: UIColor.black,
                .font: UIFont.boldSystemFont(ofSize: 20)
            ]

            let text = "\(count)"
            let size = text.size(withAttributes: attributes)
            let origin = CGPoint(x: bounds.midX - size.width / 2, y: bounds.midY - size.height / 2)
            let rect = CGRect(origin: origin, size: size)
            text.draw(in: rect, withAttributes: attributes)
        }
    }
}

这就产生了:

就我个人而言,我认为这有点令人困惑,但如果这就是你要做的,那就是实现它的一种方法。

现在,如果你真的需要支持11之前的iOS版本,并且你想要集群,那么你必须自己做所有这些集群逻辑(或者找第三方库来做)。苹果在WWDC2011 Visualizing Information Geographically with MapKit中展示了如何做到这一点。他们采用的概念是将可见地图划分为网格,如果在特定网格中有多个注释,则删除它们并添加单个“集群”注释。它们还演示了如何以可视动画方式将注释移入和移出集群,这样用户就可以在放大和缩小时了解发生了什么。这是一个很好的起点,因为您深入了解了这一点。

这不是微不足道的,所以我会花很长时间和努力来考虑我是否想要自己实现它。我要么放弃11之前的iOS版本,要么寻找第三方实现( question you reference有很多示例)。

票数 11
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/56311852

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档