ヤマレコBLOG

Yahoo Maps上にルート作成（４）：Yahoo!Map上に線を描く

GPSのGPXファイル（ルート情報）を読み込んで、Yahoo! 地図情報上にルートを作成するプログラムを作成しました。その際のメモを残しておきます。

前回までで、Yahoo地図上にプロットするための座標データがそろいました。

原稿執筆時点では、Yahoo!地図情報のライブラリに線画用のライブラリが存在しないため、GPS情報のルートを書くために別の線画ライブラリを利用します。

Javascriptで線画するために、複数のブラウザで確実に動かすこと（クロスブラウザ対応）も考慮したライブラリを使うことになります。

候補としては
１）jsgraphics (wz_jsgraphics.js)
２）GoogleのExplorerCanvas
３）phpspotで紹介されていた、javascript線画用ライブラリ
などがありました。

機能的には１、２ともに同じ様な感じだった（３は試してない）ですが、２）に関しては新しくキャンバスという画像領域を定義されるのでYahooの地図上に白いキャンバスが重なってしまい、線だけを重ねる方法がわからず断念。
１）のjsgraphicsライブラリを使って線画することにしました。

リンク先のページを見てもらえると分かりますが、jsgraphicsは線を引くだけではなくて、円や長方形などの図形も描けるので、楕円のグラフを書いたりすることもできそうです。

で、この機能を使って線を１本書いてみました。Yahoo地図上に重ねて表示するために、Yahoo地図の領域「map」にキャンバス領域を重ねて表示しています。
<div id="canvas" style="position:absolute;width:200px; height:200px;"> <div id="map" style="width:200px; height:200px;"></div></div> <script type="text/javascript"> <!-- var Ymap = new YahooMapsCtrl("mapcanvas1", "36.322500,137.730583", 4); // 地図の表示 var jg_doc; jg_doc = new jsGraphics("canvas"); // canvas領域に記述することを宣言 jg_doc.setColor("#ff0000"); // 線の色は赤色 jg_doc.setStroke(4); // 線の太さは4px jg_doc.drawLine(10, 10, 100, 100); //(x,y)=(10,10)から(x,y)=(100,100)まで線を引く jg_doc.paint(); // 線画命令 // --> </script>










上記では単純な１本線だったのでdrawLine関数を使いましたが、折れ線の場合はdrawPolylineを使うこともできます。drawLineを何回も呼ぶ方法ももちろんアリです。（どちらが線画速度が速いのか分かりませんが）

⇒ 次は線画座標と経度・緯度座標の変換処理です。