OpenLayers2で地図に線を描画してみる

2016.04.07.木
JavaScript

お久しぶりです。地図とグラフが好きな溝畑です。

OpenLayers2は、JavaScript Mapping Libraryです。
地図を描画したり、画像を描画したり…。

主な用途は地図となると思います。
あとは、OpenLayers3なんかもリリースされて数年が経っていますが、
OpenLayers2 → 3は書き方がかなり変わっている模様。

まだあまり試せていないのが現状です。
OpenLayers2、OpenLayers3ともに公式のサンプルが豊富で、そこを見るだけでも、
大体のやりたいことはできてしまいます。

さて本題ですが、今回はOpenLayers2で地図に線を引いていきます。

地図を描画する

まずは地図を描画しないことには始まりません。
OpenLayers2と一部jQuery使っていきます。

投影法はEPSG3857・EPSG4326で調べてみてください。
ここまでで、神戸〜三ノ宮中心の地図が表示されたはずです。
スクリーンショット 2016-04-07 19.20.02

線と点を描画する

神戸付近の地図を出したので、神戸→元町→三ノ宮を結んでみたいと思います。
位置情報はAjaxで取ってくるようなことが想定されますが、今回は直接用意しちゃいます。

実際に描画してみます。
ボタンをクリックしたら、描画するみたいなのを想定。
さっきの地図を描画したものに追記していきます。

これで各点と点を結んだ線が描画できたかと思います。
今回のサンプル
サンプルは線の削除も付けてみました。
スクリーンショット 2016-04-07 19.31.38
線を作る場合は、OpenLayers.Geometry.Pointしたものの配列をOpenLayers.Geometry.LineStringに渡すこと。
実際に表示するものにはnew OpenLayers.Layer.Vectorをかけてあげること。

あとは、普段は「緯度・経度」の順で言葉にすることが多いので、間違えやすいのですが、
new OpenLayers.Geometry.Pointの引数は「経度・緯度」の順番です。
(サンプルではcreatePointの中)

描画するものを作ったら、描画するためのレイヤーを作る必要があります。
そこがnew OpenLayers.Layer.Vector('layer_nam', null);の部分です。
Vectorを描画していくので、これを使います。

addFeatures()でレイヤーに描画するFeatureを追加。
今回はそれぞれ分けていますが、1つのレイヤーに入れてしまっても問題ありませんが、
点毎にツールチップを出したい!となると、分けておく方が無難だと思います。

最後に、↑のサンプルだとthis.olmapにこのレイヤーを追加してやるとOKです。

線の描画には罠が…

今回は描画できることを確認するまでなので、これで良いのですが、
例えば「世界を一周するような線を描きたい!」となったときに、このままでは少し問題が出てきます。

主に東経→西経・西経→東経・北緯→南緯・南緯→北緯を跨ぐときに絡む問題なのですが、長くなりそうなので、次回。

世界を一周する線を引く(何も考慮していない場合)
何も考慮せずに引くと、こうなっちゃいます。
180度の辺りで、超えたいのに線が戻っちゃってますね。点は問題なく描画されているのに…。
スクリーンショット 2016-04-07 19.37.31

次回はこれを解決してみます。




キー・ポイントでは、ブラウザで地図やグラフを書いて、
自由にぐりぐりしたいエンジニアを募集しています。
2017新卒の方はリクナビ2017へ(タイムリーに書類選考 受付中!)
中途の方はコチラへ





-->