写真オーバーレイの追加

KML の以前のリリースでは、Google Earth の目印に付けられた説明バルーンに小さな写真を入れることができます。Panoramio のようなレイヤは、全体がユーザーから投稿された位置情報付き写真で構成されています。このような写真を表示するには、目印アイコンをクリック(または一覧パネルで名前をクリック)して、写真が挿入されているバルーンを開く必要があります。

写真オーバーレイとは、Earth の景観に直接埋め込む写真です。たとえば、ベースとなる Earth の鳥瞰写真に、2D の長方形の風景写真を埋め込むことができます。また、写真オーバーレイを円筒や球体に投影して仮想パノラマを作成し、ユーザーがその中を探索できるように設置することもできます。KML 2.2 では、数メガピクセルのデータを含む非常に大きな写真オーバーレイにも対応しています。非常に大きな画像については、解像度を下げたバージョンをいくつか作成しておき、Google Earth がそのときのビューに合わせて画像の一部のみを適度な解像度で効率的に読み込めるようにしておく必要があります。

このページの他に、PhotoOverlay オブジェクトによって使用される Camera について、カメラ ページの KML の説明をご覧ください。写真オーバーレイに非常に大きな画像を使用する場合は、<ImagePyramid> も作成する必要があります。

写真オーバーレイの機能

新たに追加された <PhotoOverlay> 要素を使用すると、Earth 上の特定の地点に写真を配置して、この写真オーバーレイを表示するカメラの場所と方向を指定できます。写真オーバーレイは、単純な 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> から派生する 2 つの要素(<Camera> と <LookAt>)のいずれかを指定できます。Camera(または LookAt)では、「視点」と「視線の方向」(「ビュー ベクトル」とも呼びます)を指定します。写真オーバーレイは、視点を基準とした位置に配置されます。具体的には、2D の長方形画像の面は、ビュー ベクトルと直交(直角に交わること)します。この面、つまり前面(画像のある部分)の垂線は、視点を指します。

<Overlay> からの継承

写真オーバーレイ画像の URL は、<Overlay> から継承した <Icon> タグで指定します。<Icon> タグには、その写真オーバーレイに使用する画像ファイルを指定する <href> 要素を入れる必要があります。ギガピクセル単位の画像の場合、解像度の異なる複数の画像からなるピラミッドを指し示す特殊な URL を <href> に指定します(非常に大きな写真を追加するを参照)。

形状

写真オーバーレイは、特定の「shape(形状)」に投影されます。<shape> には、次のいずれかの値を指定できます:

  • rectangle: 通常の写真
  • cylinder: 部分的または完全な円筒形のパノラマ写真
  • sphere: 球形のパノラマ写真

視界

空間内にカメラを配置して方向を設定したら、シーンのうちどの範囲を表示するかを定義する必要があります。「視界」を指定することは、実際のカメラの絞り値を調節することに似ています。望遠レンズのように視界が狭い場合は、シーンの小さな部分が表示されます。広角レンズのように視界が大きい場合は、シーンの大部分が表示されます。

写真オーバーレイの視界は、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> は、視点(つまりカメラの位置)からの距離(m 単位)を表す <near> で指定した位置に配置されます。視界の 4 つの面がその形状と交差します。形状のうち、視界内に収まっている部分が表示されます。視界の外にはみ出している部分は、「切り取られた」ものと見なされ表示されません。

長方形用の視界

長方形の場合、<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> でビューを調整する

視界内での写真の配置を調整するには、<PhotoOverlay> の子要素として <rotation> を使用します。この要素は、写真が回転されていて、望ましい水平ビューから少しずれている場合に役立ちます。

アイコンで写真オーバーレイに印を付ける

<PhotoOverlay> には <Point> 要素もあります。この要素は、<Placemark> の <Point> 要素と同じように機能するため、Google Earth でアイコンが描画され、写真オーバーレイの位置に目印が付けられるようにすることができます。どのアイコンを描画するかは、<Placemark> の場合と同じように、<styleUrl> および <StyleSelector> フィールドで指定します。

非常に大きな写真を追加する

非常に大きな画像の場合、「画像ピラミッド」を作成する必要があります。画像ピラミッドとは、元の画像の解像度を少しずつ下げた複数の画像を階層状にまとめたものです。ピラミッド内の各画像はさらに細かく「タイル」に分割され、表示領域に収まる部分だけを読み込めば済むようになっています。Google Earth では、そのときの視点を計算し、画像とユーザーの間の距離に適したタイルを読み込みます。視点が写真オーバーレイに近付くと、Google Earth はより高い解像度のタイルを読み込みます。元の画像のピクセルすべてを一度に画面に表示することはできないため、Google Earth はこの前処理によって最大のパフォーマンスを得ることができます。これは、そのときに表示領域に収まる部分の画像のみ、およびそのときの視点でユーザーが識別できる解像度のピクセルのみを読み込むだけでよいためです。

画像が非常に大きい場合、その画像の画像ピラミッドを作成し、<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 の累乗である必要もありません。その他のピクセルを空白のピクセルで埋めることができます(画像に空白を追加するを参照)。

タイルは正方形とし、<tileSize> は 2 の累乗にする必要があります。タイルのサイズは、256(デフォルト)または 512 にすることをおすすめします。

画像ピラミッドを作成する

以降の説明は、画像のピクセル数が 2 の累乗であるとことを前提としています(画像ピクセル数が 2 の累乗でない場合は、画像に空白を追加するにあるように空白を追加しておく必要があります)。その上で、次の手順で画像ピラミッドを作成します:

  1. 元のフルサイズ画像を正方形のタイル(たとえば 256 * 256 ピクセル)に分割します。
  2. その画像を 2 分の 1 に縮小します。
  3. その新しい画像を正方形のタイルに分割します。
  4. 画像がタイル(たとえば 256 * 256 ピクセル)に収まる大きさになるまで、手順 2 と 3 を繰り返します。

画像に空白を追加する

行の最後のタイルが正方形でない場合は、透明の空白ピクセルを追加してタイルを正方形にする必要があります。(0,0) のタイルを原点に合わせて画像を配置します(たとえば、原点が左下の場合は、画像をタイル グリッドの左下の角に合わせて配置します)。その場合、空白の追加が必要となる可能性のある行と列は画像の右側と上部になります。フィルタリングの精度を高めるため、最後の行(または列)を画像の端にコピーします。その後、その行(または列)のタイルの残りのピクセルに、(たとえば黒の)空白を追加します。

例として、3600 * 2700 ピクセル(約 10 メガピクセル)の画像の画像ピラミッドを作成する方法を次に示します:

  1. 256 ピクセル角のタイルを使用すると、元の画像を最終的に 16 * 16 ピクセルのグリッドに分割することができます(最終的には 4 階層のピラミッドになります)。
  2. 最後の列(<gridOrigin> が lowerLeft である場合は一番右)と最後の行(一番上)の正方形でないタイルに空白ピクセルを入れて正方形にします(画像に空白を追加するを参照)。
  3. その画像を 2 分の 1 に縮小します。
  4. その画像をさらに 256 ピクセル角のタイルに分割します。この段階で、画像は 8 * 8 のタイルのグリッド(3 階層)で構成されています。
  5. 階層 3 の画像を 2 分の 1 に縮小します。
  6. さらにタイルに分割します。この段階で、画像は 4 * 4 のタイルのグリッド(階層 2)で構成されています。
  7. 階層 2 の画像を 2 分の 1 に縮小します。
  8. さらにタイルに分割します。この段階で、画像は 2 * 2 のタイルのグリッド(階層 1)で構成されています。
  9. 階層 1 の画像を 2 分の 1 に縮小します。
  10. 縮小後の画像の大きさが 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 グリッド)
4096 * 4096

したがって、階層 n では一辺に 2n 個のタイルがあることになります。

サンプル画像ピラミッドの階層 0、1、2 を次に示します。

タイルの番号

Google Earth では、各階層のタイルに番号を付けることで、そのときの視点に適したタイルのみを取得できるようにしています。タイルは次の 3 つの値で識別されます:

  • x 値: グリッド内での行の位置
  • y 値: グリッド内での列の位置
  • level: 画像ピラミッド内の階層(0 が最上層)

デフォルトでは、原点 (0,0) はグリッドの左下になります。画像の原点が左上の場合は、<gridOrigin> で topLeft と指定します。

次の画像は、左下を原点とする 10 メガピクセル画像を分割した場合に階層 2 のタイルに付けられる番号を示したものです:

非常に大きな画像の URL を指定する

ギガピクセル単位の画像では、<Icon> 要素の <href> で、Google Earth が取得すべきタイルの levelxy の値を指定する特殊エンティティも指定します。たとえば、画像の URL を次のように指定する場合があります:

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

階層 3 の行 2 列 1 のタイルをリクエストする場合、Google Earth に次の URL を取得させます:

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

透明度

画像が完全に不透明である場合は、JPEG 形式を使用します。画像に不透明な部分と透明な部分がある場合は、PNG と JPEG のタイルを混在させることができます。透過値のあるタイルについては必ず PNG 形式を使用します。形式を混在させる必要がある場合は、画像ファイルの <href> ではファイル拡張子を指定せずに、各タイルのファイル名にファイル拡張子を入れるようにします。

トップへ戻る