카메라와 뷰

지도의 카메라를 변경하여 사용자가 바라보는 뷰 시점의 지도를 자유롭게 움직일 수 있는 기능을 설명합니다. 카메라 이동, 줌 레벨 변경, 기울기 조정, 화면 회전 등이 가능합니다.

Previous사용자 위치 확인 Next지도 위에 그리기

Last updated 5 years ago

Was this helpful?

카메라와 뷰

카메라의 위치

은 카메라의 위치를 나타내는 클래스입니다. 카메라의 위치는 카메라가 놓여 있는 대상 지점의 좌표와 줌 레벨, 기울기 각도, 베어링 각도로 구성됩니다.

대상 지점

현재 지도가 표출되고 있는 지점을 의미합니다. 속성으로 대상 지점을 설정할 수 있습니다.

줌 레벨

현재 지도의 축척을 의미합니다. 속성으로 줌 레벨을 설정할 수 있습니다. 줌 레벨이 작을수록 화면에 보이는 지역이 넓어집니다. 반대로 줌 레벨이 클수록 지도에 상세한 정보가 표출됩니다.

기울기 각도

카메라가 위에서 지도를 바라보는 수직적 각도를 의미합니다. 속성으로 기울기 각도를 설정할 수 있습니다. 기울기 각도가 0일 때 카메라는 지도를 수직으로 내려다보며, 값이 증가할수록 카메라의 시점이 수평에 가까워집니다. 기울기 각도가 클수록 더 먼 지점을 볼 수 있고, 지도에 원근감 효과가 크게 적용됩니다.

베어링 각도

카메라가 지도를 바라보는 수평적 각도, 즉 방향을 의미합니다. 속성으로 베어링 각도를 설정할 수 있습니다. 베어링 각도가 0일 때 지도는 정북 방향을 바라보며, 값이 증가할 수록 시계 방향으로 회전합니다. 값이 360이 되면 지도는 다시 정북 방향을 바라보게 됩니다.

CameraPosition 객체

의 모든 속성은 final이므로 생성자로만 설정할 수 있으며, 한 번 생성된 객체의 속성은 변경할 수 없습니다.

// CameraPosition 객체 생성
val cameraPosition = CameraPosition(
        LatLng(36.99473, 127.81832), // 대상 지점
        16.0, // 줌 레벨
        20.0, // 기울기 각도
        180.0 // 베어링 각도
)

// CameraPosition 정보 토스트 메시지로 표출
Toast.makeText(context,
        "대상 지점: (${cameraPosition.target.latitude}, " +
        "${cameraPosition.target.longitude}), " +
        "줌 레벨: ${cameraPosition.zoom}, " +
        "기울임 각도: ${cameraPosition.tilt}, " +
        "베어링 각도: ${cameraPosition.bearing}",
        Toast.LENGTH_SHORT).show()

// 대상 지점, 줌 레벨을 지정하여 CameraPosition 객체 생성
// 기울기 각도와 베어링 각도는 0으로 설정된다.
val cameraPosition = CameraPosition(LatLng(36.99473, 127.81832), 16.0)

뷰와 카메라

카메라는 기본적으로 지도 뷰의 중심에 위치합니다. 그러나 패딩이 설정되면 카메라의 위치에 영향을 미칩니다.

카메라의 현재 위치

// 카메라의 위치 설정
inaviMap.cameraPosition = cameraPosition

// 카메라의 위치 가져오기
val myCameraPosition = inaviMap.cameraPosition

패딩

앱에서 사용하는 UI 요소에 가려진 지도의 영역을 패딩으로 설정할 수 있습니다. 패딩을 설정하면 카메라는 패딩을 제외한 영역의 중심에 위치하게 됩니다. 패딩을 변경하면 지도의 중심이 변경되므로 카메라의 위치도 변경됩니다.

// 하단 패딩을 200px로 설정
inaviMap.setPadding(0, 0, 0, 200)

투영

val projection = inaviMap.projection // Projection 인스턴스 가져오기

화면 좌표와 지도 좌표 간 변환

구분

함수명

화면상의 좌표 → 지도상의 좌표

지도상의 좌표 → 화면상의 좌표

// 화면상 (100, 100) 지점의 좌표를 지도상의 좌표로 변환
val mapCoords = projection.getLatLngFromPoint(PointF(100f, 100f))

// 지도상 (37.40219, 127.11077) 지점의 좌표를 화면상의 좌표로 변환
val screenCoords = projection.getPointFromLatLng(LatLng(37.40219, 127.11077))

축척

// 현재 카메라의 축척을 미터/픽셀 단위로 가져오기
val metersPerPixel = projection.metersPerPixel

// 현재 카메라의 축척을 미터/DP 단위 단위로 가져오기
val metersPerDp = projection.metersPerDp

// 적도, 줌 레벨 10
val metersPerPixel1 = projection.getMetersPerPixel(0.0, 10.0)

// 위도 35도, 줌 레벨 10: 적도보다 축척이 커짐
val metersPerPixel2 = projection.getMetersPerPixel(35.0, 10.0)

// 위도 35도, 줌 레벨 15: 줌 레벨 10보다 축척이 커짐
val metersPerPixel3 = projection.getMetersPerPixel(35.0, 15.0)

// 적도, 줌 레벨 10, 미터/DP 단위
val metersPerDp1 = projection.getMetersPerDp(0.0, 10.0)

카메라 이동

// 대상 지점을 (36.99473, 127.81832)로 설정하여 카메라 이동
val cameraUpdate = CameraUpdate.targetTo(LatLng(36.99473, 127.81832))
inaviMap.moveCamera(cameraUpdate)

애니메이션

// 카메라 이동에 Fly 애니메이션 적용
cameraUpdate.animationType = CameraAnimationType.Fly

// 카메라 애니메이션 소요시간을 5초로 설정
cameraUpdate.durationMs = 5000

애니메이션 취소

val POSITION1 = LatLng(36.99473, 127.81832)
val POSITION2 = LatLng(37.40219, 127.11077)

// 5초간 카메라 애니메이션
inaviMap.moveCamera(CameraUpdate.targetTo(POSITION1)
    .setAnimationType(CameraAnimationType.Easing, 5000))

// 3초 후 새로운 카메라 이동이 시작되면서 기존 카메라 애니메이션이 취소됨
Handler().postDelayed({
    inaviMap.moveCamera(CameraUpdate.targetTo(POSITION2)
        .setAnimationType(CameraAnimationType.Fly, 3000))
}, 3000)

// 5초간 카메라 애니메이션
inaviMap.moveCamera(CameraUpdate.targetTo(LatLng(36.99473, 127.81832))
    .setAnimationType(CameraAnimationType.Easing, 5000))

// 3초 후 cancelTransitions()가 호출되어 기존 카메라 애니메이션이 취소됨
Handler().postDelayed({
    inaviMap.cancelTransitions()
}, 3000)

콜백과 이벤트

카메라 이동 콜백

val cameraUpdate = CameraUpdate.targetTo(LatLng(36.99473, 127.81832))
    .setAnimationType(CameraAnimationType.Fly, 5000)
    .durationMs = 5000
    .setFinishCallback {
        Toast.makeText(context, "카메라 이동 완료", Toast.LENGTH_SHORT).show()
    }
    .setCancelCallback {
        Toast.makeText(context, "카메라 이동 취소", Toast.LENGTH_SHORT).show()
    }

inaviMap.moveCamera(cameraUpdate)

카메라 변경 이벤트

// 카메라 변경 발생 시 이벤트 처리
inaviMap.addOnCameraChangeListener { reason -> 
    Toast.makeText(context, "카메라 변경 / reason : $reason", 
        Toast.LENGTH_SHORT).show()
}

// reason을 임의의 값으로 설정하여 CameraUpdate 객체 생성
val cameraUpdate = CameraUpdate.targetTo(LatLng(36.99473, 127.81832))
    .setAnimationType(CameraAnimationType.Fly, 5000)
    .setReason(1000)

inaviMap.moveCamera(cameraUpdate)

Previous사용자 위치 확인 Next지도 위에 그리기

Last updated 5 years ago

Was this helpful?