MapKit中MKMarkerAnnotationView的彩色图像

时间:2018-01-04 10:05:41

标签: ios mapkit mkmapview mapkitannotation

我正在为iOS构建一个应用程序,允许用户存储基于位置的图像。 现在我想在iOS中使用最新的AnnotationViewMKMarkerAnnotationView),因为它提供了自动群集。

我的问题是,如果没有提供此类需要glyphTintColor,则将其设置为UIColor().red。 iOS正在使用此颜色为其整体图像着色。之后,图像只有这种颜色。 我尝试将glyphTintColor设置为nil,但这会导致图像变红。我也尝试将其设置为UIColor(red:1.00, green:1.00, blue:1.00, alpha:0.0)但之后图像消失了,您只能看到标记本身。

我希望标记以原始颜色显示图像而不是单一颜色。

任何人都可以帮我解决这个问题吗?

这是我的完整代码:

func mapView(_ mapView: MKMapView, viewFor annotation: MKAnnotation) -> MKAnnotationView? {
    if annotation is MKUserLocation {
        return nil
    }

    let identifier = "PinAnnotationIdentifier"

    var pinView = MKMarkerAnnotationView(annotation: annotation, reuseIdentifier: identifier)

    pinView?.annotation = annotation
    pinView?.clusteringIdentifier = "clusterId"
    pinView?.rightCalloutAccessoryView = UIButton(type: .detailDisclosure)


    pinView?.canShowCallout = false
    pinView?.glyphImage = UIImage(named: "image")


    return pinView
}

3 个答案:

答案 0 :(得分:0)

不幸的是,无法以原始颜色显示图像而不是单色。

this answer

  

将字形图像创建为模板图像,以便可以对其应用字形色调。

一个字形,也称为模板图像,是一个单色图像,具有透明度,抗锯齿效果,并且没有使用遮罩定义其形状的阴影。

答案 1 :(得分:0)

可以!您只需要稍微玩一些图层即可。 创建新的MKMarkerAnnotationView时,请创建UIImageView对象,并在最后一层上添加层(UIImageView)。

override var annotation: MKAnnotation? {
    willSet {

        if let cluster = newValue as? MKClusterAnnotation {
            markerTintColor = UIColor(named: "Green")
            glyphText = "\(cluster.memberAnnotations.count)"
        }

        /* Check does received value is a MapMarkerAnnotation.swift object */
        guard let mapMarkerAnnotation = newValue as? MapMarkerAnnotation else { return }

        /* Assign properties */
        markerTintColor = Application.defaultColor
        displayPriority = .required

        /* Assign image */
        if let user = mapMarkerAnnotation.userInfo as? User {
            ImageManager.get(from: user.mainPhoto) { (image) in

                let imageView = UIImageView(image: image)
                imageView.frame = CGRect(x: 2, y: 2, width: 24, height: 24)
                imageView.layer.cornerRadius = 24 / 2
                imageView.clipsToBounds = true
                self.layer.sublayers?[1].addSublayer(imageView.layer)

                /* Assign current image but with clear color tint. */
                self.glyphImage = image
                self.glyphTintColor = .clear
            }
        }
    }
}

添加图像层之后。在展开状态下添加图像层。

func mapView(_ mapView: MKMapView, didSelect view: MKAnnotationView) {

    /* Check does annotation is an **MapMarker.swift** object. */
    if let mapMarkerAnnotationView = view as? MapMarkerAnnotationView {
        if let user = mapMarkerAnnotationView.userInfo as? User {

            /* Assign image */
            ImageManager.get(from: user.mainPhoto) { (image) in

                let imageView = UIImageView(image: image)
                imageView.frame = CGRect(x: 2, y: 2, width: 52, height: 52)
                imageView.layer.cornerRadius = 52 / 2
                imageView.clipsToBounds = true

                /* Assign tag value */
                imageView.layer.setValue(1, forKey: "tag")

                /* check does image layer exist. */
                if mapMarkerAnnotationView.layer.sublayers?[3].sublayers?.filter({($0.value(forKey: "tag") as? Int) == 1}).count == 0 {
                    mapMarkerAnnotationView.layer.sublayers?[3].addSublayer(imageView.layer)
                }
            }
        }
    }

祝你好运!

答案 2 :(得分:0)

打电话时

pinView?.glyphImage = UIImage(named: "image")

pinView 次调用

glyphImage?.withRenderingMode(.alwaysTemplate)

这样可以轻松解决问题:只需覆盖 withRenderingMode

import UIKit

class OriginalUIImage: UIImage {

    convenience init?(named name: String) {
        guard let image = UIImage(named: name),
              nil != image.cgImage else {
                    return nil
        }
        self.init(cgImage: image.cgImage!)
    }

    override func withRenderingMode(_ renderingMode: UIImage.RenderingMode) -> UIImage {
        // both return statements work:
        return self
        // return super.withRenderingMode(.alwaysOriginal)
    }

}

现在你可以使用

pinView?.glyphImage = OriginalUIImage(named: "image")