iOS 17 SwiftUI MapKit MapCircle叠加时透明度异常问题

问题核心是两个独立的MapCircle各自设置透明度后，叠加区域会因为两层半透明图层重叠，导致颜色更深、透明度降低。要实现所有区域（包括叠加部分）透明度一致，需要把多个圆合并成一个整体进行渲染，而不是分开绘制。

下面是基于iOS 17 SwiftUI Map原生API的解决方案：

1. 定义自定义多圆叠加层 #

创建一个继承自MKOverlay的类，用来存储所有需要绘制的圆的圆心和半径：

import MapKit

class MultipleCirclesOverlay: NSObject, MKOverlay {
    let coordinate: CLLocationCoordinate2D
    let boundingMapRect: MKMapRect
    let circles: [(center: CLLocationCoordinate2D, radius: CLLocationDistance)]
    
    init(circles: [(center: CLLocationCoordinate2D, radius: CLLocationDistance)]) {
        self.circles = circles
        // 计算所有圆的包围范围
        let mapRects = circles.map { circle in
            MKMapRect(center: MKMapPoint(circle.center), radius: circle.radius)
        }
        self.boundingMapRect = mapRects.reduce(mapRects[0]) { $0.union($1) }
        self.coordinate = boundingMapRect.center.coordinate
        super.init()
    }
}

2. 自定义渲染器 #

创建MKOverlayRenderer子类，统一绘制所有圆并设置整体透明度：

class MultipleCirclesRenderer: MKOverlayRenderer {
    override func draw(_ mapRect: MKMapRect, zoomScale: MKZoomScale, in context: CGContext) {
        guard let overlay = overlay as? MultipleCirclesOverlay else { return }
        
        // 设置填充色和全局透明度
        context.setFillColor(UIColor.blue.cgColor)
        context.setAlpha(0.3)
        
        // 把所有圆的路径添加到上下文
        for circle in overlay.circles {
            let mapPoint = MKMapPoint(circle.center)
            let scaledRadius = circle.radius / zoomScale
            let circleRect = CGRect(
                x: mapPoint.x - scaledRadius,
                y: mapPoint.y - scaledRadius,
                width: scaledRadius * 2,
                height: scaledRadius * 2
            )
            let circlePath = CGPath(ellipseIn: circleRect, transform: nil)
            context.addPath(circlePath)
        }
        
        // 统一填充所有路径，叠加区域不会重复填充，透明度保持一致
        context.fillPath(using: .evenOdd)
    }
}

3. 在SwiftUI Map中使用 #

通过MapOverlay把自定义叠加层添加到Map中：

import SwiftUI
import MapKit

struct ContentView: View {
    // 示例坐标和半径
    let circle1Center = CLLocationCoordinate2D(latitude: 37.334722, longitude: -122.008889)
    let circle2Center = CLLocationCoordinate2D(latitude: 37.336111, longitude: -122.007778)
    let circleRadius: CLLocationDistance = 100 // 100米
    
    var body: some View {
        Map {
            MapOverlay(MultipleCirclesOverlay(circles: [
                (center: circle1Center, radius: circleRadius),
                (center: circle2Center, radius: circleRadius)
            ])) { overlay in
                MultipleCirclesRenderer(overlay: overlay)
            }
        }
    }
}

方案说明 #

• 利用iOS 17 SwiftUI Map提供的MapOverlay原生接口，完全适配新版本API，无需依赖旧的MKMapView
• 所有圆在同一个渲染流程中绘制，通过统一填充路径的方式，避免叠加区域重复计算透明度
• 可以轻松扩展，添加更多圆或者修改填充色、透明度等样式

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