【krpano】画面端にミニマップを付けて、現在位置と向きを表現したい
建築のパノラマだったらあるあるの要望だと思います。
住宅であれば平面図を、商業施設であればフロアマップ画像なんかを画面の隅っこに用意して現在位置を表現してあげたいものです。さらにはストリートビューのようにユーザーの向いている方向もリアルタイムで示してあげたい。
krpanoであれば必要なプログラムはプラグインで用意されていて、画像なんかも数種類用意されていますので簡単に実装できます。
完成後デモ
左上の地図と現在位置、向きの表現を作っていきます。
別ウインドウで見る場合はこちら
やり方
サンプル（Example）に地図付きツアー「krpano/viewer/examples/demotour-winecellar/」があるのでそれを参考にしてみましょう。
すると、プラグイン（Plugins）を使用していることがわかります。これを参考にして自分のツアーに取り込めばOKだということです。
０．下準備
０－１．画像を用意
・地図の画像。
・現在位置を示すアイコン。できれば2つ用意します。面倒であれば1画像で全部まかなっても構いません。
1つは、現在位置を示すもの。
2つは、選択できる位置を示すものです。
０－２．プラグインを追加
radar.jsファイルをpluginフォルダに格納してください。radar.jsファイルはkrpanoを通常インストールしたのであれば C:\Program Files\krpano-1.19-pr15\viewer\plugins\ フォルダにあります。
１．マップを追加する
tour.xmlに次のコードを追加します。
<layer name=”map” url=”img/gifulibmap.png” keep=”true” handcursor=”false” capture=”false”
align=”lefttop”
scale=”0.4″ scalechildren=”true”
onclick=”openmap();”
/>
すると、こんな風に画像がでました。
サイズを変えたいときは scale の値を変更してください。単位は百分率です、1.0＝100%。
２．マップを拡大縮小できるようにする
これじゃあマップが小さい、かといって大きくすると邪魔・・・ということでマップをタップすると拡大縮小するようにしましょう。
tour.xmlに次のコードを追加します。
<action name=”openmap”>
set(layer[map].onclick, closemap(); );
layer[map].changeorigin(center,center);
set(bigscale,1);
if(layer[map].imagewidth GT stagewidth, div(bigscale, stagewidth, layer[map].imagewidth); );
tween(layer[map].x, 0);
tween(layer[map].y, 0);
tween(layer[map].scale, get(bigscale));
</action>
<!– 地図が拡大中にタップすると、もとの大きさと位置に戻る –>
<action name=”closemap”>
set(layer[map].onclick, openmap(); );
layer[map].changeorigin(lefttop,lefttop);
tween(layer[map].x, 0);
tween(layer[map].y, 0);
tween(layer[map].scale, 0.2);
</action>
すると、地図をクリックすることで拡大縮小ができるようになりました。
３．現在位置を追加する
次に、現在位置を追加しましょう。
tour.xmlに次のコードを追加します。
<style name=”mapspot” keep=”true” url=”img/location.png” parent=”map” align=”lefttop” edge=”center” scale.mobile=”2″ scale=”0.3″ />
<!– 現在位置を示す画像を表示 –>
<layer name=”activespot” keep=”true” url=”img/location_active.png” scale.mobile=”2″ scale=”0.3″ zorder=”2″ />
<layer name=”spot1″ style=”mapspot” x=”480″ y=”325″ zorder=”1″ onclick=”mapspot_loadscene(scene_mitte);” />
すると、現在位置ができました。
微調整は x と y で行います。
もし自動化やシステム化をしたければ、CG座標系と画像ピクセルとで線形補間すれば実現可能ですね。
４．視点の向きを追加する
次に、ユーザーがどっちを向いているのかわかるように向きを追加しましょう。krpanoでは「レーダー」と呼んでいます。
tour.xmlに次のコードを追加します。
<layer name=”radar” keep=”true”
url.html5=”%SWFPATH%/plugins/radar.js”
align=”center” zorder=”1″
scale.mobile=”1″
fillalpha=”0.5″ fillcolor=”0x7F5F3F”
linewidth=”1.0″ linecolor=”0xE0E0A0″ linealpha=”0.5″
/>
<– sceneのonstartに関数を追加して、sceneの中にactionを追加 –>
<scene onstart=”updateradar();” name=”scene_R0010237-2″ title=”雑誌コーナー” thumburl=”panos/R0010237-2.tiles/thumb.jpg” >
<!– レーダーの初期向きと現在位置画像の位置合わせ –>
<action name=”updateradar”>
set(layer[activespot].parent, spot1);
set(layer[radar].parent, spot1);
set(layer[radar].heading, -95);
</action>
すると、レーダーがでましたね。
パノラマ画像の向きと、レーダーの向きの調整は手作業で調整します。headingを変更しましょう。0が右方向(スクリーンの+X方向)です。
このレーダー、プラグインとして準備されているだけあって、視野角にも追従します。がいいですね。
透過率なんかも縁と塗りの部分でそれぞれ色と透過率が変更できます。
これでまあ一通り実装できましたが、さらに複数の位置の考慮をしてみましょうか。
５．ツアーの全視点情報を追加する
私のサンプルではパノラマ画像を3つ用意しています。3シーンです。ということで、
・ミニマップにも3つ追加してみましょう。
・現在閲覧中の位置は赤色、その他は緑色のアイコンを表示するようにしてみます。
tour.xmlのsceneに次のコードを追加します。
<layer name=”spot2″ style=”mapspot” x=”530″ y=”280″ zorder=”1″ onclick=”mapspot_loadscene(scene_mitte);” />
<layer name=”spot3″ style=”mapspot” x=”370″ y=”200″ zorder=”1″ onclick=”mapspot_loadscene(scene_mitte);” />
<!– 各sceneにonstartとactionを追加 –>
<scene onstart=”updateradar();” title=・・・略・・・ >
<!– レーダーの初期向きと現在位置画像の位置合わせ –>
<action name=”updateradar”>
set(layer[activespot].parent, spot1);
set(layer[radar].parent, spot1);
set(layer[radar].heading, -95);
</action>
これだけで出来ちゃいます。
ソースコード
Githubに全部アップロードしているのでよければご参照を。画像もそのままどうぞ。
https://github.com/christinayan01/demo/tree/master/krpano20211013
参考サイト
・How to restrict some hotspots appearing when in VR mode – krpano.com Forum
