如何在SwiftUI中绘制虚线样式的MapPolyline？

SwiftUI中MapPolyLine的默认.stroke修饰器并不支持虚线参数，要实现虚线效果，你需要通过自定义MKOverlayRenderer来完成，以下是修改后的完整代码：

import SwiftUI
import MapKit

struct ContentView: View {
    let routes = Routes()

    var body: some View {
        VStack {
            Map() {
                ForEach(routes, id: \.id) { route in
                    MapPolyline(coordinates: route.segment,
                                contourStyle: MapPolyline.ContourStyle.straight)
                    .overlayRenderer { overlay in
                        DashedPolylineRenderer(overlay: overlay,
                                              tint: route.tint,
                                              lineWidth: route.lineWidth,
                                              dashPattern: route.dash)
                    }
                }
            }
        }
    }
}

// 自定义虚线渲染器
class DashedPolylineRenderer: MKPolylineRenderer {
    init(overlay: MKOverlay, tint: Color, lineWidth: CGFloat, dashPattern: [CGFloat]) {
        super.init(overlay: overlay)
        self.strokeColor = UIColor(tint)
        self.lineWidth = lineWidth
        // 设置虚线样式，数组元素依次代表实线长度、空白长度
        self.lineDashPattern = dashPattern.map { NSNumber(value: $0) }
    }
}

struct Route: Identifiable {
    let id: String = UUID().uuidString
    var segment: [CLLocationCoordinate2D]
    var tint: Color
    var lineWidth: CGFloat
    var dash: [CGFloat]
}

func Routes() -> [Route] {
    var segments: [Route] = []
    
    let routeOne: Route = Route(segment: [
        CLLocationCoordinate2D(latitude: 48.10589, longitude: -122.77899),
        CLLocationCoordinate2D(latitude: 48.0995, longitude: -122.81254),
        CLLocationCoordinate2D(latitude: 48.09196, longitude: -122.81565),
        CLLocationCoordinate2D(latitude: 48.0873599, longitude: -122.84327),
        CLLocationCoordinate2D(latitude: 48.052428, longitude: -122.829886)],
                                tint: Color(.green), lineWidth: 8, dash: [] )
    segments.append(routeOne)
    
    let routeTwo = Route(segment: [
        CLLocationCoordinate2D(latitude: 48.02569, longitude: -123.01255),
        CLLocationCoordinate2D(latitude: 48.040381, longitude: -123.02743),
        CLLocationCoordinate2D(latitude: 48.05617, longitude: -123.04887),
        CLLocationCoordinate2D(latitude: 48.07843, longitude: -123.08072)],
        tint: Color(.red), lineWidth: 8, dash: [8,8] )
    segments.append(routeTwo)
    
    return segments
}

关键说明： #

• 替换原有的.stroke修饰器为.overlayRenderer，通过闭包返回自定义的DashedPolylineRenderer实例
• 自定义渲染器继承自MKPolylineRenderer，在初始化时设置lineDashPattern属性，该属性接收[NSNumber]类型的数组，数组中的元素分别定义虚线的实线段长度和空白段长度（比如[8,8]代表8pt实线+8pt空白的循环）
• 原Route结构体中的dash参数直接传递给渲染器，保持数据结构的一致性

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