|
最新記事
(06/29)
(06/04)
(06/03)
(05/30)
(05/28)
|
ニュース
この欄には、このブログの内容に関連するニュースを掲載する予定です。
|
お知らせ
この欄には管理人からのお知らせなどを掲載します。
|
ＶＭＬで山手線路線図
前回調べた山手線の駅の経度と緯度。これを使って山手線の路線図を作りましょう。座標データを扱うには、ＶＭＬが良さそうです。ＶＭＬの勉強も兼ねて挑戦です。
この絵は、作成したＶＭＬのスクリーンショットをＰＮＧで保存し、縮小したものです。文字がつぶれている部分があるのは残念ですが、クリックするともっと大きなＰＮＧ画像が見れます。実際にＶＭＬで記述したＨＴＭＬファイルは「ＶＭＬ山手線路線図」です。当然、元のＶＭＬの方がきれいです。
数式等を工夫すれば、経度緯度のデータをそのまま利用できるのかもしれませんが、わかりやすくするために、座標を変換します。その理由は次の２つです。
・北緯の原点は南すなわち地図上では下になるが、ディスプレイの原点は上。
・緯度と経度では、距離の尺度が異なる。
まず左上隅を決めました。池袋の北西の適当な場所を基準とします。北緯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で駅名を表示させます。
このようにしてできたのが「ＶＭＬ山手線路線図」です。駅の離れ具合がわかりますね。
今回の座標は駅だけですが、駅の間の座標も入れれば、線路の形はもっとリアルになるでしょう。
参考のためＨＴＭＬファイルのＶＭＬ部分のソースの一部を下に記載しておきます。ＶＭＬを扱ったのは、今回がはじめてなので、おかしな部分、洗練されてない部分があると思います。けれども、ＶＭＬの初心者としては、このぐらいがわかりやすいだろうと思いますので、あえて掲載しましょう。
<html xmlns:v="urn:schemas-microsoft-com:vml"> <head> ・・・(略） <style>v\:* { behavior: url(#default#VML); }</style> ・・・(略） </head> <body> ・・・(略） <v:group style="width:500; height:500;"> <v:shape fillcolor="#fff" strokecolor="#6c6" style="width:800; height:1400;" coordsize="8000,14000" path="m 2796,13331 l 2378,12643 1651,11762 1136,10347 ・・・(略） 3750,12334 x e"> </v:shape> <v:shape adj="2796,13331,300,180" fillcolor="#fc9" strokecolor="#c99" style="width:800; height:1400;" coordsize="8000,14000" path="m @0,@1 l @2,@3 @4,@5 @6,@7 x e"> <v:formulas> <v:f eqn="sum #0 0 #2"/> <v:f eqn="sum #1 0 #3"/> <v:f eqn="sum #0 0 #2"/> <v:f eqn="sum #1 #3 0"/> <v:f eqn="sum #0 #2 0"/> <v:f eqn="sum #1 #3 0"/> <v:f eqn="sum #0 #2 0"/> <v:f eqn="sum #1 0 #3"/> </v:formulas> <v:rect style="width:120; height:48;margin-left:5px;" > <v:textbox style="font-size:12px;">大崎</v:textbox> </v:rect></v:shape> <v:shape adj="2378,12643,420,180" fillcolor="#fc9" strokecolor="#c99" style="width:800; height:1400;" coordsize="8000,14000" path="m @0,@1 l @2,@3 @4,@5 @6,@7 x e"> <v:formulas> <v:f eqn="sum #0 0 #2"/> <v:f eqn="sum #1 0 #3"/> <v:f eqn="sum #0 0 #2"/> <v:f eqn="sum #1 #3 0"/> <v:f eqn="sum #0 #2 0"/> <v:f eqn="sum #1 #3 0"/> <v:f eqn="sum #0 #2 0"/> <v:f eqn="sum #1 0 #3"/> </v:formulas> <v:rect style="width:120; height:48;margin-left:5px;" > <v:textbox style="font-size:12px;">五反田</v:textbox> </v:rect></v:shape> ・・・(略） </v:group> ・・・(略） </body> </html>
全部のソースは、「ＶＭＬ山手線路線図」をブラウザでソース表示して見てください。
|
QRコード
|