Mini Tokyo 3D バージョン 2.3.0 リリース

Mini Tokyo 3D バージョン 2.3.0 がリリースされました (GitHub)。2.2.0 からの追加・修正機能を見ていきましょう。

JR八高線の八王子〜小川町間、川越線の川越〜高麗川間が開通

八王子と高崎を結ぶJR八高線の、八王子から東武東上線と接続する小川町までが開通しました。同時に、大宮〜川越間が開通していたJR川越線高麗川まで延伸して全線が開通しました。

八高線高麗川川越線に接続しており、八王子〜高麗川〜川越は電化しているため、この区間は直通運転が行われています。一方、八高線高麗川以北は非電化区間のため、運行は独立しています。両線とも単線なので、途中の駅で列車交換(対向列車の待ち合わせ)を行う、ピタゴラスイッチ的な動きの様子が見られます。

駅選択時のハイライト表示

駅にマウスポインタを合わせた時に、ポップアップ表示と共に駅の輪郭をハイライトして注目している場所がわかりやすくなりました。

駅出口情報の表示

駅をクリックまたはタップして選択すると、ズームインして駅出口の場所を表示するようになりました。ぞれぞれ地図上に出口番号が出るほか、出口の一覧も表示されます。一覧の中で出口の名前にマウスポインタを合わせたり、タップをすると地図上の出口の名前がハイライトされ、場所の確認をすることができます。

地上モードに切り替えるとビルや歩道との対応もわかりやすいです。まずは銀座線の全駅に対応。順次、地下鉄の駅をカバーする予定です。

マップスタイルの更新による道路・地下街の詳細表示

Mapboxのマップスタイルを更新して、ズームレベル15以上で道路と地下街の詳細なポリゴンデータが表示されるようになりました。この機能は、日本独自のゼンリンの地図データがベースになっているもので、しばらく前からデータは提供されていたのですが、ようやく Mini Tokyo 3D でも対応ができました。

右がこれまでのマップスタイルで、左が新しくなったマップスタイルです。道路や歩道が正確な幅で描かれ、中央分離帯の緑や日比谷公園の遊歩道も見分けられるようになっているのがおわかりいただけると思います。

f:id:nagixx:20200815204445p:plain

地下表示モードでは、下のように大手町〜東京〜銀座の地下街が大きく広がりを持っているのがわかります。

f:id:nagixx:20200815204547p:plain

花火レイヤーの追加

3D マップ上で花火大会を再現しました。7/23〜26の4連休と8/8〜10の3連休で、隅田川花火大会、足立の花火、幕張ビーチ花火フェスタ、みなとみらいスマートフェスティバル、神宮外苑花火大会江戸川花火大会、TOKYOいたばし花火フェスティバル/戸田橋花火大会をバーチャル開催。再生モードで時間をさかのぼれば、花火の打ち上げを見ることができますよ。

JR特急列車の追加

特急サフィール踊り子E261系、特急踊り子E259系2000番台、寝台特急サンライズ出雲サンライズ瀬戸285系、特急ひたち・ときわE657系、特急スワローあかぎ・あかぎ・草津651系に対応。

イベントリスナAPIの追加

バージョン 2.3.0 では MiniTokyo3D クラスにイベントリスナの追加・削除を行う次のメソッドが追加されました。

メソッド 説明
off イベントリスナを削除
on イベントリスナを追加
once 一度だけ呼び出されるリスナを追加

上記のメソッドで指定するイベントリスナを使用して、マップで発生した次のイベントを受け取ることができます。

イベント 説明
boxzoomcancel 「ボックスズーム」操作がキャンセル
boxzoomend 「ボックスズーム」操作が終了
boxzoomstart 「ボックスズーム」操作が開始
click ポインティングデバイを押して離す
contextmenu マウスの右ボタンがクリック
dblclick ポインティングデバイスを2回連続して押して離す
drag 「移動のためのドラッグ」操作中
dragend 「移動のためのドラッグ」操作が終了
dragstart 「移動のためのドラッグ」操作が開始
error エラーが発生
load 必要なリソースのダウンロード・表示が完了
mousedown ポインティングデバイスが押される
mousemove ポインティングデバイスが移動
mouseover カーソルがマップまたは子要素に入る
mouseup ポインティングデバイスが離された
move あるビューから別のビューへのアニメーション遷移中
moveend あるビューから別のビューへの遷移を完了
movestart あるビューから別のビューに遷移する直前
pitch 傾きの状態遷移アニメーションの間
pitchend 傾きが変化し終わった直後
pitchstart 傾きが変化し始める直前
resize マップのサイズが変更
rotate 「回転のためのドラッグ」操作中
rotateend 「回転のためのドラッグ」操作が終了
rotatestart 「回転のためのドラッグ」操作が開始
touchcancel touchcancel イベントが発生
touchend touchend イベントが発生
touchmove touchmove イベントが発生
touchstart touchstart イベントが発生
wheel wheel イベントが発生
zoom あるズームレベルから別のズームレベルへのアニメーション遷移中
zoomend あるズームレベルから別のズームレベルへの移行を完了した直後
zoomstart あるズームレベルから別のズームレベルへの移行を開始する直前

詳細は Mini Tokyo 3D 開発者ガイドをご覧ください。