3D 영역 탐색기 시작하기

이미지

개요

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 환경에서 사용자는 선택한 영역을 탐색하고 강조 표시한 장소를 발견할 수 있습니다.

관리 앱을 사용하여 디자인과 분위기를 맞춤설정한 후에는 소스 코드에서 구성을 다운로드하고 맞춤 애플리케이션을 실행할 수 있습니다.

사용자 경험

이미지

이 애플리케이션의 몇 가지 주요 기능은 다음과 같습니다.

  1. 사용자는 건물, 명소, 지형 등 지역을 3D로 대화형으로 탐색할 수 있습니다.
  2. 사용자가 주변 장소 (예: 박물관, 공원, 식당)를 검색하고 발견할 수 있습니다.
  3. 사용자는 장소를 선택하면 해당 위치와 관련된 자세한 정보나 설명을 볼 수 있습니다.

  4. 개발자는 설정 및 컨트롤 (관리 앱을 사용하는 경우)을 통해 탐색 분석 환경을 맞춤설정할 수 있습니다.

  5. 자동 회전이 사용 설정되어 있어 선택한 영역의 중심을 중심으로 카메라가 자동으로 회전합니다.

기본 요건

  1. Google 지도 API 키: 다음 API가 사용 설정된 유효한 API 키가 필요합니다.

  2. 웹 서버: 다음 중 하나에서 애플리케이션을 제공할 수 있습니다.

    • 로컬 웹 서버 (예: 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 환경을 만들어 보세요.