如何在Mapbox iOS的已绘制路线上方添加标注图片？

我来给你一步步拆解怎么在已绘制的Mapbox路线上方添加自定义标注图片，核心思路是利用Mapbox的标注系统，把自定义图片标注绑定到路线的目标坐标点，同时确保标注图层层级高于路线图层。

步骤1：定义自定义标注类 #

首先我们需要一个自定义的标注类，用来存储标注的位置和相关信息，方便后续绑定视图：

import Mapbox

class CustomRouteAnnotation: MGLPointAnnotation {
    // 可以在这里添加自定义属性，比如标注类型、关联的路线节点信息等
    var annotationType: String?
}

步骤2：实现地图代理的标注视图方法 #

接下来要让地图视图的代理返回我们自定义的图片标注视图，这里可以指定要显示的图片，同时设置zIndex确保标注显示在路线上方：

extension YourMapViewController: MGLMapViewDelegate {
    func mapView(_ mapView: MGLMapView, viewFor annotation: MGLAnnotation) -> MGLAnnotationView? {
        // 过滤掉用户位置标注，只处理我们自定义的路线标注
        guard annotation is CustomRouteAnnotation else {
            return nil
        }
        
        let reuseIdentifier = "RouteAnnotationView"
        // 尝试从复用池获取视图
        var annotationView = mapView.dequeueReusableAnnotationView(withIdentifier: reuseIdentifier) as? MGLAnnotationView
        
        if annotationView == nil {
            annotationView = MGLAnnotationView(annotation: annotation, reuseIdentifier: reuseIdentifier)
            // 设置自定义标注图片，替换成你的图片名称
            annotationView?.image = UIImage(named: "your-annotation-image")
            // 设置标注的偏移，让图片中心对准坐标点（根据你的图片尺寸调整）
            annotationView?.centerOffset = CGVector(dx: 0, dy: -20)
            // 设置zIndex，确保比路线图层层级高（路线图层默认zIndex较低，这里设为100即可）
            annotationView?.zIndex = 100
        } else {
            annotationView?.annotation = annotation
        }
        
        return annotationView
    }
}

步骤3：在路线计算完成后添加标注 #

结合你提供的calculateRoute方法，我们可以在路线计算完成的回调里，获取路线的目标坐标点（比如途经点、路线的关键节点），创建自定义标注并添加到地图上：

func calculateRoute(waypoints: [Waypoint], completion: @escaping (Route?, Error?) -> ()) { 
    let startPoint = Waypoint(coordinate: currentLocation, coordinateAccuracy: -1, name: "Origin") 
    var waypointsWithStart = [startPoint] + waypoints
    
    // 调用Mapbox的Directions API计算路线
    let directions = Directions.shared
    let options = RouteOptions(waypoints: waypointsWithStart, profileIdentifier: .automobileAvoidingTraffic)
    options.includesSteps = true // 开启步骤信息，方便获取转弯等节点
    
    let task = directions.calculate(options) { [weak self] (session, result) in
        guard let self = self else { return }
        switch result {
        case .success(let response):
            guard let route = response.routes.first else {
                completion(nil, NSError(domain: "RouteError", code: -1, userInfo: [NSLocalizedDescriptionKey: "No route found"]))
                return
            }
            
            // 先把路线添加到地图上（这部分你应该已经有实现，示例用MGLPolyline）
            let routeLine = MGLPolyline(coordinates: route.coordinates, count: route.coordinateCount)
            self.mapView.addAnnotation(routeLine)
            
            // 示例1：给每个途经点添加标注
            for waypoint in waypointsWithStart {
                let annotation = CustomRouteAnnotation()
                annotation.coordinate = waypoint.coordinate
                annotation.title = waypoint.name
                self.mapView.addAnnotation(annotation)
            }
            
            // 示例2：给路线的每个转弯步骤添加标注（如果需要的话）
            for leg in route.legs {
                for step in leg.steps {
                    // 获取步骤的终点坐标（转弯点）
                    let stepEndCoordinate = step.maneuverLocation.coordinate
                    let annotation = CustomRouteAnnotation()
                    annotation.coordinate = stepEndCoordinate
                    annotation.annotationType = "turn"
                    self.mapView.addAnnotation(annotation)
                }
            }
            
            completion(route, nil)
        case .failure(let error):
            completion(nil, error)
        }
    }
}

额外注意事项 #

• 确保你的地图视图已经设置了delegate = self，否则标注视图的代理方法不会被调用
• 如果你的路线是用MGLRoutePolyline或者自定义图层绘制的，要确认标注的zIndex确实高于路线图层的层级
• 自定义图片要确保在Assets里存在，并且尺寸合适，避免标注过大或过小

内容的提问来源于stack exchange，提问作者Srikanth Srinivas