이 페이지는 Cloud Translation API를 통해 번역되었습니다.

3D 영역 탐색기: 맞춤설정 가이드

3D 지역 탐색기는 매력적인 3D로 커뮤니티를 탐색할 수 있는 솔루션입니다. 이 솔루션은 Google의 실사 3D 타일, 장소 검색, 장소 세부정보, Autocomplete API를 활용합니다.

시작하기:

사용 설정

환경 맞춤설정

3D 지역 탐색기 솔루션은 세부적인 맞춤설정이 가능하므로 고객 여정에 맞는 환경을 제공할 수 있습니다. UI의 제어판 또는 config.json 파일을 사용하여 맞춤설정할 수 있습니다.

맞춤설정할 준비가 되셨나요? 방법은 다음과 같습니다.

위치

config.json 파일에서 위도와 경도를 조정하여 실험 환경의 시작점을 정의합니다.

카메라 제어

카메라의 궤도 유형(예: 전통적인 원형 경로, 흥미로운 사인파)을 선택하여 여정을 관리하세요.

고정 궤도:

고정된 높이로 특정 관심 장소를 둘러싼 원형 궤도입니다.

Google 시드니 사무실을 살펴보고 고정된 궤도의 실제 작동 모습을 확인하세요.
동적 궤도:

카메라가 지정된 관심 지점을 중심으로 사인파 궤도를 부드럽게 움직입니다. 이러한 독특한 움직임을 통해 시청자는 관심 장소를 다양한 높이와 각도에서 관찰하여 역동적이고 몰입도 높은 시각적 환경을 제공할 수 있습니다.

에펠탑을 탐색하여 실제로 작동하는 궤도를 직접 확인해 보세요.

관심 장소 (POI):

탐색할 장소의 유형을 결정하여 탐색 분석을 맞춤설정합니다. config.json의 types 배열을 사용하여 박물관, 공원, 학교 등에서 선택하세요.
density 매개변수를 조정하여 표시되는 최대 관심 장소 수를 설정합니다.
근처의 숨겨진 보석을 포함하거나 특정 영역에 초점을 맞추도록 searchRadius (in meters)를 수정합니다.
speed (in revolutions per minute) 매개변수를 사용하여 카메라 이동에 선택한 속도를 설정합니다.

탐색 분석 미리 로드하기: URL 맞춤설정으로 자세히 알아보기

3D 영역 탐색기를 사용하면 URL 맞춤설정으로 탐색 분석을 미리 정의할 수 있습니다. 이렇게 하면 수동 구성이 필요하지 않아 사용자 환경이 간소화됩니다.

완벽한 URL 만들기:

지역 탐색기 URL에 특정 매개변수를 추가하기만 하면 위치와 기타 설정을 미리 설정할 수 있습니다. 예를 들면 다음과 같습니다.

https://{base-url}/#location.coordinates.lat=40.7424396&location.coordinates.lng=-74.0061439

이 URL은 지정된 위도와 경도로 시작 지점을 설정하여 선택한 위치로 즉시 이동합니다. 사용 가능한 매개변수:

location.coordinates.lat: 선택한 위치의 위도.
location.coordinates.lng: 선택한 위치의 경도입니다.
poi.types: 표시할 관심 장소 유형의 쉼표로 구분된 목록입니다.
poi.density: 선택된 최대 관심 장소 수입니다.
poi.searchRadius: 주변 관심 장소를 검색하기 위한 반경입니다.
camera.speed: 카메라 궤도 속도입니다.
camera.orbitType: 카메라 궤도 유형 ('고정 궤도' 또는 '동적 궤도').

URL 맞춤설정의 이점:

선택한 설정을 사전 정의하여 사용자 환경을 간소화하세요.
미리 로드된 특정 위치 및 관심 장소와 타겟팅된 여정을 공유합니다.
사전 구성된 Area Explorer 환경을 웹사이트 내에 원활하게 삽입합니다.

URL 맞춤설정을 활용하면 맞춤형 환경을 만들고 다른 사용자를 초대해 선별된 모험을 시작할 수 있습니다.

추가 맞춤설정

이전 섹션에서는 UI 또는 구성 파일을 통해 액세스할 수 있는 조정에 관해 살펴보았습니다. 그러나 애플리케이션을 추가로 맞춤설정하기 위해 수정할 수 있는 다른 기본 제공 매개변수도 몇 가지 있습니다.

이러한 고급 맞춤설정을 수행하려면 src 디렉터리에 있는 src/utils/cesium.js 파일의 코드를 살펴봐야 합니다. 다음 변수를 변경하여 애플리케이션의 모양과 느낌을 바꿀 수 있습니다.

카메라 높이

CAMERA_HEIGHT 값을 조정하여 특정 지점을 향해 날아갈 때 카메라가 위치하는 정도를 제어합니다. 값이 클수록 더 확대된 파노라마 뷰가 제공되고, 값이 작을수록 해당 영역의 세부정보에 더 가까워집니다.

// Camera height (in meters) above the target when flying to a point.
const CAMERA_HEIGHT = 100;

설정: CAMERA_HEIGHT
기본값: 100
설명: 특정 지점으로 이동할 때 대상 위치 위로 이동하는 카메라의 높이를 정의합니다.
예시 값:
- 50: 가까이서 보기, 디테일 강조
- 200: 더 파노라마 원근입니다.

카메라 피치

카메라의 초기 기울기는 BASE_PITCH로 정의됩니다. 아래쪽 기울기에는 음수 값을 사용하고 위쪽 뷰에는 양수 값을 사용합니다. 탐색 분석에 섬세한 동적 움직임을 추가하려면 AUTO_ORBIT_PITCH_AMPLITUDE를 변경하세요.

// Pitch 30 degrees downwards
const BASE_PITCH = -30;
// change the pitch by 10 degrees over time
const AUTO_ORBIT_PITCH_AMPLITUDE = 10;

설정: BASE_PITCH 및 AUTO_ORBIT_PITCH_AMPLITUDE
기본값은 다음과 같습니다.
- BASE_PITCH: -30 (30도 아래로 피칭)
- AUTO_ORBIT_PITCH_AMPLITUDE: 10 (시간 경과에 따라 피치 10도 변경)

설명: 카메라 피치는 도 단위로 측정되는 지도의 시각적 기울기입니다. 틸트라고도 합니다. 이러한 설정은 자동 회전 중 카메라의 초기 피치와 동적 피치 조정을 정의합니다.

예시 값:

BASE_PITCH: 0 (레벨 카메라)
AUTO_ORBIT_PITCH_AMPLITUDE: 0 (피치 편차 없음)

카메라 범위 및 확대/축소

이러한 매개변수는 특정 지점에 초점을 맞출 때 적용되는 확대/축소 정도를 설정합니다. 값이 작을수록 더 가까이 확대됩니다.

// Distance variation relative to initial range.
const RANGE_AMPLITUDE_RELATIVE = 0.55;

// Determines how much the camera should zoom in or out
const ZOOM_FACTOR = 20;

설정: RANGE_AMPLITUDE_RELATIVE 및 ZOOM_FACTOR

기본값:

RANGE_AMPLITUDE_RELATIVE: 0.55 (상대 거리 편차)
ZOOM_FACTOR: 20 (카메라 확대/축소 배율)

설명: 이 설정은 카메라가 움직이는 동안의 범위 변화와 더 자세히 살펴보기 위한 확대/축소 수준을 정의합니다.

예시 값:

RANGE_AMPLITUDE_RELATIVE: 1 (전체 범위 분포)
ZOOM_FACTOR: 10 (축소 축소)

// Camera heading (rotation), pitch (tilt), and range (distance) for resetting view.
const CAMERA_OFFSET = {
  heading: 0, // No rotation offset.
  pitch: Cesium.Math.toRadians(BASE_PITCH),
  range: 800, // 800 meters from the center.
};

카메라 재설정

사용자가 카메라를 원래 위치로 재설정하려는 경우 CAMERA_OFFSET 값이 사용됩니다. 이 설정에는 방향 (회전), 피치 (기울기), 범위 (카메라가 중앙으로부터의 거리)가 포함됩니다.

설정: CAMERA_OFFSET
기본값은 다음과 같습니다.
- heading: 0 (회전 오프셋 없음)
- pitch: Cesium.Math.toRadians(-30) (30도 아래로 높임)
- range: 800 (중심에서 800미터)
설명: 카메라 방향, 피치, 뷰 재설정 범위를 정의합니다.
예시 값:
- heading: 45 (도, 북서쪽 뷰)
- range: 1,500미터 (중심에서 더 멀리)

시작 좌표:

START_COORDINATES는 카메라의 초기 경도, 위도, 높이를 정의합니다. 여기에서 탐색 분석이 시작되므로 사용자에게 먼저 표시할 영역으로 설정합니다.

// Default camera start position in longitude, latitude, and altitude.
const START_COORDINATES = {
  longitude: 0,
  latitude: 60,
  height: 15000000, // 15,000 km above the surface
};

설정: START_COORDINATES
기본값:
- longitude: 0
- latitude: 60
- height: 15000000 (표면 위 15,000km)
예시 값:
- longitude: -122.4934, latitude: 37.7951 (금문교)
- height: 2000 (더 가까운 시작 위치)

사전 정의된 위치 로드

config.json의 location 객체는 영역의 중심을 설정합니다. 이는 Cesium 뷰어의 초기 시점입니다.coordinates 카메라를 먼저 이동할 위치의 위도 (lat) 및 경도 (lng)를 정의합니다. 이 값을 조정하여 카메라를 지구본의 특정 위치로 설정합니다.

  {
  "location": {
    "coordinates": { "lat": null, "lng": null }
  },

이 구성을 사용하면 선택한 특정 위치를 확대하여 3D Place Navigator 애플리케이션을 시작할 수 있습니다. Google의 지오코딩 도구를 사용하면 주소 또는 장소 이름의 위도와 경도 좌표를 위치 객체에 지정하여 가져올 수 있습니다.

지오코딩 도구에 액세스합니다.
지오코딩 요청 만들기 '직접 해보기' 섹션을 클릭하고 '주소' 필드에 선택한 위치를 입력합니다. 주소, 장소 이름 또는 랜드마크도 지정할 수 있습니다.
좌표 생성 '실행' 버튼을 클릭하여 요청을 제출하세요. 이 도구는 geometry.location 섹션 아래에 표시된 위도 및 경도 좌표를 포함하여 위치에 관한 다양한 정보가 포함된 응답을 반환합니다.
지오코드 사용 응답에서 가져온 위도 및 경도 값을 복사하여 구성 내의 coordinates 객체에 붙여넣습니다.

참고: 이 방식으로 사용되는 지오코드는 Google Maps Platform 서비스 약관 3.4항의 약관을 준수해야 합니다. 즉, 30일 넘게 캐시해서는 안 되며 그 후에는 새로고침해야 합니다.

이 구성에서는 지오코딩 도구를 사용하여 캘리포니아주 마운틴뷰에 있는 Google 본사의 좌표를 자동으로 확인하고 카메라가 해당 위치를 중심으로 하여 3D Place Navigator 애플리케이션을 실행합니다.

고급 맞춤설정

코드를 더 자세히 살펴보고 추가로 맞춤설정할 수 있습니다. 다음 섹션에서는 몇 가지 옵션을 안내합니다.

새 카메라 경로 추가

이 솔루션은 기본적으로 다음과 같은 두 가지 카메라 경로를 구현합니다.

fixed-orbit" | "dynamic-orbit"

그러나 새 카메라 경로를 만들고 싶다면

calculateAutoOrbitFrame 함수의 /src/utils/cesium.js

구성 패널에서 이 새 경로 계산을 사용하려면 demo/src/camera-settings.js.의 구현을 참고하세요.

장소 유형 추가

구성의 장소 유형 목록은 demo/src/place-settings.js 파일에서 조정할 수 있습니다. 4행부터 데모에서 사용할 수 있는 장소 유형이 표시됩니다.

데모 소스를 변경하지 않고 특정 장소 유형을 사용하려면 poi.types 아래 config.json 파일에 추가하면 됩니다.

스타일 맞춤설정 (css)

CSS 변수로 작업한 스타일의 경우 모든 주요 브라우저에서 지원되며 중앙의 한 줄을 변경하고 특정 CSS 속성을 업데이트할 수 있습니다. CSS 변수는 src/main.css.에 정의되어 있습니다. 여기에서 전체 애플리케이션의 색상, 글꼴 설정, 패딩 또는 여백을 조정할 수 있습니다.

추가 데이터 오버레이

추가 데이터를 오버레이하려면 src/utils/cesium.js 파일을 업데이트하고 GeoJSON 또는 기타 지리 참조 데이터를 지구본에 추가하는 방법에 대한 cesium 문서를 참고하세요.

구성 섹션 삭제

JavaScript 애플리케이션에는 구성 파일에 demo/src/[config-panel.js](config-panel.js): location, poi, camera의 세 가지 기본 섹션이 있습니다. 이러한 각 섹션에서는 애플리케이션의 여러 측면에 대한 구성 옵션을 제공합니다. 개발자는 특정 니즈에 따라 이러한 섹션을 맞춤설정할 수 있습니다.

1.구성에서 특정 섹션 삭제

위치 섹션

location 섹션을 삭제하려면 코드에서 다음 줄을 찾아 주석을 달거나 삭제합니다.

const locationConfig = { ...config.location, ...customConfig.location };

관심 장소 섹션

poi 섹션을 삭제하려면 코드에서 다음 줄을 찾아 주석을 추가하거나 삭제합니다.

const poiConfig = { ...config.poi, ...customConfig.poi };

카메라 섹션

camera 섹션을 삭제하려면 코드에서 다음 줄을 찾아 주석을 추가하거나 삭제합니다.

const cameraConfig = { ...config.camera, ...customConfig.camera };

2. 결합된 구성 업데이트

섹션을 삭제한 후에는 결합된 구성 객체를 업데이트해야 합니다. 이 객체는 기본 구성을 맞춤설정과 병합합니다. combinedConfig 객체에서 해당 속성을 삭제합니다.

const combinedConfig = {
 location: { ...config.location, ...customConfig.location }, // Remove if location section is removed

 poi: { ...config.poi, ...customConfig.poi }, // Remove if poi section is removed
 camera: { ...config.camera, ...customConfig.camera }, // Remove if camera section is removed
};

3. UI 요소 조정

섹션 삭제로 관련 UI 요소도 삭제된다면 html 코드에서 이에 따라 코드를 업데이트하세요. 예를 들어 관리자 패널에서 카메라 속도와 같은 특정 섹션을 삭제하려면 해당 섹션의 js와 html 코드를 모두 업데이트해야 합니다.

4. 카메라 설정 섹션 삭제

UI에서 카메라 설정 섹션을 삭제하려면 다음 줄을 찾아 주석을 달거나 삭제합니다.

const cameraSettingsSecgetCameraSettingsSection(cameraConfig);

위치 섹션 요약 삭제 중

const locationSection = await getLocationSettingsSection(locationConfig);

결론

이 문서에서는 3D 탐색 환경을 맞춤설정할 수 있도록 영역 탐색기에서 사용할 수 있는 다양한 맞춤설정 옵션을 살펴보았습니다. 카메라 동작을 수정하고, 시각적 기울기를 조정하고, 확대/축소 수준을 변경하여 선택한 설정과 관심 장소를 보여주는 독특하고 매력적인 환경을 만들 수 있습니다.

다양한 구성으로 실험하고 특정 니즈에 맞게 매개변수를 미세 조정해야 합니다. 맞춤설정의 힘을 빌리면 잠재고객을 사로잡고 비전을 실현하는 몰입도 높은 맞춤형 여정을 만들 수 있습니다.