hello (visible) world.

OpenLayers 3でOpenStreetMap上にピンを打つ

2014.10.16 · 488 words · 1 minute readJavaScript , OpenLayers , OpenStreetMap

OpenLayers 3を使って、緯度経度で指定したポイントやポイントを結んだ形の図形をOpenStreetMap上に表示してみた。

OpenLayersは2から3へのアップデートで結構変わってる上にドキュメントは微妙、日本語での解説は2ばかりという状況なので、色々と試しながらです。

問題点は
・OpenStreetMapは球面メルカトル図法(EPSG:3857)で描画される
・ポイントは緯度経度(WGS84/EPSG:4326)で示したい
・EPSG:3857とEPSG:4326のレイヤーは同時に表示できない

最終的には

format: new ol.format.GeoJSON({
    defaultProjection: 'EPSG:4326'
}),
projection: 'EPSG:3857',

みたいな感じで解決できました。

以下、ソースコード

GeoJSONの仕様は
http://s.kitazaki.name/docs/geojson-spec-ja.html
を参考に。

上記コード内では、textで直接GeoJSONを書き込んでいるが、実際はurlで外部からjsonファイルを引っ張ってくる使い方が一般的(のはず)。

ちなみに、Polygonは閉路になる順にcoordinatesを指定してしないと捻れちゃうので、その辺も要注意。
そういうのを踏まえて、投げられた複数のジオタグから凸包を描くようなGeoJSONを吐くプログラムを現在製作中…