Swift中MKPolylineRenderer线条重叠融合问题的解决方法

从你提供的「路线融合问题」图片来看，不同颜色的MKPolyline在交叉处出现颜色叠加融合，无法清晰区分线路，以下是针对渲染器的具体解决方案：

1. 修复自定义渲染器的绘制逻辑 #

你的自定义RouteRenderer没有正确复用MKPolylineRenderer的lineWidth属性，且未设置合适的混合模式，导致线条绘制时颜色叠加。修改代码如下：

final class RouteRenderer: MKPolylineRenderer {
    override func strokePath(_ path: CGPath, in context: CGContext) {
        guard let routeLine = self.overlay as? RouteLine, let color = routeLine.color else {
            super.strokePath(path, in: context)
            return
        }
        
        context.saveGState()
        
        // 使用渲染器已设置的线条宽度
        context.setLineWidth(self.lineWidth)
        // 设置正常混合模式，避免颜色叠加
        context.setBlendMode(.normal)
        context.setStrokeColor(color.cgColor)
        
        context.addPath(path)
        context.strokePath()
        
        context.restoreGState()
    }
}

2. 给线条添加描边外层增强区分度 #

如果单靠调整混合模式仍无法解决，可给每条线路添加一层更粗的深色描边，让交叉处的线条边界更清晰：

final class RouteRenderer: MKPolylineRenderer {
    override func strokePath(_ path: CGPath, in context: CGContext) {
        guard let routeLine = self.overlay as? RouteLine, let color = routeLine.color else {
            super.strokePath(path, in: context)
            return
        }
        
        context.saveGState()
        
        // 先绘制粗的深色描边
        context.setStrokeColor(UIColor.black.cgColor)
        context.setLineWidth(self.lineWidth + 2) // 比主线条宽2pt
        context.addPath(path)
        context.strokePath()
        
        // 再绘制主线条
        context.setStrokeColor(color.cgColor)
        context.setLineWidth(self.lineWidth)
        context.setBlendMode(.normal)
        context.addPath(path)
        context.strokePath()
        
        context.restoreGState()
    }
}

3. 确保每条线路是独立Overlay #

检查RouteLine类是否正确继承自MKPolyline，且每条线路都作为独立实例添加到地图：

// 确保RouteLine正确继承
class RouteLine: MKPolyline {
    var color: UIColor?
    // 其他自定义属性
}

// 添加线路时使用独立实例
let route1 = RouteLine(coordinates: coords1, count: coords1.count)
route1.color = .red
mapView.addOverlay(route1)

let route2 = RouteLine(coordinates: coords2, count: coords2.count)
route2.color = .blue
mapView.addOverlay(route2)

4. 调整Overlay渲染顺序 #

如果部分线条被覆盖导致融合，可通过以下方法调整渲染顺序，让需要突出的线路显示在顶层：

• mapView.insertOverlay(_:above:)：将指定Overlay插入到另一个Overlay上方
• mapView.insertOverlay(_:below:)：将指定Overlay插入到另一个Overlay下方

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