개요
3D 지역 탐색기 솔루션을 사용하면 완전히 새로운 방법으로 위치를 탐색하고 경험할 수 있습니다. 이 솔루션은 Google Maps Platform 실사 3D 타일 및 Places API의 기능을 활용하여 매력적인 대화형 3D 환경을 만듭니다.
3D 지역 탐색기는 다음과 같은 다양한 용도로 설계되었습니다.
지역 탐색 개선: 사용자는 높은 수준의 시각적 세부정보로 주변 지역을 가상으로 탐색하여 지역 지형지물과 명소에 관한 유용한 정보를 얻을 수 있습니다.
위치 기반 내러티브 홍보: 관심 장소(POI)를 풍부한 설명과 함께 사용하면 사용자에게 특정 위치를 교육하고 알리는 내러티브 중심 환경을 만들 수 있습니다.
Google 지도 3D 기능을 사용하여 개발 아이디어 얻기: 몰입형 양방향 지도를 만드는 데 Google의 3D 매핑 데이터가 지닌 잠재력을 보여줍니다.
시작하기:
사용 설정
핵심 기술
이 솔루션은 다음 두 가지 핵심 기술을 사용하여 구축되었습니다.
Google Maps Platform API:
Google에서는 Google Maps Platform의 여러 API로 기본 지도와 데이터를 가져와 이러한 환경을 만듭니다.
- Google 지도 실사 3D 타일: 건물과 지형의 고해상도 3D 모델을 통해 도시 환경을 사실적이고 시각적으로 표현합니다.
- Places API: 앱은 탐색된 영역 내의 관심 장소 (POI)에 관한 자세한 정보를 식별하고 표시하여 지역 지식으로 풍부한 사용자 환경을 제공할 수 있습니다.
- 자동 완성은 사용자가 특정 위치 또는 관심 지역을 검색하는 데 도움이 됩니다.
CesiumJS
CesiumJS는 고해상도 3D 지구본을 렌더링하고 표시합니다. 이 도구는 건물과 지형의 3D 메시 모델을 제공하는 Google의 실사 3D 타일의 로드 및 시각화를 처리합니다.
카메라 관리: CesiumJS는 카메라의 위치, 방향, 움직임을 제어하는 도구를 제공합니다. 여기에는 다음이 포함됩니다.
- 앱을 로드할 때 지정된 인근 지역에 초점을 두도록 초기 시점 설정
- 탐색을 위한 자동 궤도 애니메이션과 같은 동적 카메라 이동 구현
- 이러한 지형지물이 포함된 경우(화면 이동, 확대/축소, 회전) 지구와의 사용자 상호작용을 처리합니다.
실사 3D 타일이 3D 타일 렌더기와 함께 작동하는 방법을 알아보세요.
주요 구성요소
애플리케이션은 다음과 같은 두 가지 앱으로 나뉩니다.
- 관리자 앱
- 데모 앱
다음 다이어그램은 두 애플리케이션 간의 차이점과 상관관계를 간략히 보여줍니다.
각 앱을 자세히 조사하는 것이 좋습니다.
관리자 앱
이 애플리케이션은 3D 환경을 맞춤설정할 수 있는 사용자 친화적인 인터페이스를 제공합니다.
위치 검색 : 통합된 Google Maps Platform Autocomplete 검색창을 사용하여 표시할 지역을 찾습니다. 위치를 선택하면 카메라가 해당 지역으로 매끄럽게 이동합니다.
카메라: 카메라 이동 속도와 궤도 유형을 조정하여 선택한 보기 환경을 만듭니다.
장소 (POI): 추천하려는 장소의 밀도, 검색 반경 및 관심 장소 유형 (예: 식당, 카페, 명소)을 정의합니다.
이 앱을 사용하여 최종 사용자의 환경을 맞춤설정하세요.
라스베이거스 스트립 주변의 관광 명소 밀집 보기를 참고하세요.
주요 관광 명소가 있는 그랜드 캐니언을 탐험하세요.
모든 맞춤설정에 대한 자세한 설명이 3D 영역 탐색기 맞춤설정을 참조하세요.
데모 앱
이는 Admin 앱에서 만든 구성을 로드하는 최종 사용자 대상 애플리케이션입니다. 이 몰입형 3D 환경에서 사용자는 선택한 영역을 탐색하고 강조 표시한 장소를 발견할 수 있습니다.
관리 앱을 사용하여 디자인과 분위기를 맞춤설정한 후에는 소스 코드에서 구성을 다운로드하고 맞춤 애플리케이션을 실행할 수 있습니다.
사용자 경험
이 애플리케이션의 몇 가지 주요 기능은 다음과 같습니다.
- 사용자는 건물, 명소, 지형 등 지역을 3D로 대화형으로 탐색할 수 있습니다.
- 사용자가 주변 장소 (예: 박물관, 공원, 식당)를 검색하고 발견할 수 있습니다.
사용자는 장소를 선택하면 해당 위치와 관련된 자세한 정보나 설명을 볼 수 있습니다.
개발자는 설정 및 컨트롤 (관리 앱을 사용하는 경우)을 통해 탐색 분석 환경을 맞춤설정할 수 있습니다.
자동 회전이 사용 설정되어 있어 선택한 영역의 중심을 중심으로 카메라가 자동으로 회전합니다.
기본 요건
Google 지도 API 키: 다음 API가 사용 설정된 유효한 API 키가 필요합니다.
웹 서버: 다음 중 하나에서 애플리케이션을 제공할 수 있습니다.
- 로컬 웹 서버 (예: Node.js, http-server 사용)
- 정적 웹 호스팅 서비스 (애플리케이션에 Dockerfile과 함께 제공)
배포 옵션에 관한 자세한 설명은 GitHub 프로젝트의 리드미 섹션에서 확인할 수 있습니다.
Deployment
앱을 GKE 또는 GAE와 같은 모든 컨테이너 환경에서 노드 애플리케이션 또는 Docker 컨테이너로 배포할 수 있습니다. 호스팅된 데모는 다음 아키텍처를 사용합니다.
- 이 아키텍처에서 코드는 GitHub 프로젝트에 있습니다.
- Cloud Build는 main으로 푸시할 때 코드를 선택하고 빌드 작업을 트리거합니다.
- 빌드의 일부로 API 키를 삽입하고 이미지를 만든 다음 Artifact Registry에 저장합니다.
- 마지막으로 Artifact Registry에서 Cloud Run으로 안정적인 최신 이미지를 배포합니다.
- 또한 배포된 앱의 상태를 확인하기 위해 몇 가지 상태 확인 및 모니터링이 실행되고 있습니다.
청구 정보
3D 지역 탐색기 솔루션은 Google Maps Platform 서비스를 사용하여 몰입형 동적 환경을 제공합니다. 일부 API에는 요금이 부과될 수 있습니다. 다음은 API의 개요 및 가격 책정 링크입니다
Google Maps Platform - 3D 타일 API:
스토리텔링 솔루션은 3D Tiles API를 활용하여 지리정보 데이터로 시각적 환경을 개선합니다. 3D Tiles API와 관련된 가격 책정에 관한 자세한 내용은 Google Maps Platform - 3D Tiles API 가격을 참고하세요.
Google Maps Platform - Places API:
Places API는 위치 기반 데이터에 사용되어 스토리텔링 환경에 풍부한 정보를 추가합니다. Google Places API와 관련된 비용을 알아보려면 Google Maps Platform의 Places API 가격 책정을 참고하세요.
Google Maps Platform - Autocomplete API:
자동 완성 기능은 사용자 상호작용을 향상합니다. Google Maps Autocomplete API의 가격 책정에 관한 자세한 내용은 Google Maps Platform - Place Autocomplete 가격 책정을 참고하세요.
CesiumJS:
CesiumJS는 3D 지구본 시각화에 사용됩니다. CesiumJS 자체는 오픈소스이지만 추가 기능이나 서비스에는 관련 비용이 발생할 수 있습니다. 프리미엄 오퍼링은 CesiumJS 문서를 참조하세요.
요금은 사용량에 따라 개별적으로 결정되므로 각 API의 가격 책정 세부정보를 검토해야 합니다. Google Maps Platform은 일정량의 사용량이 무료로 제공되는 무료 등급을 제공하며, 구체적인 가격 책정은 요청 수 및 사용 지역과 같은 요인에 따라 달라질 수 있습니다.
Google Maps Platform 및 CesiumJS 사용 비용에 관한 가장 정확한 최신 정보는 항상 공식 가격 책정 페이지를 참고하세요. 이러한 서비스에 명시된 이용약관을 준수하여 관련 비용을 효과적으로 관리하고 파악해야 합니다.
결론
이 문서에서는 3D 영역 탐색기의 기능, 구성요소, 사용자 환경 및 기술 요구사항을 간략하게 설명합니다.
Google의 포토리얼리스틱 3D 타일과 Places API를 활용하여 주변 지역을 가상으로 탐색하고 관심 장소를 탐색하며 지역 역사를 배울 수 있습니다.
3D 영역 탐색기는 지역을 보여주거나, 탐험을 시작하거나, 디지털 스토리텔링을 홍보하는 등 시각적으로 멋진 플랫폼을 제공합니다.
데모를 사용해 보고 관리 앱으로 맞춤설정하여 흥미롭고 유용한 3D 환경을 만들어 보세요.