![]()
アルプスラボの大圏APIのルートをYahoo!地図情報Flash版でアニメーションさせる
フナミタカオです。
Yahoo!地図情報Flash版が世界対応したときから、作りたいと思っていたのですが、やっとできたので、サンプルソースとともに、ご紹介いたします。
アルプスラボルートでは、ルートをアニメーション表示させることができますが、範囲は国内に限られています。アルプスラボが2月にリリースした、大圏APIは、世界中の都市(都市じゃなくてもいいいし、もちろん国内も含めて)の2点間の最短距離をkmlで返してくれます。
アルプスラボルートは国内のみなので、世界対応の大圏APIは再生できなかったのですが、世界対応したYahoo!地図情報Flash版を使うと、大圏ルートアニメーションが可能になります。
左上の、右向き矢印を押して、アニメーションをさせてみてください。
アイコンが、海の上を飛んでいきますでしょうか?
また大圏APIのほうは出発地と到着地の緯度経度をパラメーターで渡すと、kml形式でルートを返してくれます。
まずは、このKMLをPOIXに変換する必要があります。
そこで、今回は、
コード自体は結構シンプルです。(というか、かなり、地味です。kmlをXMLとしてパースし[ 'kml/Placemark/LineString/coordinates']を取り出し、coordinatesに書かれている緯度経度を、配列に変換して、その緯度経度一覧を、テンプレートで書き出すという流れになります。
ソースを参考にしてみてください。
・使い方
y_map_taiken.tar.gzをcgiが動かせるところで解凍(あるいは、解凍後アップロードでもOK)
・構成
y_map_taiken
- index.cgi (755)
- taiken_route.cgi (755)
- crossdomain.xml (644)
・設定
このindex.cgiの27,33行目にご自身のYahoo!検索APIのapiidをセット
index.cgi ,taiken_route.cgiの一行目を環境に合わせて、必要なら書き換えてください。
#!/usr/local/bin/ruby
あとは権限を確認してcgiを呼び出してください。
ソースには、crossdomain.xmlが含まれていますが、このファイルは、Flash再生時に、別のドメインから、データを取得するときに必要になってきます。
(※それと、このcrossDomain0=は相対パスでは、機能しないかもしれません。urlをフルパスで指定するひつようがあるのかしら.....) また出発地、到着地をパラメター指定したかったので、index.cgiと、indexページもcgi化しています。
動作するサンプルはこちら
http://mtl.recruit.co.jp/sandbox/funami/y_map_taiken/index.cgi?p=51.508903,-0.125828,35.681048,139.767283
ロンドンから東京
http://mtl.recruit.co.jp/sandbox/funami/y_map_taiken/index.cgi?p=35.681048,139.767283,51.508903,-0.125828
東京からロンドン
http://mtl.recruit.co.jp/sandbox/funami/y_map_taiken/index.cgi?p=51.508903,-0.125828,40.7847,-73.9874
ロンドンからニューヨーク
参考
・地球上の最短コース(大圏コース)が取得できるAPI
・ALPSLAB api - 大圏API
・Yahoo!デベロッパーネットワーク>Yahoo!地図情報
アルプスラボルートでは、ルートをアニメーション表示させることができますが、範囲は国内に限られています。アルプスラボが2月にリリースした、大圏APIは、世界中の都市(都市じゃなくてもいいいし、もちろん国内も含めて)の2点間の最短距離をkmlで返してくれます。
アルプスラボルートは国内のみなので、世界対応の大圏APIは再生できなかったのですが、世界対応したYahoo!地図情報Flash版を使うと、大圏ルートアニメーションが可能になります。
まずは、実際にアニメーションしてみよう
kmlをpoixに変換
Yahoo!地図情報Flash版では、ルートをPOIXという形式で外部ファイルとして指定します。また大圏APIのほうは出発地と到着地の緯度経度をパラメーターで渡すと、kml形式でルートを返してくれます。
まずは、このKMLをPOIXに変換する必要があります。
そこで、今回は、
1.出発地と到着地の緯度経度をパラメーターで渡すこの1から3を行う、cgiを用意し、taiken_route.cgiとしています。
2.大圏APIを呼び出しkmlを取得(世界座標系)
3.kmlをpoixに変換
Yahoo!地図情報のルート表示の座標系は日本座標系なのですが、大圏レベルであれば気にしなくてもよさそうなので、変換はしていません、
コード自体は結構シンプルです。(というか、かなり、地味です。kmlをXMLとしてパースし[ 'kml/Placemark/LineString/coordinates']を取り出し、coordinatesに書かれている緯度経度を、配列に変換して、その緯度経度一覧を、テンプレートで書き出すという流れになります。
ソースを参考にしてみてください。
サンプルコード
なおサンプルはこちらの利用規約に同意のうえでご利用ください。利用規約に同意の上、Yahoo!地図情報を大圏ルートでアニメーションさせるサンプルをダウンロード
・使い方
y_map_taiken.tar.gzをcgiが動かせるところで解凍(あるいは、解凍後アップロードでもOK)
・構成
y_map_taiken
- index.cgi (755)
- taiken_route.cgi (755)
- crossdomain.xml (644)
・設定
このindex.cgiの27,33行目にご自身のYahoo!検索APIのapiidをセット
index.cgi ,taiken_route.cgiの一行目を環境に合わせて、必要なら書き換えてください。
#!/usr/local/bin/ruby
あとは権限を確認してcgiを呼び出してください。
ソースには、crossdomain.xmlが含まれていますが、このファイルは、Flash再生時に、別のドメインから、データを取得するときに必要になってきます。
(※それと、このcrossDomain0=は相対パスでは、機能しないかもしれません。urlをフルパスで指定するひつようがあるのかしら.....) また出発地、到着地をパラメター指定したかったので、index.cgiと、indexページもcgi化しています。
動作するサンプルはこちら
http://mtl.recruit.co.jp/sandbox/funami/y_map_taiken/index.cgi?p=51.508903,-0.125828,35.681048,139.767283
ロンドンから東京
http://mtl.recruit.co.jp/sandbox/funami/y_map_taiken/index.cgi?p=35.681048,139.767283,51.508903,-0.125828
東京からロンドン
http://mtl.recruit.co.jp/sandbox/funami/y_map_taiken/index.cgi?p=51.508903,-0.125828,40.7847,-73.9874
ロンドンからニューヨーク
次のステップ
大圏ルートをアニメーションで移動できるようになりましたが、大圏ルート自体を、線で常時できるといいですよね。 そのためには、ポリライン表示のリファレンスにもあるようにjavascriptから、経路の配列を作成しておきaddPolylineにて追加することになります。 それと、もうひとつは、出発地、到着地の検索機能もほしいですよね。googleMapsAPIのジオコーダーや世界ジオコーダーAPIを使っ、緯度経度を取得できるようにdけいればと思います。 そのへんは、また、つぎの機会に。参考
・地球上の最短コース(大圏コース)が取得できるAPI
・ALPSLAB api - 大圏API
・Yahoo!デベロッパーネットワーク>Yahoo!地図情報
