Google Earthのコンテンツでリッチな表現を

第3回 オーバーレイ3段活用

この記事を読むのに必要な時間:およそ 6 分

スクリーンオーバーレイ

スクリーンオーバーレイは非常に変わったオーバーレイで,常に画面の定位置に表示し続ける目的で利用されます。そのため,利用目的は通常のオーバーレイと異なり,凡例であったり,補足説明的なものを表示するなど,脇役的な存在です。

Region設定を駆使することで,場所によって説明の異なる画像を表示させることができるため,非常に使いどころの多いオーバーレイといえます。設定が若干難しいので,パターンを覚えて使い分けをするとよいでしょう。まずは,画像とサンプルコードを見てみましょう。

図4 統計データとその凡例図

図4 統計データとその凡例図

とある統計データをポリゴンで記述し,その色の違いを統計データの数値の差としたものに添付したスクリーンオーバーレイのサンプルが図4です。凡例にスクリーンオーバーレイを採用しており,どんなに画面が動こうとも,凡例は消えることはありません。

USGSのリアルタイム地震情報ネットワークリンクで採用されている凡例などでも使われています。こちらは透過のpng画像を用いて,見た目も非常にGoodな凡例となっています。

では,上記スクリーンオーバーレイのコードを見てみましょう。

<ScreenOverlay>
  <name>legend</name>
  <visibility>0</visibility>
  <Icon>
    <href>/images/hanrei.bmp</href>
  </Icon>
  <overlayXY x="0.5" y="1" xunits="fraction" yunits="fraction"/>
  <screenXY x="0.5" y="150" xunits="fraction" yunits="pixels"/>
  <rotationXY x="0" y="0" xunits="fraction" yunits="fraction"/>
  <size x="0" y="0" xunits="fraction" yunits="fraction"/>
</ScreenOverlay>

スクリーンオーバーレイは,<ScreenOverlay>というタグを記述し,その下のほうで,いろいろなオプション設定を施します。ここがポイントで,fractionでの指定,pixelsでの指定をそれぞれのXYに施すことで実現しています。最初のうちは概念を理解できていないと思った位置に表示できないでしょう。そこで,図表にまとめてみました。

配置位置 設定
フルスクリーン <overlayXY x="0.5" y="0.5" xunits="fraction" yunits="fraction"/> <screenXY x="0.5" y="0.5" xunits="fraction" yunits="fraction"/> <rotationXY x="0.5" y="0.5" xunits="fraction" yunits="fraction"/> <size x="1" y="1" xunits="fraction" yunits="fraction"/>
左上 <overlayXY x="0" y="1" xunits="fraction" yunits="fraction"/> <screenXY x="0" y="1" xunits="fraction" yunits="fraction"/> <rotationXY x="0" y="0" xunits="fraction" yunits="fraction"/>
右上 <overlayXY x="1" y="1" xunits="fraction" yunits="fraction"/> <screenXY x="1" y="1" xunits="fraction" yunits="fraction"/> <rotationXY x="0" y="0" xunits="fraction" yunits="fraction"/> <size x="0" y="0" xunits="fraction" yunits="fraction"/>
左下 <overlayXY x="0" y="-1" xunits="fraction" yunits="fraction"/> <screenXY x="0" y="0" xunits="fraction" yunits="fraction"/> <rotationXY x="0" y="0" xunits="fraction" yunits="fraction"/> <size x="0" y="0" xunits="fraction" yunits="fraction"/>
右下 <overlayXY x="1" y="-1" xunits="fraction" yunits="fraction"/> <screenXY x="1" y="0" xunits="fraction" yunits="fraction"/> <rotationXY x="0" y="0" xunits="fraction" yunits="fraction"/> <size x="0" y="0" xunits="fraction" yunits="fraction"/>
真中下 <overlayXY x="0.5" y="-1" xunits="fraction" yunits="fraction"/> <screenXY x="0.5" y="-1" xunits="fraction" yunits="pixels"/> <rotationXY x="0" y="0" xunits="fraction" yunits="fraction"/> <size x="0" y="0" xunits="fraction" yunits="fraction"/>
真中上 <overlayXY x="00.5" y="1" xunits="fraction" yunits="fraction"/> <screenXY x="0.5" y="1" xunits="fraction" yunits="fraction"/> <rotationXY x="0" y="0" xunits="fraction" yunits="fraction"/> <size x="0" y="0" xunits="fraction" yunits="fraction"/>
真中下(150pixel上) <overlayXY x="0.5" y="1" xunits="fraction" yunits="fraction"/> <screenXY x="0.5" y="150" xunits="fraction" yunits="pixels"/> <rotationXY x="0" y="0" xunits="fraction" yunits="fraction"/> <size x="0" y="0" xunits="fraction" yunits="fraction"/>

上記の一覧表の中で,フルスクリーンというものがありますが,これはまさに全画面にスクリーンオーバーレイを貼りつけるものです。⁠そんなことしたら,何も見えないじゃないか?」という疑問も出てきますが,PNGやGIFの透過設定を用いることで,以下の図のような面白いことができます。

図5 透過PNGで穴開きスクリーンオーバーレイ

図5 透過PNGで穴開きスクリーンオーバーレイ

いかがでしょうか? ウィンドウをリサイズしても,スクリーンオーバーレイもリサイズされるので,常にフィットした状態で,このオーバーレイが表示されます。これを応用したのが,話題になった,コックピットを模したスクリーンオーバーレイです。

フォトオーバーレイ

フォトオーバーレイは,Google Earthのオーバーレイの中でももっとも派手な機能を持つオーバーレイで,標準的なものはGoogle Earth上でも作成することができます。ですが,このオーバーレイはそのタグを理解するというよりも,画像の加工の技術が問われます。たとえば,以下のようなものを作成するために使われます。

  • 超高解像度画像の管理(標準レイヤでいうところのギガピクセルフォト)
  • Google Street Viewレイヤにあるような,360°パノラマな世界の実現
  • 写真の管理

もちろん,通常の写真でも,現地の風景を撮りためて,公開するのに適していますので,写真愛好家にとってはもっとも利用価値があるといえます。まずは,どんなものがあるのかを見てみることにしましょう。

図6 シンプルなフォトオーバーレイ

図6 シンプルなフォトオーバーレイ

図6にあるものは,極めてシンプルな,Google EarthのUI上から作成した,フォトオーバーレイの一例です。画面上部のカメラのアイコンをダブルクリックすると,図のようなフォトビューアのようなスタイルに変化し,解像度の大きな写真ほどより詳細に,より繊細にフォト画像を見ることができます。

このフォトビューアの操作感覚はGoogle Earthと同じです。ここまではKMLを知らずとも作成ができるのですが,Google Street ViewやQuickTime VRのような360°パノラマなフォトオーバーレイを作成するとなると,現時点ではKMLを書く必要があります。まずは,このフォトオーバーレイのコードを見てみましょう。

<PhotoOverlay>
  <name>ジェットフォイルから見た帆船</name>
  <visibility>0</visibility>
  <Camera>
    <longitude>138.822523815</longitude>
    <latitude>38.073268312</latitude>
    <altitude>26406.04000000032</altitude>
    <heading>0.2400000000000043</heading>
  </Camera>
  <Icon><href>jet.JPG</href></Icon>
<shape> ractangle </shape>
  <ViewVolume>
    <leftFov>-25</leftFov>
    <rightFov>25</rightFov>
    <bottomFov>-19.275</bottomFov>
    <topFov>19.275</topFov>
    <near>297.867</near>
  </ViewVolume>
  <Point>
    <altitudeMode>relativeToGround</altitudeMode>
    <coordinates>138.822523815,38.073268312,26406.04000000032</coordinates>
  </Point>
</PhotoOverlay>

専用のPhotoOverlayタグで囲まれたものが1つのコンテンツとなります。特徴的なのは,その中でも<Camera>タグと,<ViewVolume>タグです。<Camera>はコンテンツを見る際の視点をコントロールするタグなのですが,これについては次回詳細に紹介します。

今回のようなシンプルなサンプルである場合は,PhotoOverlayのタグをある程度省略できます。それが<shape>タグで,この中にあるモードで,通常のフォトオーバーレイや,Google Street Viewのようなモードを切り替えています。

また,写真の見せ方をコントロールしているのが,次の<ViewVolume>タグで,ここは,様々な制限や,角度の調整を行う非常に重要な要素です。これだけでもボリュームのある内容ですので,Google Street Viewのような見せ方に焦点を当てて,見てゆくことにしましょう。

図7 ちょっと強引にストリートビューにしてみた

図7 ちょっと強引にストリートビューにしてみた

図7は,Google Street Viewでも採用されているものと全く同じスタイルで,先ほどの画像を強引にStreet Viewにしてみたものです。本来ならば左右360°のパノラマ画像を使用すべきところですが,筆者はパノラマカメラやパノラマ撮影用機材を持ち合わせていないため,少々見難いものになってしまいました。

さて,Street Viewで採用されているこのモード,実は左端にいくと右端から出てきます。つまり,360°ぐるっと一回りできるように作成されているのです。画像がパノラマならば,まさにその場所をくるっと周りを見ることが可能です。この際に使われているコードを見てみることにしましょう。

<PhotoOverlay>
  <name>強引にStreet View</name>
  <Camera>
    <longitude>138.822523815</longitude>
    <latitude>38.073268312</latitude>
    <altitude>26406.04000000032</altitude>
    <heading>0.2400000000000043</heading>
    <tilt>0</tilt>
    <roll>0</roll>
  </Camera>
  <Icon><href>3-7.jpg</href></Icon>
  <shape>cylinder</shape>
  <ViewVolume>
    <leftFov>-180</leftFov>
    <rightFov>180</rightFov>
    <bottomFov>-40</bottomFov>
    <topFov>40</topFov>
    <near>2</near>
  </ViewVolume>
  <Point>
    <altitudeMode>relativeToGround</altitudeMode>
    <coordinates>138.822523815,38.073268312,26406.04000000032</coordinates>
  </Point>
</PhotoOverlay>

これはパノラマ写真に最適なモードで,<shape>でCylinderが指定されています。これで,まさに筒のように画像が丸められるわけです。さらに<ViewVolume>タグないの<leftFov>および,<rightFov>にて,それぞれ180と,-180が指定されています。つまり左右180°,合計360°の輪がこれで作成されていることになります。

採用した写真によっては縦に潰れて表示されるものもあるでしょう。その場合には<bottomFov>と<topFov>をそれぞれ数字を上下させることで,丁度よい画像の上下の大きさをコントロールすることができます。いずれの場合においても,数字の指定は度数で指定し,それぞれ対を成すように設定するのがベストです。

また,より高度な上下左右360°パノラマ写真が用意することができるのであるならば,<shape>をsphereに変え,<bottomFov>-90</bottomFov>,<topFov>90</topFov>を指定することで,球体のパノラマ写真ビューが完成します。なお,それぞれのタグの値の範囲は以下の表の通りです。

<shape>がractangleの場合
topFov 90°未満
bottomFov -90°以上
<shape>がCylinder、Sphereの場合
-90° < bottomFov <topFov < 90°
-180°< leftFov < rightFov < 180°

この値の設定のルールに反した設定の場合は正しく表示されません。特に<shape>がCylinder,Sphereの場合に,それぞれのViewVolume内のタグの数値は影響しあいますので,常に値を超えたり,クロスしないよう注意が必要です。

いかがでしたでしょうか? このほかにも画像を管理するテクニックはまだまだあるのですが,誌面の都合上,特に注目度の高いものにしぼって紹介しました。特に後半のPhotoOverlayについては,まだまだツールが充実しておらず,KMLの知識が必要となっており,これらを容易に扱えるようなツールや,Google Earth自体に実装されることが望まれます。

著者プロフィール

郡司裕之(ぐんじひろゆき)

Google Earthを主に取り扱っているウェブサイト「GE Maniacs」の管理人。過去に2冊のGoogle Earthに関する書籍を執筆。一つはGoogle Earth全般の操作に関する書籍,もう一つはKML / COM APIのKMLに関する書籍のKML部分を担当。

無類の地図好きで,夢のツールGoogle Earthを普通に使うに飽きたらず,道具として,また新しい技術習得の土台としての利用を試みている毎日。

URLhttp://virtual.haru.gs/

コメント

コメントの記入