iOS Dev:在MapBox中为用户注释使用自定义图像

时间:2018-09-26 05:50:00

标签: ios swift mapbox

我对IOS开发非常陌生,因此其中一些似乎很明显。我尝试将customize the user annotationmarking a place on the map with an image

的示例结合起来

我觉得我需要添加以下代码行,并以某种方式将此代码附加到第一个链接中描述的用户注释中,但是我不知道如何执行此操作。我猜我也可以将其中一些功能插入customUserLocationAnnotationView中,但是没有明显的迹象表明将其放置在该类中的位置。

func mapView(_ mapView: MGLMapView, imageFor annotation: MGLAnnotation) -> MGLAnnotationImage? {
var annotationImage = mapView.dequeueReusableAnnotationImage(withIdentifier: "pisa")

if annotationImage == nil {
          var image = UIImage(named: "pisavector")!
          image = image.withAlignmentRectInsets(UIEdgeInsets(top: 0, left: 0, bottom: image.size.height/2, right: 0))
          annotationImage = MGLAnnotationImage(image: image, reuseIdentifier: "pisa")
     }
     return annotationImage
}

func mapView(_ mapView: MGLMapView, annotationCanShowCallout annotation: MGLAnnotation) -> Bool {
     return true
}

编辑

我不只是想将图像放在这样的随机位置

enter image description here

我希望图像以用户注释为中心,当用户移动时,图像也会移动,就像下面的图像

enter image description here

作为旁注

我还收到错误“无法渲染和更新ViewController的自动自动布局状态(BYZ-38-tOr):代理崩溃了Main.storyboard”,但我认为这并不重要,因为我的程序仍然可以在模拟器上正常构建并运行。

2 个答案:

答案 0 :(得分:2)

override func viewDidLoad() {
    super.viewDidLoad()
    let mapView = MGLMapView(frame: view.bounds)
    mapView.autoresizingMask = [.flexibleWidth, .flexibleHeight]
    mapView.delegate = self

    mapView.userTrackingMode = .followWithHeading
    mapView.showsUserHeadingIndicator = true
    view.addSubview(mapView)
}  

func mapView(_ mapView: MGLMapView, viewFor annotation: MGLAnnotation) -> MGLAnnotationView? {
// Substitute our custom view for the user location annotation. This custom view is defined below.
    if annotation is MGLUserLocation && mapView.userLocation != nil {
        return CustomUserLocationAnnotationView()
    }
    return nil
}

// Create a subclass of MGLUserLocationAnnotationView.
class CustomUserLocationAnnotationView: MGLUserLocationAnnotationView {
    ...
}

看看这个例子:https://www.mapbox.com/ios-sdk/maps/examples/user-location-annotation/

CustomUserLocationAnnotationView中有一个名为setupLayers的方法。可变点是CALayer,因此您可以将UIImage添加到CALayer。如下更改私有函数setupLayers()中的代码:

dot = CALayer()
let myImage = UIImage(named: "star")?.cgImage
dot.contents = myImage
layer.addSublayer(dot)

答案 1 :(得分:0)

此代码对我有效(使用Mapbox iOS SDK 3.6.0 / Swift 4.2 / iOS 12.1)。使用的图像是24位PNG。将其保存为标称尺寸的2倍或4倍可以得到干净的,无锯齿的图像(我无法分辨两者之间的区别)。

sample

func mapView(_ mapView: MGLMapView, viewFor annotation: MGLAnnotation) -> MGLAnnotationView? {
        // Substitute our custom view for the user location annotation. This custom view is defined below.
        if annotation is MGLUserLocation  { // && mapView.userLocation != nil
            let reuseIdentifier = "userLocationView"

            // For better performance, always try to reuse existing annotations.
            var userLocAnnotationView = mapView.dequeueReusableAnnotationView(withIdentifier: reuseIdentifier)

            // If there’s no reusable annotation view available, initialize a new one.
            if userLocAnnotationView == nil {
                userLocAnnotationView =  CustomUserLocationAnnotationView(reuseIdentifier: reuseIdentifier)
            }

            return userLocAnnotationView
        }
        else if annotation is MGLAnnotationView{
            // return another kind of annotation
        }

        return nil
    }


    class CustomUserLocationAnnotationView: MGLUserLocationAnnotationView {
        let size: CGFloat = 36
        var dot: CALayer!

        // -update is a method inherited from MGLUserLocationAnnotationView. It updates the appearance of the user location annotation when needed. This can be called many times a second, so be careful to keep it lightweight.
        override func update() {
            if frame.isNull {
                frame = CGRect(x: 0, y: 0, width: size, height: size)
                return setNeedsLayout()
            }

            setupLayers()
        }

        private func setupLayers() {
            // This dot forms the base of the annotation.
            if dot == nil {
                dot = CALayer()
                dot.bounds = CGRect(x: 0, y: 0, width: size, height: size)

                let image = UIImage(named: "locationPip")?.cgImage

                dot.contents = image

                dot.contentsScale = UIScreen.main.scale
                layer.addSublayer(dot)
            }
        }
    }