사진 오버레이 추가

이전 KML 출시 버전의 경우 Google 어스 위치표시의 설명 풍선에 조그만 사진을 포함할 수 있습니다. Panoramio와 같은 전체 레이어는 사용자가 제공한 지리 위치 사진으로 구성됩니다. 이러한 사진을 보려면 사용자는 위치표시 아이콘이나 목록 패널의 이름을 클릭하여 사진이 포함된 풍선을 열어야 합니다.

사진 오버레이(PhotoOverlays)는 Google 어스의 풍경에 직접적으로 삽입되는 사진이며 2D 직사각형의 형태를 취할 수 있습니다. 또한 Google 어스의 기본 항공 이미지를 펼치는 풍경 '빌보드(billboards)'를 추가합니다. 사진 오버레이는 원통이나 구로 투영되어 사용자가 '들어가서' 탐험하고 자세히 살펴볼 수 있는 가상 파노라마를 구현할 수도 있습니다. 더 나아가 KML 2.2는 수많은 메가픽셀의 데이터가 포함된 매우 큰 사진 오버레이를 담고 있습니다. KML 작성자가 이러한 이미지를 사용하기 위해서는 크기가 축소된 버전의 이미지 집합을 제공하여 Google 어스가 현재 화면에 맞는 이미지 영역만 효율적으로 로드하고 적절한 정밀도를 사용할 수 있도록 해야 합니다.

이 페이지 외에도 'KML 내 주제'로 이동하여 사진 오버레이 개체에 의해 사용되는 카메라(Cameras)에 대한 내용을 읽어보시기 바랍니다. 사진 오버레이에 매우 큰 이미지를 사용 중인 경우에는 <ImagePyramid>도 만들어야 합니다.

사용할 수 있는 기능

<PhotoOverlay> 요소를 사용하면 어스에 있는 사진을 지리적으로 찾을 수 있으며 사진 오버레이를 보는 카메라의 위치와 방향을 지정할 수 있습니다. 사진 오버레이는 간단한 2D 직사각형, 부분 또는 전체 원통이나 구형 파노라마를 위한 구의 형태를 취할 수 있습니다. 오버레이는 지정한 위치에 배치되며 방향은 카메라를 향합니다.

이 새로운 기능의 가장 흥미진진한 점은 수많은 메가픽셀 데이터가 포함된 아주 큰 사진을 처리할 수 있다는 것입니다. 따라서 사용자는 이러한 큰 이미지를 효율적으로 확대 및 이동하여 미세한 부분까지 확인할 수 있습니다. 고급 기능에 대한 내용은 매우 큰 사진 추가하기 섹션을 참조하세요.

주요 개념

이어지는 섹션에서는 사진 오버레이와 관련된 다음의 주요 개념에 대해 다룹니다.

<Feature> 및 <AbstractView>으로부터의 상속 요소
<Overlay>로부터의 상속 요소
모양
시야
<rotation>으로 화면 조정
아이콘으로 사진 오버레이 만들기
고급 이미지 피라미드(매우 큰 사진 추가하기 섹션 참조)

구문

아래에는 주요 관련 개념에 대해 읽으면서 참조하실 수 있도록 <PhotoOverlay>의 구문이 제공되어 있습니다.

<PhotoOverlay>
  <!-- inherited from Feature element -->   
  <name>...</name>                      <!-- string -->   
  <visibility>1</visibility>            <!-- boolean -->   
  <open>0</open>                        <!-- boolean -->
  <atom:author>...<atom:author>         <!-- xmlns:atom -->   
  <atom:link>...</atom:link>            <!-- xmlns:atom -->   
  <address>...</address>                <!-- string -->   
  <AddressDetails xmlns="urn:oasis:names:tc:ciq:xsdschema:xAL:2.0">...
 </AddressDetails> <!-- string --> <phoneNumber>...</phoneNumber> <!-- string -->
 <Snippet maxLines="2">...</Snippet> <!-- string --> <description>...</description> <!-- string --> <AbstractView>...</AbstractView> <!-- Camera or LookAt --> <TimePrimitive>...</TimePrimitive> <styleUrl>...</styleUrl> <!-- anyURI --> <StyleSelector>...</StyleSelector> <Region>...</Region> <ExtendedData>...</ExtendedData> <!-- inherited from Overlay element --> <color>ffffffff</color> <!-- kml:color --> <drawOrder>0</drawOrder> <!-- int --> <Icon> <href>...</href> <!-- anyURI --> ... </Icon> <!-- specific to PhotoOverlay --> <rotation>0</rotation> <!-- kml:angle180 --> <ViewVolume> <leftFov>0</leftFov> <!-- kml:angle180 --> <rightFov>0</rightFov> <!-- kml:angle180 --> <bottomFov>0</bottomFov> <!-- kml:angle90 --> <topFov>0</topFov> <!-- kml:angle90 --> <near>0</near> <!-- double --> </ViewVolume> <ImagePyramid> <tileSize>256</tileSize> <!-- int --> <maxWidth>...</maxWidth> <!-- int --> <maxHeight>...</maxHeight> <!-- int --> <gridOrigin>lowerLeft</gridOrigin> <!-- lowerLeft or upperLeft--> </ImagePyramid> <Point> <coordinates>...</coordinates> <!-- lon,lat[,alt] --> </Point> <shape>rectangle</shape> <!-- kml:shape --> </PhotoOverlay>

<Feature>로부터의 상속 요소

<PhotoOverlay>는 <Feature>로부터 파생되므로 <AbstractView>에서 파생된 <Camera> 또는 <LookAt> 중 하나를 포함할 수 있습니다. 카메라 또는 바라보기(LookAt)는 화면 시점(viewpoint)과 보는 방향(viewing direction, 뷰 벡터(view vector)라고도 함)을 지정합니다. 사진 오버레이는 화면 시점에 연관되도록 배치됩니다. 구체적으로, 2D 직사각형 이미지의 평면은 뷰 벡터의 오른쪽 각도와 수직을 이룹니다. 이 평면의 법선 즉, 사진의 일부에 속하는 정면은 화면 시점을 향합니다.

<Overlay>로부터의 상속 요소

사진 오버레이 이미지의 URL은 <Overlay>로부터 상속되는 <Icon> 태그에 지정되어 있습니다. <Icon> 태그는 사진 오버레이에 사용할 이미지 파일을 지정하는 <href> 요소를 포함해야 합니다. 기가픽셀 크기의 이미지가 사용되는 경우 <href>는 여러 해상도의 이미지 피라미드로 색인화되는 특수 URL로 기능합니다(매우 큰 사진 추가하기 참조).

모양

사진 오버레이는 모양(shape)에 투영됩니다. <shape>의 값은 다음 중 하나가 될 수 있습니다.

직사각형 - 일반적인 사진인 경우
원통형 - 파노라마인 경우(부분 또는 전체 원통)
구형 - 구형 파노라마인 경우

시야(Field of View)

카메라를 공간에 배치하고 방향을 설정한 후에는 현재의 장면을 어느 정도 표시할지 정의해야 합니다. 시야를 지정하는 것은 실제 카메라의 조리개를 조절하는 것과 유사합니다. 작은 시야는 망원 렌즈처럼 장면의 작은 부분에 초점을 맞추며 큰 시야는 광각 렌즈처럼 장면의 큰 부분에 초점을 맞춥니다.

사진 오버레이의 시야는 4개의 평면에 의해 정의되며 각 평면은 뷰 벡터의 상대 각도에 의해 지정됩니다. 4개의 평면은 시야의 위쪽, 아래쪽, 왼쪽 및 오른쪽을 정의하며 아래와 같이 잘린 각뿔의 모양을 취합니다.

다음 다이어그램은 이 각뿔의 <rightFov> 및 <leftFov> 각도('옆쪽 시야')와 <topFov> 및 <bottomFov> 각도('위쪽 시야')를 보여줍니다.

실제 카메라는 보통 양 방향의 시야가 다음과 같이 대칭을 이루고 있습니다.

bottomFov = -topFov

및

leftFov = -rightFov

일반적인 값은 다음과 같습니다.

<ViewVolume>
  <near>1000</near>
  <leftFov>-60</leftFov>
  <rightFov>60</rightFov>
  <bottomFov>-60</bottomFov>
  <topFov>60</topFov>
</ViewVolume>

사진 오버레이를 포함하고 있는 <shape>는 <near>에 배치됩니다. 이는 화면 시점(또는 카메라 위치)으로부터의 거리(단위: 미터)입니다. 시야의 네 평면은 도형에 교차됩니다. 시야 내에 들어오는 도형의 모든 부분이 화면에 표시됩니다. 시야를 벗어나는 도형의 모든 부분을 '잘렸다'고 말합니다. 잘린 부분은 화면에 표시되지 않습니다.

직사각형의 시야

직사각형의 경우 <topFov>는 90° 미만이어야 하며 <bottomFov>는 -90°보다 커야 합니다. 이러한 제한을 하나라도 초과하는 경우 시야 평면은 이미지에 전혀 교차되지 않습니다. <bottomFov> 및 <leftFov> 요소는 일반적으로 음수 값입니다.

원통의 시야

원통형 이미지의 경우 원통의 축은 시야의 위쪽 벡터(Y 축)와 일치합니다. 원통의 반지름은 <near>와 동일합니다.

원통의 시야 범위는 다음과 같습니다.

-90 < bottomFov < topFov < 90
-180 < leftFov < rightFov < 180

구의 시야

구형 이미지는 카메라 원점(화면 시점)의 중앙에 위치합니다. 구의 반지름은 <near>와 동일합니다. 구의 시야 범위는 다음과 같습니다.

-90 < bottomFov < topFov < 90
-180 < leftFov < rightFov < 180

<rotation>으로 화면 조정

<rotation> 요소를 <PhotoOverlay>의 하위 요소로 사용하면 사진이 시야 내에 배치되는 방식을 조정할 수 있습니다. 이 요소는 사진이 회전되었고 원하는 수평 시야에서 약간 벗어난 경우에 유용합니다.

아이콘으로 사진 오버레이 표시

<PhotoOverlay>는 <Placemark> 내에 사용되었을 경우 <Point>와 같은 방식으로 동작하는 <Point> 요소를 포함합니다. 즉, Google 어스에서 아이콘을 그려서 사진 오버레이의 위치를 표시하도록 합니다. 그려진 아이콘은 <Placemark>와 마찬가지로 <styleUrl> 및 <StyleSelector> 입력란에 의해 지정됩니다.

매우 큰 사진 추가하기

매우 큰 사진의 경우 이미지의 계층구조 모음인 이미지 피라미드(image pyramid)를 구축해야 합니다. 여기에 포함된 각 이미지 버전은 이미지 원본에 비해 해상도가 점점 더 떨어집니다. 피라미드의 각 이미지는 시야에 들어오는 부분만 로드될 수 있도록 타일(tiles)로 세분화됩니다. Google 어스는 현재의 화면 시점을 계산하고 사용자와 이미지 간의 거리에 알맞은 타일을 로드합니다. 화면 시점이 사진 오버레이에 근접할수록 Google 어스는 더욱 높은 해상도의 타일을 로드합니다. 이미지 원본의 픽셀 전체를 화면에서 동시에 볼 수는 없습니다. 이 사전 처리 과정을 활용하면 화면 시점 내에 속한 이미지 부분과 사용자가 현재의 화면 시점에서 볼 수 있는 수준의 픽셀만 로드되므로 Google 어스가 최상의 성능을 발휘할 수 있습니다.

사용하려는 이미지가 매우 큰 경우 관련 이미지 피라미드를 만들고 <Icon> 요소에서 <href>를 수정하여 로드할 타일을 지정해야 합니다. 다음 섹션에서는 이미지 피라미드를 만들고 기가픽셀 이미지의 <href>를 지정하는 방법에 대해 설명합니다.

<ImagePyramid> 요소

<ImagePyramid> 요소에는 다음 구문이 포함됩니다.

<ImagePyramid>
  <tileSize>256</tileSize>              <!-- int -->
  <maxWidth>...</maxWidth>              <!-- int -->
  <maxHeight>...</maxHeight>            <!-- int -->
  <gridOrigin>lowerLeft</gridOrigin>    <!-- lowerLeft or upperLeft -->
</ImagePyramid>

이미지 원본의 픽셀 크기는 <maxWidth> 및 <maxHeight> 요소에 지정되어 있습니다. 너비와 높이는 마음대로 설정할 수 있으며 2의 n승이 아니어도 됩니다. 남는 픽셀은 이미지에 채우기 픽셀 추가에 설명된 것처럼 빈 픽셀을 사용하여 채울 수 있습니다.

타일은 정사각형이어야 하며 <tileSize>는 2의 n승이어야 합니다. 256(기본값) 또는 512 크기의 타일을 사용하는 것이 좋습니다.

이미지 피라미드 만들기

다음 안내에서는 이미지 픽셀의 크기가 2의 n승이라고 가정합니다. 이미지 픽셀의 크기가 2의 n승이 아닌 경우에는 먼저 이미지에 채우기 픽셀 추가에서 설명한 것처럼 픽셀을 채워야 합니다. 그런 다음 아래의 단계에 따라 이미지 피라미드를 만듭니다.

먼저 전체 크기의 이미지 원본을 타일 크기의 조각(예: 256 * 256픽셀 크기의 블록)으로 나눕니다.
이미지를 반으로 축소합니다.
이 새로운 이미지를 타일 크기의 정사각형으로 나눕니다.
이미지가 타일 크기에 맞을 때까지 2단계와 3단계를 반복합니다(예: 256 * 256 픽셀).

이미지에 채우기 픽셀 추가

행의 마지막 타일이 정사각형이 아닐 경우에는 투명한 채우기 픽셀을 추가하여 타일을 정사각형으로 만들어야 합니다. (0,0) 타일이 원점에 위치하도록 이미지를 배치합니다. 예를 들어 원점이 왼쪽 하단에 있으면 이미지를 타일 그리드의 왼쪽 하단에 배치합니다. 그러면 채우기가 필요할 수 있는 행과 열이 이미지의 오른쪽과 상단에 위치하게 됩니다. 가장 좋은 필터링 결과를 얻으려면 이미지의 각 모서리에 마지막 행이나 열을 복제합니다. 그런 다음 행이나 열의 타일에 있는 나머지 픽셀에 채우기 픽셀(예: 검은색)을 추가합니다.

예

예를 들어 크기가 3600 * 2700픽셀(약 10메가픽셀)인 이미지를 살펴보겠습니다. 다음은 이 이미지의 이미지 피라미드를 만드는 단계입니다.

256픽셀 크기의 타일을 사용하여 이미지 원본을 16 * 16픽셀의 그리드로 세분화할 수 있습니다. 이 이미지는 최종 피라미드의 4단계에 위치하게 됩니다.
이미지에 채우기 픽셀 추가에 설명된 것처럼 오른쪽 마지막 열과 상단의 마지막 행(<gridOrigin>이 오른쪽 하단(lowerLeft)이라고 가정할 경우)에서 부분적으로 채워진 타일을 픽셀로 채워서 정사각형으로 만듭니다.
이미지 크기를 반으로 축소합니다.
이 이미지를 256픽셀 크기의 타일로 세분화합니다. 이 단계의 이미지는 8 * 8 크기의 타일로 된 그리드로 구성됩니다(3단계).
3단계 이미지를 반으로 축소합니다.
축소된 이미지를 타일로 세분화합니다. 이 단계의 이미지는 4 * 4 크기의 타일로 된 그리드로 구성됩니다(2단계).
2단계 이미지를 반으로 축소합니다.
축소된 이미지를 타일로 세분화합니다. 이 단계의 이미지는 2 * 2 크기의 타일로 된 그리드로 구성됩니다(1단계).
1단계 이미지를 반으로 축소합니다.
결과적으로 256 * 256픽셀의 이미지가 생성되며 이 크기는 이미지 피라미드의 마지막 단계(0단계)입니다.

4096 * 4096 이미지의 이미지 피라미드에는 다음 표에 표시된 것처럼 5개의 단계가 있습니다.

난이도	타일수	이미지 크기(픽셀)
0	1	256 * 256
1	4개(2 * 2 그리드)	512 * 512
2	16개(4 * 4 그리드)	1024 * 1024
3	64개(8 * 8 그리드)	2048 * 2048
4	256개(16 * 16 grid)	4096 * 4096

따라서 n단계에는 방향별로 2ⁿ개의 타일이 있습니다.

다음 이미지는 샘플 이미지 피라미드의 0, 1, 2단계를 보여줍니다.

타일에 번호 지정

각 타일에는 Google 어스에서 현재 시점에 적합한 특정 파일만 가져올 수 있도록 번호가 지정되어 있습니다. 각 타일은 세 가지 값으로 식별됩니다.

x 값 - 그리드의 행 위치
y 값 - 그리드의 열 위치
단계(level) - 이미지 피라미드의 단계(0이 가장 높음)

기본적으로 원점(0,0)은 그리드 왼쪽 하단에 위치합니다. 이미지의 원점이 왼쪽 상단에 위치한 경우 <gridOrigin>의 왼쪽 상단(topLeft)을 지정합니다.

다음 그림은 10메가픽셀 이미지의 2단계에서 타일에 번호가 지정되는 방식을 보여 줍니다. 여기서 원점은 왼쪽 하단에 위치합니다.

매우 큰 이미지의 URL 지정

기가픽셀 이미지의 경우 <Icon> 요소의 <href> 사양에는 Google 어스에서 가져와야 하는 타일의 단계, x 및 y 값을 지정하는 특수 항목이 포함되어 있습니다. 예를 들어 이미지 URL은 다음과 같이 지정할 수 있습니다.

http://server.company.com/bigphoto/$[level]/row_$[x]_column_[$y].jpg

Google 어스는 3단계의 2행 1열에 있는 타일을 요청하기 위해 다음 URL을 가져옵니다.

http://server.company.com/bigphoto/3/row_2_column_1.jpg

투명성

이미지가 완전히 불투명한 경우 JPEG 형식을 사용합니다. 이미지의 일부는 불투명하고 나머지는 투명한 경우 PNG와 JPEG 타일을 함께 포함할 수 있습니다. PNG 형식은 투명도 값을 가진 타일에만 사용할 수 있습니다. 형식을 혼합해야 하는 경우 이미지 파일의 <href> 사양에서 파일 확장자를 생략하고 각 타일의 파일 이름에 파일 확장자를 포함합니다.

맨위로