mapkit polyline

지도위에 경로 표시 (Polyline)

목차

1. coordinates 변수 생성
2. Polyline Overlay 추가
3. 생성한 Polyline 커스텀

coordinates 변수 생성

• CLLocationCoordinate2D 타입으로 모인 좌표의 배열을 생성합니다.

    @State private var coordinates = [
        CLLocationCoordinate2D(latitude: 37.53958, longitude: 127.07435),
        CLLocationCoordinate2D(latitude: 37.54132, longitude: 127.07575),
        CLLocationCoordinate2D(latitude: 37.54233, longitude:  127.07631),
        CLLocationCoordinate2D(latitude: 37.54215, longitude: 127.07750),
        CLLocationCoordinate2D(latitude: 37.53936, longitude: 127.07687),
        CLLocationCoordinate2D(latitude: 37.53958, longitude: 127.07435)
    ]

Polyline Overlay 추가

• 만든 coordinates 변수를 사용하여 Polyline 을 만듭니다.

        let polyline = MKPolyline(coordinates: coordinates, count: coordinates.count)
        mapView.addOverlay(polyline)

생성한 Polyline 커스텀

        func mapView(_ mapView: MKMapView, rendererFor overlay: MKOverlay) -> MKOverlayRenderer {
            if let routePolyline = overlay as? MKPolyline {
                let renderer = MKPolylineRenderer(polyline: routePolyline)
                renderer.strokeColor = UIColor.orange
                renderer.lineWidth = 3
                renderer.alpha = 0.5
                return renderer
            }
            return MKOverlayRenderer()
        }

추가 : Polyline Animation

• 아래와 같이 currentStep 을 기준으로 polyline 을 형성 합니다.
• currentStep 을 부모뷰에서 순차적으로 올려줍니다.

    // 필요없는 부분은 생략했습니다.
    var currentStep: Int

    func makeUIView(context: Context) -> MKMapView {
        let polyline = MKPolyline(coordinates: coordinates, count: currentStep)
        mapView.addOverlay(polyline)
    }

    func updateUIView(_ view: MKMapView, context: Context) {        
        // 현재 스텝에 따라 새로운 선분을 추가하기 전에 이전 선분을 제거합니다.
        let overlays = view.overlays.filter { $0 is MKPolyline }
        view.removeOverlays(overlays)
        
        // 현재 스텝에 따라 새로운 선분을 추가합니다.
        let subCoordinates = Array(coordinates.prefix(upTo: currentStep))
        let currentSegment = MKPolyline(coordinates: subCoordinates, count: subCoordinates.count)
        view.addOverlay(currentSegment)
    }