2016年7月6日水曜日

OpenLayers 3 を使ってみよう(その19:その9からその18までのまとめ)

これはOpenLayers 3 を使ってみよう(その18:Marker アニメーション)からの続きである。
OpenLayers 3 を使ってみよう(その0:はじめに:地理院地図を表示)に目次がある。
 その13までのページでは OpenLayers v3.7.0 で書いてきたが,ここでは OpenLayers 3.16.0 で書かれている。
 前回(その18:Marker アニメーション)では,OpenLayers の Example に載っていた Marker を使ったアニメーション Marker Animation について書いた。 今回はその9:KML データで経路を描画するからその18:Marker アニメーションまでをまとめたものを示しておこう。 ただし,単にまとめただけではなく,マーカー表示の表示・非表示やセンターマークの表示・非表示などの動作をトグルスイッチに変えてみた。 また,アニメーションになった際には,カメラマークのマーカーは強制的に非表示にし,逆に KML 経路は強制的に表示するようにしてみた。 さらに,拡大・縮小のための関数を用意し,アニメーションが始まると,少し拡大して表示するようにした。 少し拡大して表示すると,点が移動していくと表示範囲からはみ出してしまう。 それを追いかけるために,点が表示範囲からはみ出すと,表示範囲を移動するようにもしてみた。

2016年7月3日日曜日

OpenLayers 3 を使ってみよう(その18:Marker アニメーション)

 これは,OpenLayers 3 を使ってみよう(その17:OpenLayers v3 で 経路の距離を測る)からの続きになる。 OpenLayers 3 を使ってみよう(その0:はじめに:地理院地図を表示)に目次がある。
 その13までのページでは OpenLayers v3.7.0 で書いてきたが,ここでは OpenLayers 3.16.0 で書かれている。
 前回(その17:OpenLayers v3 で 経路の距離を測る)は,OpenLayers の Example で見つけた Measure Example の情報から,距離の計算について書いてみた。 地図上の距離の計算には,個人的にはヒュベニの公式を使っていこうと思っているが,haversine 関数を用いるのも一計かもしれないと感じている。

 今回も OpenLayers の Example から,アニメーションのサンプル Marker Animation を見つけたので,挑戦してみた。 地図でのアニメーションはいつくか考えられるが,例えば,地図を回すとか,拡大・縮小をアニメーションで行うとかも考えられる。 ここでは,経路のスタートからゴールまでを黒い丸が進んでいく,というアニメーションである。 それを組み込んでみた。

 ポイントとしては,ol.render.Event クラスの postcompose というのを使うところ,みたい…(そんなにしっかりとわかっているわけじゃない…)。 後で示す JavaScript ファイルの最後の方にある「function startAnimation()」と「function stopAnimation()」という中で,postcompose というのが使われている。 そこでは「moveFeature()」という関数を呼び出して,実際に黒丸を動かしているみたい。

 それ以外のポイントとしては,サンプルと違って JavaScript ファイルを <body> の前に読み込ませている。 そのため,<body> を読み込んだ際に実行する init_map() という関数を定義している。 また,init_map() 以外で使う変数は global に定義しないといけなかった。 さらに,経路は KML 形式のファイルを読み込ませているが,読み込ませた KML ファイルのデータを使うには,
kml_vector.once('change',function() {
.....
}
のように,イベント処理を使わないとうまく処理ができなかった。

OpenLayers 3 を使ってみよう(その17:OpenLayers v3 で 経路の距離を測る)

 これは,OpenLayers 3 を使ってみよう(その16:OpenLayers v3 で Google Map と地理院地図を重ねる)からの続きになる。 OpenLayers 3 を使ってみよう(その0:はじめに:地理院地図を表示)に目次がある。
 その13までのページでは OpenLayers v3.7.0 で書いてきたが,ここでは OpenLayers 3.16.0 で書かれている。
 前回(その16:OpenLayers v3 で Google Map と地理院地図を重ねる)は,Google Map と地理院地図を重ねてみた。
今回は少し趣きを変えて,経路の距離を測る話について書こう。

 地図上の経路の距離に関しては,その5:テキストデータから折線データ読込みに少し書いた。 そこでは,ヒュベニの公式と呼ばれるものを使っていると書いた。 その部分のみ書き出すと以下のようになる(ここではその13:センターマークと凡例の表示・KML による経路+マーカーの場合でのルーチンを取り出している)。