2014年10月16日

OpenLayers 3で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を吐くプログラムを現在製作中...

1 件のコメント:

  1. こんにちは。ドキュメントの微妙さにげんなりしながら四苦八苦してるので、「こうすれば動く」という情報は非常に参考になります。
    GeoJSONのExampleコード見る限りではsource.GeoJSONのオプションにformatは特に指定せずとも良さそうな雰囲気ですね。現時点ではformatキーワードに関する記述はないようですし。
    ただ、exampleに倣ってobjectで生のgeojsonをコードに組み込んで自分なりに試してみたんですがどうにもうまくいかず。ちなみにGeoJSON:LineString + sylte:Strokeです。こちらの記事を参考にsource.GeoJSONの引数にformatも明示してみましたが効果はなし。マーカー1つに随分面倒なことをさせるようになりましたよね、ver 3.xは...
    LeafLetに乗り換えようかと考える今日この頃です。

    返信削除

Recent Photos from Atelier (Flickr)

作業場で撮影した写真をアップロードしています。記事にする前の試作なども公開中です。