이 페이지에는 양방향적이고 몰입도 높은 3D 환경을 만들 수 있는 지도 JavaScript의 포토리얼리스틱 3D 지도의 주요 기능에 관한 정보가 포함되어 있습니다. 다음 문서에서는 다음을 다룹니다.
- 원활한 상호작용을 위해 사용자 인터페이스 이벤트 처리
- 3D 공간을 탐색하기 위한 탐색 컨트롤을 포함합니다.
- 가이드 투어에 사전 설정된 카메라 경로를 활용합니다.
- 특정 영역에 초점을 유지하기 위해 카메라 제한을 적용합니다.
사용자 인터페이스 이벤트
이 섹션에서는 3D 지도를 사용할 때 프로그래매틱 방식으로 수신 대기하고 처리할 수 있는 양방향 이벤트와 상태 변경 알림을 간략히 설명합니다. 브라우저 내의 JavaScript는 이벤트 기반입니다. 즉, 프로그램이 수신 대기하고 그에 따라 코드를 실행할 수 있는 이벤트를 생성하여 사용자 상호작용에 응답합니다.
이벤트에는 크게 두 가지 유형이 있습니다.
- 사용자 상호작용 이벤트 (예: 마우스 클릭)는 3D 지도 뷰포트에서 코드로 전파됩니다. 이러한 이벤트를 사용하면 3D 지도 환경 내에서 직접적인 사용자 작업에 응답할 수 있습니다. 샘플 보기
- 상태 변경 알림은 기존
property_changed이름 지정 스키마를 사용하여 기본 3D 지도 데이터 모델 및 렌더링 상태의 업데이트를 반영합니다.
각 3D 매핑 API 객체는 프로그램이 이벤트 리스너를 등록하고 이러한 이벤트가 발생할 때 내장 addEventListener() 함수를 사용하여 로직을 실행할 수 있는 이름이 지정된 이벤트 집합을 노출합니다. 다음 예는 사용자가 3D 지도와 상호작용할 때 트리거되는 일반적인 이벤트를 보여줍니다.
다음 예는 사용자가 지도와 상호작용할 때 트리거되는 이벤트를 보여줍니다.
탐색 분석 관리
Maps JavaScript API의 포토리얼리스틱 3D 지도에 표시되는 지도에는 사용자와 지도가 상호작용할 수 있는 UI 요소가 포함됩니다. 이러한 요소를 사용자 컨트롤이라고 합니다. 탐색 컨트롤은 기본적으로 포함되지만 애플리케이션에서 표시하지 않도록 선택할 수 있습니다.
다음 이미지는 지도 JavaScript의 포토리얼리스틱 3D 지도에서 표시하는 기본 컨트롤을 보여줍니다.
다음은 지도 JavaScript의 포토리얼리스틱 3D 지도에 있는 컨트롤의 전체 목록입니다.
- 확대/축소 컨트롤은 지도의 확대/축소 수준을 변경할 수 있는 '+' 및 '-' 버튼을 표시합니다.
- 기울기 컨트롤을 사용하면 카메라의 기울기를 변경할 수 있습니다.
- 회전 컨트롤을 사용하면 카메라의 방향을 변경할 수 있습니다.
- 이동 컨트롤은 지도의 중심을 변경할 수 있는 '←', '→', '↑', '↓' 버튼을 표시합니다.
카메라 컨트롤 및 애니메이션
사전 설정된 카메라 경로
지도 JavaScript의 포토리얼리스틱 3D 지도는 두 가지 사전 설정된 카메라 경로를 제공합니다. 카메라 경로는 애니메이션의 길이를 변경하여 (속도를 높이거나 낮춤) 맞춤설정하거나, 여러 경로를 결합하여 더 극적인 경험을 만들 수 있습니다.
지도 JavaScript의 포토리얼리스틱 3D 지도에서는 다음과 같은 카메라 경로를 지원합니다.
FlyCameraTo애니메이션은 지도 중심에서 지정된 대상까지 이동합니다.FlyCameraAround애니메이션은 지정된 횟수만큼 지도의 지점을 중심으로 회전합니다.
사용 가능한 두 경로를 결합하여 관심 장소로 이동하고, 그 주변을 회전한 후 원하는 경우 중지할 수 있습니다.
카메라 제한사항
카메라의 화면 이동, 최대 고도를 제어하거나 지정된 지도에서 사용자의 움직임을 제한하는 경도/위도 경계를 만드는 것이 좋습니다. 카메라 제한을 사용하여 이를 수행할 수 있습니다.
카메라 제한이 작동하고 구현되는 방식의 예는 데모를 참고하세요.