MapKit多MKTileOverlay不同blendMode冲突问题求助

核心问题梳理 #

• 叠加不同blendMode的MKTileOverlay时，下层图层会被上层的混合模式强制覆盖（比如soft light图层上方叠加normal图层后，原soft light图层也会变成normal模式，缩放级别≥15时异常）
• 仅通过将图层分放在.aboveLabels和.aboveRoads层级能临时解决，但最多支持两种混合模式，无法满足更多需求
• 加入矢量图层（如MKPolygonRenderer）后，层级方案失效：栅格图层在.aboveRoads、矢量图层在.aboveLabels时，矢量无法正常绘制；若要保留normal混合模式的矢量图层，栅格图层只能被迫使用normal模式

可行解决方案 #

1. 自定义隔离式渲染器，独立控制混合模式 #

放弃依赖MapKit默认的层级混合模式共享机制，通过自定义MKOverlayRenderer子类，在绘制前后保存/恢复上下文状态，确保每个图层的混合模式仅作用于自身。

示例代码：

class IsolatedTileRenderer: MKTileOverlayRenderer {
    override func draw(_ mapRect: MKMapRect, zoomScale: MKZoomScale, in context: CGContext) {
        // 保存当前上下文状态，避免后续操作污染
        context.saveGState()
        // 应用当前图层的混合模式
        context.setBlendMode(self.blendMode)
        super.draw(mapRect, zoomScale: zoomScale, in: context)
        // 恢复上下文到之前的状态，不影响其他图层
        context.restoreGState()
    }
}

修改原有渲染器初始化逻辑，使用自定义类：

private func setupSoftlightRenderer() {
    let overlay = TileOverlay(urlTemplate: "http://localhost/softlight/{z}/{x}/{y}")
    overlay.type = .softLight
    overlay.canReplaceMapContent = false
    overlay.minimumZ = 9
    overlay.maximumZ = 20
    mapView.addOverlay(overlay, level: .aboveLabels)
    let renderer = IsolatedTileRenderer(tileOverlay: overlay)
    renderer.blendMode = .softLight
    softLightRenderer = renderer
}

private func setupNormalRenderer() {
    let overlay = TileOverlay(urlTemplate: "http://localhost/normal/{z}/{x}/{y}")
    overlay.type = .normal
    overlay.canReplaceMapContent = false
    overlay.minimumZ = 15
    overlay.maximumZ = 20
    mapView.addOverlay(overlay, level: .aboveLabels)
    let renderer = IsolatedTileRenderer(tileOverlay: overlay)
    renderer.blendMode = .normal
    normalRenderer = renderer
}

2. 矢量图层的兼容处理 #

对于MKPolygonRenderer这类矢量渲染器，同样通过自定义子类实现上下文隔离：

class IsolatedPolygonRenderer: MKPolygonRenderer {
    override func draw(_ mapRect: MKMapRect, zoomScale: MKZoomScale, in context: CGContext) {
        context.saveGState()
        context.setBlendMode(self.blendMode)
        super.draw(mapRect, zoomScale: zoomScale, in: context)
        context.restoreGState()
    }
}

在rendererFor overlay方法中返回该自定义渲染器：

func mapView(_ mapView: MKMapView, rendererFor overlay: MKOverlay) -> MKOverlayRenderer {
    if let tileOverlay = overlay as? TileOverlay {
        switch tileOverlay.type {
        case .softLight:
            return softLightRenderer
        case .normal:
            return normalRenderer
        }
    } else if let polygonOverlay = overlay as? MKPolygon {
        let renderer = IsolatedPolygonRenderer(polygon: polygonOverlay)
        renderer.blendMode = .normal
        renderer.fillColor = UIColor.red.withAlphaComponent(0.5)
        return renderer
    }
    print("Warning: using unhandled overlay renderer")
    return blankRenderer
}

3. 统一图层层级，避免冲突 #

将所有需要自定义混合模式的图层都放在同一个层级（比如.aboveLabels），通过自定义渲染器的上下文隔离机制，确保每个图层的混合模式独立生效，不会互相干扰。

关键原理 #

MapKit默认在同一层级内共享CGContext的混合模式设置，导致上层图层的混合模式会覆盖下层。通过CGContext.saveGState()和CGContext.restoreGState()，可以在每个图层绘制前后隔离上下文状态，保证每个图层的混合模式仅作用于自身。

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