路線図を滑らかに描くには、ベジェ曲線を使う必要がある。Illustratorなどで使われてる、こういうやつ。

参考リンク：中学生でもわかるベジェ曲線 – Rui's Blog
しかしながら、canvasやCreateJSには、ベジェ曲線を描くメソッドはあるが、ベジェ曲線の関数をゲットできるわけではない。
路線図上に列車を走らせるには、ベジェ曲線から一定間隔離れた点を連続してゲットする必要がある。曲線と直交する単位ベクトルを求めて一定倍して、その軌跡を作らないと列車が走れない。そのためには、曲線の傾きが分からないと垂線が引けない。せめて近似式でもいいから関数を作れないか、と思って探していたら、あった。
ベジェ曲線 – からすの日記
なぜこの式になるのかは改めて勉強する必要があるが、これなら曲線を、直線が連続したものとして近似できる。しかもn分割できる。通過点の配列を作るので、隣り合う2点をもってこれば変換は楽勝だ。列車の軌跡が簡単な計算で作れそうだ。助かった。
さて、ベジェ曲線のためのテーブルも必要になる。次のように定義しよう。

• tnhalfway
  • linename 所属する路線名
  • kilo 営業キロ(必ず駅と駅の間の値にする)
  • latitude 緯度
  • longitude 経度
  • sp1lat ベジェ曲線の制御点1 経度
  • sp1lon ベジェ曲線の制御点1 緯度
  • sp2lat ベジェ曲線の制御点2 経度
  • sp2lon ベジェ曲線の制御点2 緯度

kiloの値は、位置関係を表すだけの便宜的なものでよさそうだ。直線の距離を足せば合計の直線の長さが計算できるから、駅と駅の間の何%の所の点なのか簡単に計算できる。読み込み後、計算しなおせばよい。
少し前に、いま絶対座標を緯度と経度の小数点以下4桁まで、で持っているけど、精度が良くないんじゃないか。。と思って、経度0.0001度の距離を計算してみたら、約10mだった(計算式は忘れた)。路線図として表示するには、まあまあ許容範囲か、と思われる。wikipediaに載ってる緯度経度情報はおおむね、小数点以下6桁まで表示されている。誤差0.1mまで計算できるなら完璧だ。入力しなおすのはちょっとうんざりだけど、仕方ない。やってみよう。
明日はせめて直線だけでも線路が描けたらいいな！

Tweet