ＶＭＬで山手線路線図

前回調べた山手線の駅の経度と緯度。これを使って山手線の路線図を作りましょう。座標データを扱うには、ＶＭＬが良さそうです。ＶＭＬの勉強も兼ねて挑戦です。

この絵は、作成したＶＭＬのスクリーンショットをＰＮＧで保存し、縮小したものです。文字がつぶれている部分があるのは残念ですが、クリックするともっと大きなＰＮＧ画像が見れます。実際にＶＭＬで記述したＨＴＭＬファイルは「ＶＭＬ山手線路線図」です。当然、元のＶＭＬの方がきれいです。

数式等を工夫すれば、経度緯度のデータをそのまま利用できるのかもしれませんが、わかりやすくするために、座標を変換します。その理由は次の２つです。
・北緯の原点は南すなわち地図上では下になるが、ディスプレイの原点は上。
・緯度と経度では、距離の尺度が異なる。

まず左上隅を決めました。池袋の北西の適当な場所を基準とします。北緯35.74度、東経139.6975度を原点としました。

この原点と各駅の緯度、経度の差を求め、それぞれ３６００倍すると秒差が出ます。東京での１秒の距離は、緯度は約３０．８メートル、経度は約２５.１メートルと言われています。これをそれぞれ緯度、経度の秒差にかけます。そうすると１メートルを１単位とした座標に変換できます。１メートルという単位は、直観的にわかりやすいものです。

たとえば、大崎の緯度経度は、北緯35.619772度 東経139.728439 度です。これを次のように変換しました。
　x=(139.728439-139.6975)×3600×25.1
　　=2796
　y=(35.74-35.619772×3600×30.8
　　=13331

各駅の新しい座標が計算できたら、これをＶＭＬに落し込みます。まずshapeエレメントで線路を多角形で作ります。次にroundrectとtextboxで駅名を表示させます。

このようにしてできたのが「ＶＭＬ山手線路線図」です。駅の離れ具合がわかりますね。

今回の座標は駅だけですが、駅の間の座標も入れれば、線路の形はもっとリアルになるでしょう。

参考のためＨＴＭＬファイルのＶＭＬ部分のソースの一部を下に記載しておきます。ＶＭＬを扱ったのは、今回がはじめてなので、おかしな部分、洗練されてない部分があると思います。けれども、ＶＭＬの初心者としては、このぐらいがわかりやすいだろうと思いますので、あえて掲載しましょう。