これまで自然環境の調査には地図が重要だよねという名目のもと、地図画像→ラスター→GDAL関係の記事ばかりだったのですが、これからは地図に載せるデータの取得方法をなんとかしなければという気になっています。それで、Google Maps とか OpenLayersは、ベクトルデータをどのように扱っているのか調べました。
で、その結果ですが、ベクトルデータの描画にGoogle MapsはCanvasで、OpenLayersはSVGを利用しているということが分かりました。厳密に言うと「Google Maps は昔はSVGだったけど今はCanvasで、OpenLayersはSVGを推奨しつつCanvasにも対応している」になります。CanvasとSVGの違いは、PhotoshopとIllustratorの関係と同じで、素直に考えれば地図データ用のベクトルデータはSVGがいいような気がします。OpenLayersでの比較検討結果もそのうようになっています。ただ、なんでGoogle先生は、SVGからCanvasに変更しちゃったの？と気になります。AndroidがSVGに対応していなかったとかCanvasの方が速い(?)からとか推測されていますが、ほんとのところどうなんでしょう。
結局、今やりたいのは、スマートフォンのブラウザに地図を表示させて、そこで直接データを入力＆編集したいので、やっぱりSVGを利用するということになるのでしょう。という結論でした。（とは言うものの↓の例にあるようにGoogle MapMarkerでは、Canvasでもきっちりベクトルデータの編集機能を実装してるからなぁ。でも面倒だよね、多分。。。）
できあがりイメージ（笑）
http://www.esrij.com/products/arcgismobile/features.html
Google Maps でのベクトル編集の例
http://www.ekelschot.eu/demo/maps/enableEditing.html
http://www.google.com/mapmaker ←いつのまにこんなものがGoogle版OSM
OpenLayersでのベクトル編集の例
http://ole.geops.de/
参考
Canvas と SVG の使い分けに関する考察
http://msdn.microsoft.com/ja-jp/library/gg193983
OpenLayers and HTML5
http://trac.osgeo.org/openlayers/wiki/Future/OpenLayersAndHTML5
http://www.tobias-sauerwein.de/files/Tobias%20Sauerwein%20-%20Evaluation%20of%20HTML5%20for%20its%20Use%20in%20the%20Web%20Mapping%20Client%20OpenLayers.pdf
Google Maps は以前はSVG。今はCanvas
http://stackoverflow.com/questions/4996374/what-is-the-difference-between-svg-and-html5-canvas
なぜGoogle Maps はCanvasなのか？
http://stackoverflow.com/questions/7566547/why-does-google-map-use-canvas-to-make-distance-measurement-not-svg
HTML5で注目！インラインSVGの使い方
http://ascii.jp/elem/000/000/585/585608/
HTML5のInline SVGをJavaScriptで操作
http://ascii.jp/elem/000/000/588/588081/
HTML5 SVGで作るシューティングゲーム
http://ascii.jp/elem/000/000/589/589429/
↓これを読んで勉強するかな。洋書版しかまだないけど。
