SVG MapをInkscapeで作る
オープンソースの有名なドローツール、Inkscapeを用いて、SVG Mapコンテンツ(地理座標付き)を作成する方法を紹介します。概要としては、まずSVG Mapの下絵を準備します。（この下絵に地理座標が付いていれば、その上に描いたコンテンツに地理座標が付く訳です。）次に、その下絵をInkscapeに読み込ませ、その上でコンテンツを作成していきます。そして、下絵を除去し、保存します。（Inkscapeは保存方法によって地理座標メタデータを保持します。）
下絵としては、狭いエリア限定でgoogleMapsをスクリーンキャプチャして使えます。
＃狭いエリア限定の理由は、googleMapsが使用している図法がメルカトル図法のためです。SVG Mapで使用できる図法は、1次のアフィン変換で行えるもの(正距円筒図法など)のみですので、メルカトル図法が近似的に正距円筒図法とみなせないと使えません。
注意：googleMapsの画像は、コンテンツ作成時の下絵としてしか使えません。この下絵をインターネットで公開すると、googleMapsの利用規約に違反します。
それでは以下でその方法をご紹介します。
地図の中心： ---
- 画面中央にある横線[
]は、図法の違いによる誤差の"目安"です。この横線が２本見えるときは、誤差が無視できません。一本になるレベルまで拡大して使用すると良いでしょう。 （ただし、赤道上では目安になりません。） - 使いたいエリアの地図を表示して、Alt+PrintScreen(Windowsの場合)を押し、画像編集ソフト(Photoshopなど。フリーならJTrimなど)にペーストし、地図の部分を正確に切り出して(地図のサイズは、横:---pix,縦:---pixです。)、jpeg形式でsavedGoogleMap.jpgとして保存しましょう。これが下絵の画像となります。
- 次に、適当な名前のSVGデータとして、以下のSVGソースをテキストエディタでコピー＆ペースト＆同じディレクトリに保存すると、CRS付きのSVG地図データが出来上がります。これが下絵のSVG Mapデータです。 (今表示している地図に基づいてアフィン変換パラメータが計算され書き込まれています。)
- 保存したSVG Mapの下絵をInkscapeで開き、それを下絵にして、自分の主題情報を描画しましょう。その後、下絵のjpeg画像データを削除し、保存(InkscapeSVG形式：このオプションだとメタデータが保持される)すると、自分のSVG地図が完成します。
注：下絵の画像をインターネットで公開しないでください。(googleの利用規約に違反します）
SVG Source
| <?xml version="1.0" encoding="UTF-8"?> <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100" height="100"> <metadata> <rdf:RDF xmlns:rdf="http://www.w3.og/1999/02/22-rdf-syntax-ns#" xmlns:crs="http://www.ogc.org/crs" xmlns:svg="http://www.w3.org/svg"> <rdf:Description> <crs:CoordinateReferenceSystem rdf:resource="http://purl.org/crs/84" svg:transform="matrix(0,0,0,0,0,0)" /> </rdf:Description> </rdf:RDF> </metadata> <g fill-opacity="0.5"> <image x="0" y="0" width="100" height="100" xlink:href="savedGoogleMap.jpg" /> </g> </svg> |
このプログラムは、入門Ajaxの経度・緯度を調べる（地図作成作業補助サンプル）を参考にさせていただきました。
