地图视图上的 SwiftUI 渐变折线

Question

根据此 WWDC 视频渐变折线应该在 SwiftUI 地图视图中可用。

https://developer.apple.com/videos/play/wwdc2023/10043/?time=1360

let coordinates = [
        CLLocationCoordinate2D(latitude: 37.7749, longitude: -122.4194),
        CLLocationCoordinate2D(latitude: 37.3352, longitude: -122.0322),
        CLLocationCoordinate2D(latitude: 34.0522, longitude: -118.2437)
    ]

    let gradient = LinearGradient(colors: [.red, .green, .blue], startPoint: .leading, endPoint: .trailing)

    let stroke = StrokeStyle(lineWidth: 5, lineCap: .round, lineJoin: .round, dash: [10, 10])

    var body: some View {
        Map {
            MapPolyline(coordinates: coordinates)
                .stroke(gradient, style: stroke)
            
        }
    }

似乎使用给定渐变颜色中的第一种颜色来渲染整个折线。这是一个错误/是否有其他方法可以实现此目的？

Answer 1

他们暂时没有Api，但是我们可以自己创建，我写了一个例子，希望可以帮助你。

解决方案路径： https://github.com/OAK-WJR/SwiftUI-ProblemSolutions.git

想法： 创建自定义

UIViewRepresentable

将

MKMapView

嵌入到 SwiftUI 视图中，并使用自定义

MKOverlay

和

MKOverlayRenderer

实现渐变效果

1：创建渐变多边形叠加

2：创建渐变多边形渲染器

3：在 SwiftUI 中嵌入 MKMapView

结果显示：