この記事は、ベクトルタイル Advent Calendar 2021 の14日目の記事です。
Youtube とか、あとハッカソンとかでよく見るスマホを使ったホログラムでベクトルタイルベースの地図を表示したらどうかなーということで試してみました。
ホログラムディスプレイの作成
いろいろなところで紹介されているので、詳細は割愛しますが、ホームセンターにいけば一通りの部品が3千円ぐらいで揃うのではないかと思います。
実際に僕が買ったものは以下の通り。（実際には他にも買いましたが、意味がなかったものが多数ありました。笑）
- プラスチック製のダンボールみたいなやつ。700円ぐらい？ カッターナイフで簡単に切れるので便利だった。
- 透明アクリルボード。800円ぐらいだった気がする。
- アクリルボード用のカッター
- スマホを支えるための木の棒
- 接着剤。（アロンアルファは後述しますが非推奨）
あとは、スマホですね。
出来上がったのは以下のような感じ。
寸法とかはほんとに雑で、すべて現物合わせでどうにかした感じです。
単純に考えれば、透明アクリルボードは45度にして、上にスマホを水平におけばいいのですが、それだと真横から見ないといい感じにならないので、実際に設置する場所に応じて微調整をしたほうがいい感じになるようですね。
地図の用意
イメージ的に3Dの地図がいいかなということで、Mapbox GL JS を使いました。
仕組み的に鏡像になってしまうので、地図を左右反転させる必要があって、どうしよっかなーと思ってたのですが、やってみたら CSS で１行でおわりました。
#map {
position: absolute; top: 0;
bottom: 0;
width: 100vw;
transform: scaleX(-1); /* 左右を反転させる */
}
実験
実際に地図を表示してみた感じは以下の通り。
暗いので画面がオフの状態のMacの上で表示してみました。。。
というわけで、結果はイマイチですが、もっと時間をかけていろいろ試してみるといいかもしれません。