OpenLayers 3 を使ってみよう（その0：はじめに：地理院地図を表示）に目次がある。
前回の投稿まで「OpenLayers 3 を使ってみよう」と題して，OpenLayers 3 を使って，地図に経路データなどを表示するやり方について述べ，
最後にまとめとして，OpenLayers 3 を使ってみて気づいた点についてまとめてみた。
今回は，KML ファイルのフォーマットについて書いておこうと思う。
KML フォーマットについては，Google マップでの KML レイヤのガイドに詳細な記述がある。
しかし，詳細すぎてよくわからなかったりもする。
OpenLayers 3 では，基本的に Google Maps の KML と踏襲しているようであり，ここでは具体的に KML ファイルについて書いておこうと思う。
私自身が KML ファイルの例を，GNSS/GPS 経路の表示に OpenLayers 2 を使う（その5：KML ファイルで経路を表示）やGNSS/GPS 経路の表示に OpenLayers 2 を使う（その6：KML ファイルで経路とマーカーを表示）に載せているが，そこでは経路用の KML については説明したが，停留点（マーカー）用のものについては説明をちゃんとは書いていなかった。
そこで，今回まとめて書いておこうと思う。
2014年9月20日土曜日
2014年9月17日水曜日
OpenLayers 3 を使ってみよう（番外：OpenLayers 3 について私なりにまとめてみた）
OpenLayers 3 を使ってみよう（その0：はじめに：地理院地図を表示）に目次がある。
ここでは OpenLayers 3.7.0 を使っている。
前回の投稿まで「OpenLayers 3 を使ってみよう」と題して，OpenLayers 3 を使って，地図に経路データなどを表示するやり方について述べた。 それが一段落したので，覚えている間に備忘録として，OpenLayers 3 を使う時に気づいた点や注意すべき点について書いておこうと思う。 OpenLayers のバージョンは 3.7.0 を念頭においている。 （いまいちまとまってないなぁ…）
まず OpenLayers 3 関連のリンクを再び書いておこう。
・OpenLayers：メインのサイト (2014/9/8 現在は OpenLayers 3 が最新版になってる)
・User Documents：OpenLayers 3.7.0 の使い方の文章へのリンク
・API Documents：v3.7.0変数に関する説明
・Development examples：OpenLayers 3.7.0 の使用例
・complete list of releases：v3 全バージョンの更新情報
これらは全て英語である。
この中でよく見たのが API Documents と Development examples であった。 examples は何かをしようと思ったら，それらしい例を探してきてそれを真似した。 また，特定のタイプ（クラス）の変数について調べたければAPI Documents を参考にした。 しかし，このAPI Documents が慣れないと何が書いてあるのかチンプンカンプンだった。 その辺りもあり，覚えている間にメモをしておこう，というのが今回の主旨である。
ここでは OpenLayers 3.7.0 を使っている。
前回の投稿まで「OpenLayers 3 を使ってみよう」と題して，OpenLayers 3 を使って，地図に経路データなどを表示するやり方について述べた。 それが一段落したので，覚えている間に備忘録として，OpenLayers 3 を使う時に気づいた点や注意すべき点について書いておこうと思う。 OpenLayers のバージョンは 3.7.0 を念頭においている。 （いまいちまとまってないなぁ…）
まず OpenLayers 3 関連のリンクを再び書いておこう。
・OpenLayers：メインのサイト (2014/9/8 現在は OpenLayers 3 が最新版になってる)
・User Documents：OpenLayers 3.7.0 の使い方の文章へのリンク
・API Documents：v3.7.0変数に関する説明
・Development examples：OpenLayers 3.7.0 の使用例
・complete list of releases：v3 全バージョンの更新情報
これらは全て英語である。
この中でよく見たのが API Documents と Development examples であった。 examples は何かをしようと思ったら，それらしい例を探してきてそれを真似した。 また，特定のタイプ（クラス）の変数について調べたければAPI Documents を参考にした。 しかし，このAPI Documents が慣れないと何が書いてあるのかチンプンカンプンだった。 その辺りもあり，覚えている間にメモをしておこう，というのが今回の主旨である。
2014年9月16日火曜日
OpenLayers 3 を使ってみよう（その13：センターマークと凡例の表示・KML による経路＋マーカーの場合）
これはOpenLayers 3 を使ってみよう（その12：KML+マーカーで zoom の自動調整）からの続きである。
OpenLayers 3 を使ってみよう（その0：はじめに：地理院地図を表示）に目次がある。
ここでは OpenLayers 3.7.0 を使っている。
前回（その12：KML+マーカーで zoom の自動調整）では， KML ファイルから作った経路に対して，地図の表示範囲を自動で調整できるようにした。 今回は，地図の中心にセンターマークを配置し，マーカーの凡例も表示してみよう。 さらに，それらの表示・非表示を切り替えるボタンを付けて，不必要な時には消せるようにしてみよう。 KML ファイルについての説明はOpenLayers 3 を使ってみよう（番外2：KML ファイルのフォーマットについて）に書いているので，そちらを見てみて欲しい。
OpenLayers 3 を使ってみよう（その0：はじめに：地理院地図を表示）に目次がある。
ここでは OpenLayers 3.7.0 を使っている。
前回（その12：KML+マーカーで zoom の自動調整）では， KML ファイルから作った経路に対して，地図の表示範囲を自動で調整できるようにした。 今回は，地図の中心にセンターマークを配置し，マーカーの凡例も表示してみよう。 さらに，それらの表示・非表示を切り替えるボタンを付けて，不必要な時には消せるようにしてみよう。 KML ファイルについての説明はOpenLayers 3 を使ってみよう（番外2：KML ファイルのフォーマットについて）に書いているので，そちらを見てみて欲しい。
OpenLayers 3 を使ってみよう（その12：KML+マーカーで zoom の自動調整）
これはOpenLayers 3 を使ってみよう（その11：KML から描画した経路とマーカーの表示／非表示の個別切替）からの続きである。
OpenLayers 3 を使ってみよう（その0：はじめに：地理院地図を表示）に目次がある。
ここでは OpenLayers 3.7.0 を使っている。
（追記）zoom の自動調整については，この次のその13：センターマークと凡例の表示・KML による経路＋マーカーの場合の最後の方に別の簡素化した方法について書いてあるので，参照してみて欲しい）
前回（その11：KML から描画した経路とマーカーの表示／非表示の個別切替）では， KML ファイルから描画した地図上のマーカーや経路を個別に表示したり非表示にしたりするボタンをつけた。 今回は KML ファイルから作った経路に対して，地図の表示範囲を自動で調整してみよう。 KML ファイルについての説明はOpenLayers 3 を使ってみよう（番外2：KML ファイルのフォーマットについて）に書いているので，そちらを見てみて欲しい。
OpenLayers 3 を使ってみよう（その0：はじめに：地理院地図を表示）に目次がある。
ここでは OpenLayers 3.7.0 を使っている。
（追記）zoom の自動調整については，この次のその13：センターマークと凡例の表示・KML による経路＋マーカーの場合の最後の方に別の簡素化した方法について書いてあるので，参照してみて欲しい）
前回（その11：KML から描画した経路とマーカーの表示／非表示の個別切替）では， KML ファイルから描画した地図上のマーカーや経路を個別に表示したり非表示にしたりするボタンをつけた。 今回は KML ファイルから作った経路に対して，地図の表示範囲を自動で調整してみよう。 KML ファイルについての説明はOpenLayers 3 を使ってみよう（番外2：KML ファイルのフォーマットについて）に書いているので，そちらを見てみて欲しい。
2014年9月13日土曜日
OpenLayers 3 を使ってみよう（その11：KML から描画した経路とマーカーの表示／非表示の個別切替）
これはOpenLayers 3 を使ってみよう（その10：KML でマーカーを描画して吹出しをつける）からの続きである。
OpenLayers 3 を使ってみよう（その0：はじめに：地理院地図を表示）に目次がある。
ここでは OpenLayers 3.7.0 を使っている。
前回（その10：KML でマーカーを描画して吹出しをつける）では， KML ファイルで地図上にマーカーを描画し，さらにそのマーカーをクリックすると，マーカーの情報が吹き出しに表示されるようにする方法を記述した。 今回は経路（ルート）とマーカーを個別に表示・非表示の切替えをしてみよう。
OpenLayers 3 を使ってみよう（その0：はじめに：地理院地図を表示）に目次がある。
ここでは OpenLayers 3.7.0 を使っている。
前回（その10：KML でマーカーを描画して吹出しをつける）では， KML ファイルで地図上にマーカーを描画し，さらにそのマーカーをクリックすると，マーカーの情報が吹き出しに表示されるようにする方法を記述した。 今回は経路（ルート）とマーカーを個別に表示・非表示の切替えをしてみよう。
OpenLayers 3 を使ってみよう（その10：KML でマーカーを描画して吹出しをつける）
これはOpenLayers 3 を使ってみよう（その9：KML データで経路を描画する）からの続きである。
OpenLayers 3 を使ってみよう（その0：はじめに：地理院地図を表示）に目次がある。
ここでは OpenLayers 3.7.0 を使っている。
前回（その9：KML データで経路を描画する）では， KML データとして与えた経路を地図上に描画する方法を記述した。
今回は KML ファイルで地図上にマーカーを描画し，さらにそのマーカーをクリックすると，マーカーの情報が吹き出しに表示されるようにしてみよう。
OpenLayers 3 を使ってみよう（その0：はじめに：地理院地図を表示）に目次がある。
ここでは OpenLayers 3.7.0 を使っている。
前回（その9：KML データで経路を描画する）では， KML データとして与えた経路を地図上に描画する方法を記述した。
今回は KML ファイルで地図上にマーカーを描画し，さらにそのマーカーをクリックすると，マーカーの情報が吹き出しに表示されるようにしてみよう。
OpenLayers 3 を使ってみよう（その9：KML データで経路を描画する）
これはOpenLayers 3 を使ってみよう（その8：ol.interaction.Draw 修正可能バージョンで表示領域の大きさの調整を行う）からの続きである。
OpenLayers 3 を使ってみよう（その0：はじめに：地理院地図を表示）に目次がある。
ここでは OpenLayers 3.7.0 を使っている。
前回（その8：ol.interaction.Draw 修正可能バージョンで表示領域の大きさの調整を行う）では， ol.interaction.Draw を使った経路作成で，地図の表示の中心や zoom を自動調整する方法について書いた。
今回は趣きを変えて KML データから経路を地図上に表示する方法について述べよう。
OpenLayers 3 を使ってみよう（その0：はじめに：地理院地図を表示）に目次がある。
ここでは OpenLayers 3.7.0 を使っている。
前回（その8：ol.interaction.Draw 修正可能バージョンで表示領域の大きさの調整を行う）では， ol.interaction.Draw を使った経路作成で，地図の表示の中心や zoom を自動調整する方法について書いた。
今回は趣きを変えて KML データから経路を地図上に表示する方法について述べよう。
2014年9月12日金曜日
OpenLayers 3 を使ってみよう（その8：ol.interaction.Draw 修正可能バージョンで表示領域の大きさの調整を行う）
これはOpenLayers 3 を使ってみよう（その7：ol.interaction.Modify を使った修正可能バージョン）からの続きである。
OpenLayers 3 を使ってみよう（その0：はじめに：地理院地図を表示）に目次がある。
ここでは OpenLayers 3.7.0 を使っている。
前回（その7：ol.interaction.Modify を使った修正可能バージョン）では， ol.interaction.Modify を使って，マウスで経路線を修正する方法に挑戦してみた。
今回は，点の数を変えたり，文字データを読み込んで線を描画する際に，地図の表示範囲を自動で変更できるようにしてみた。
地図の表示範囲の自動調整はその5：テキストデータから折線データ読込みでも書いた。 基本的には同じことをさせている。 ただし，座標データがメルカトル座標になっているなど微妙な違いはあるが，本質的には同じことをさせている。 そこでは，ヒュベニの公式を用いた距離計算を行い，経路が収まるように地図の zoom を自動で調整している。 その5：テキストデータから折線データ読込みでも書いたが， ol.geom.LineString クラスの変数を作って，その長さを求める関数 getLength() を使う方法は正確な距離を出さないので，ここでは利用していない。
OpenLayers 3 を使ってみよう（その0：はじめに：地理院地図を表示）に目次がある。
ここでは OpenLayers 3.7.0 を使っている。
前回（その7：ol.interaction.Modify を使った修正可能バージョン）では， ol.interaction.Modify を使って，マウスで経路線を修正する方法に挑戦してみた。
今回は，点の数を変えたり，文字データを読み込んで線を描画する際に，地図の表示範囲を自動で変更できるようにしてみた。
地図の表示範囲の自動調整はその5：テキストデータから折線データ読込みでも書いた。 基本的には同じことをさせている。 ただし，座標データがメルカトル座標になっているなど微妙な違いはあるが，本質的には同じことをさせている。 そこでは，ヒュベニの公式を用いた距離計算を行い，経路が収まるように地図の zoom を自動で調整している。 その5：テキストデータから折線データ読込みでも書いたが， ol.geom.LineString クラスの変数を作って，その長さを求める関数 getLength() を使う方法は正確な距離を出さないので，ここでは利用していない。
OpenLayers 3 を使ってみよう（その7：ol.interaction.Modify を使った修正可能バージョン）
これはOpenLayers 3 を使ってみよう（その6：ol.interaction.Draw を使った例）からの続きである。
OpenLayers 3 を使ってみよう（その0：はじめに：地理院地図を表示）に目次がある。
ここでは OpenLayers 3.7.0 を使っている。
前回（その6：ol.interaction.Draw を使った例）では， ol.interaction.Draw を使って，マウスで経路線を描く方法に挑戦してみた。 そこでは ol.layer.Vector を使って線を描いたが，一度描いた線を地図上で引っ張ったり伸ばしたりして修正することができなかった。
今回は ol.interaction.Modify を用いて，地図上で修正可能なバージョンに挑戦してみた。
今回は OpenLayers 3 の Examples のページの中の， Draw and modify features example (draw-and-modify-features.html) を参考にしている。 これは作図した後に，図形を変形できるものである。 これを元に，作られた図形の情報を文字データとして表示させたり，逆に文字列データから図形情報を作って，地図上に表示させるとともに，その図形も変形させることができる状態にしてみた。
OpenLayers 3 を使ってみよう（その0：はじめに：地理院地図を表示）に目次がある。
ここでは OpenLayers 3.7.0 を使っている。
前回（その6：ol.interaction.Draw を使った例）では， ol.interaction.Draw を使って，マウスで経路線を描く方法に挑戦してみた。 そこでは ol.layer.Vector を使って線を描いたが，一度描いた線を地図上で引っ張ったり伸ばしたりして修正することができなかった。
今回は ol.interaction.Modify を用いて，地図上で修正可能なバージョンに挑戦してみた。
今回は OpenLayers 3 の Examples のページの中の， Draw and modify features example (draw-and-modify-features.html) を参考にしている。 これは作図した後に，図形を変形できるものである。 これを元に，作られた図形の情報を文字データとして表示させたり，逆に文字列データから図形情報を作って，地図上に表示させるとともに，その図形も変形させることができる状態にしてみた。
2014年9月11日木曜日
OpenLayers 3 を使ってみよう（その6：ol.interaction.Draw を使った例）
これはOpenLayers 3 を使ってみよう（その5：テキストデータから折線データ読込み）からの続きである。
OpenLayers 3 を使ってみよう（その0：はじめに：地理院地図を表示）に目次がある。
ここでは OpenLayers 3.7.0 を使っている。
前回（その5：テキストデータから折線データ読込み）では， テキストデータ形式で与えた経路点の座標情報から，経路を描画する方法を記述した。 そこでは，経路の距離を計算し，また，経路ができるだけ大きく表示されるような工夫も施した。
今回は，ol.interaction.Draw というマウスによる経路作成の別の方法についてみてみようと思う。
マウスによる経路の作成は，その4：マウスクリックで地図上に経路を描画するやその5：テキストデータから折線データ読込みでも紹介したが，その時は座標点を入れる配列を用意し，その座標配列から ol.geom.MultiLineString クラスの要素を持つ vector layer を作って描画させていた。 今回は，ol.interaction.Draw というものを使って経路線を作成したいと思う。
今回使う ol.interaction.Draw というのは，ol.Interaction（地図を構成する要素に変更を加えるもの）の一種であり，マウスクリックで線を作成するのに便利なものである。 具体的な例が OpenLayers 3 の Examples のページの中の， Draw features example (draw-features.html) と Draw and modify features example (draw-and-modify-features.html) にある。 この2つはいずれも ol.interaction.Draw を含む使用例であるが，Draw features example (draw-features.html) は作成した線等は変更できないが，Point, LineString, Polygon の他に Circle, Square, Box というのが選べる。 Draw and modify features example (draw-and-modify-features.html) の方は，ol.interaction.Modify も使われており，Point, LineString, Polygon のみだが，作成した線等の点や線分を地図上で移動（変形）させることができる。
OpenLayers 3 を使ってみよう（その0：はじめに：地理院地図を表示）に目次がある。
ここでは OpenLayers 3.7.0 を使っている。
前回（その5：テキストデータから折線データ読込み）では， テキストデータ形式で与えた経路点の座標情報から，経路を描画する方法を記述した。 そこでは，経路の距離を計算し，また，経路ができるだけ大きく表示されるような工夫も施した。
今回は，ol.interaction.Draw というマウスによる経路作成の別の方法についてみてみようと思う。
マウスによる経路の作成は，その4：マウスクリックで地図上に経路を描画するやその5：テキストデータから折線データ読込みでも紹介したが，その時は座標点を入れる配列を用意し，その座標配列から ol.geom.MultiLineString クラスの要素を持つ vector layer を作って描画させていた。 今回は，ol.interaction.Draw というものを使って経路線を作成したいと思う。
今回使う ol.interaction.Draw というのは，ol.Interaction（地図を構成する要素に変更を加えるもの）の一種であり，マウスクリックで線を作成するのに便利なものである。 具体的な例が OpenLayers 3 の Examples のページの中の， Draw features example (draw-features.html) と Draw and modify features example (draw-and-modify-features.html) にある。 この2つはいずれも ol.interaction.Draw を含む使用例であるが，Draw features example (draw-features.html) は作成した線等は変更できないが，Point, LineString, Polygon の他に Circle, Square, Box というのが選べる。 Draw and modify features example (draw-and-modify-features.html) の方は，ol.interaction.Modify も使われており，Point, LineString, Polygon のみだが，作成した線等の点や線分を地図上で移動（変形）させることができる。
2014年9月10日水曜日
OpenLayers 3 を使ってみよう（その5：テキストデータから折線データ読込み）
これはOpenLayers 3 を使ってみよう（その4：マウスクリックで地図上に経路を描画する）からの続きである。
OpenLayers 3 を使ってみよう（その0：はじめに：地理院地図を表示）に目次がある。
ここでは OpenLayers 3.7.0 を使っている。
前回（その4：マウスクリックで地図上に経路を描画する）では， マウスクリックによって地図上に折線を描画する方法を記述した。
今回はテキストデータから折線を描画させようと思う。
OpenLayers 3 を使ってみよう（その0：はじめに：地理院地図を表示）に目次がある。
ここでは OpenLayers 3.7.0 を使っている。
前回（その4：マウスクリックで地図上に経路を描画する）では， マウスクリックによって地図上に折線を描画する方法を記述した。
今回はテキストデータから折線を描画させようと思う。
OpenLayers 3 を使ってみよう （その4：マウスクリックで地図上に経路を描画する）
これはOpenLayers 3 を使ってみよう（その3：地図上に折線を引く）からの続きである。
OpenLayers 3 を使ってみよう（その0：はじめに：地理院地図を表示）に目次がある。
ここでは OpenLayers 3.7.0 を使っている。
前回（その3：地図上に折線を引く）では， 地図上に折線を描画する方法を記述した。
今回はマウスのクリックによって折線を次々と描画して，経路を表示させようと思う。
OpenLayers 3 を使ってみよう（その0：はじめに：地理院地図を表示）に目次がある。
ここでは OpenLayers 3.7.0 を使っている。
前回（その3：地図上に折線を引く）では， 地図上に折線を描画する方法を記述した。
今回はマウスのクリックによって折線を次々と描画して，経路を表示させようと思う。
2014年9月9日火曜日
OpenLayers 3 を使ってみよう （その3：地図上に折線を引く）
これはOpenLayers 3 を使ってみよう（その2：地図の不透明度を変える）からの続きである。
OpenLayers 3 を使ってみよう（その0：はじめに：地理院地図を表示）に目次がある。
ここでは OpenLayers 3.7.0 を使っている。
前回（その2：地図の不透明度を変える）では， 地図の不透明度を変える方法について述べた。
今回は地図上に折線を引く方法を示そう。 地図上に折線を引ければ，任意の経路を地図上に表示できることになる。
OpenLayers 3 を使ってみよう（その0：はじめに：地理院地図を表示）に目次がある。
ここでは OpenLayers 3.7.0 を使っている。
前回（その2：地図の不透明度を変える）では， 地図の不透明度を変える方法について述べた。
今回は地図上に折線を引く方法を示そう。 地図上に折線を引ければ，任意の経路を地図上に表示できることになる。
OpenLayers 3 を使ってみよう （その2：地図の不透明度を変える）
これはOpenLayers 3 を使ってみよう（その1：マウスクリックのイベント処理）からの続きである。
OpenLayers 3 を使ってみよう（その0：はじめに：地理院地図を表示）に目次がある。
ここでは OpenLayers 3.7.0 を使っている。
前回（その1：マウスクリックのイベント処理）では， マウスをクリックした際のイベント処理の方法を記述した。
今回は地図画像の不透明度（Opacity）を変える方法を示そう。
地図の不透明度を変えるには，地図を構成している layer（ここでは cyberJ という変数で定義された Tile Layer）の不透明度を変えればよい。 そのためここでは layer の変数 cyberJ をグローバルに定義（init_map() 関数の外で定義）している。ちなみに不透明度（opacity）は，0.0～1.0 の間の数値を取らなければならない。
OpenLayers 3 を使ってみよう（その0：はじめに：地理院地図を表示）に目次がある。
ここでは OpenLayers 3.7.0 を使っている。
前回（その1：マウスクリックのイベント処理）では， マウスをクリックした際のイベント処理の方法を記述した。
今回は地図画像の不透明度（Opacity）を変える方法を示そう。
地図の不透明度を変えるには，地図を構成している layer（ここでは cyberJ という変数で定義された Tile Layer）の不透明度を変えればよい。 そのためここでは layer の変数 cyberJ をグローバルに定義（init_map() 関数の外で定義）している。ちなみに不透明度（opacity）は，0.0～1.0 の間の数値を取らなければならない。
OpenLayers 3 を使ってみよう （その1：マウスクリックのイベント処理）
これはOpenLayers 3 を使ってみよう（その0：はじめに：地理院地図を表示）からの続きである。
OpenLayers 3 を使ってみよう（その0：はじめに：地理院地図を表示）に目次がある。
ここでは OpenLayers 3.7.0 を使っている。
前回（その0：はじめに：地理院地図を表示）では， OpenLayers 3 を用いて，地理院地図を web ページ上に表示する方法を記述した。
今回はマウスクリックによるイベント処理の例として，マウスでクリックした地点の座標を文字として表す方法を示そう。
OpenLayers 3 を使ってみよう（その0：はじめに：地理院地図を表示）に目次がある。
ここでは OpenLayers 3.7.0 を使っている。
前回（その0：はじめに：地理院地図を表示）では， OpenLayers 3 を用いて，地理院地図を web ページ上に表示する方法を記述した。
今回はマウスクリックによるイベント処理の例として，マウスでクリックした地点の座標を文字として表す方法を示そう。
2014年9月8日月曜日
OpenLayers 3 を使ってみよう （その0：はじめに：地理院地図を表示）
（追記の追記の追記）2017/2/1 現在，最新バージョンは 3.20.1 になっていた…。
このサイトに書いてある内容としては v3.16.0 から特に変更はないみたい。
個別には特に記載してないが，サンプルはすべて v3.20.1 にしておいた。
（追記の追記）2016/5/28 現在，最新バージョンはいつのまにやら 3.16.0 になっていた…。 細かい変更点に関しては，v3.16.0 release page や complete list of releases を見てほしいが，私のサイトに関連して1箇所変更点があった。 詳しくは番外４：OpenLayers v3.7.0 から v3.16.0 の間に変わった点を見てほしい。
（追記）2015/7/25 現在，最新バージョンは 3.7.0 になっている。 v3.7.0 release page によると， 「ol.FeatureOverlay の廃止」，「ol.View.fitExtent() と ol.View.fitGeometry() の ol.View.fit() への統一」などの変更が行われている。
ここに書いた内容は，一部を除いて，基本的に 3.7.0 の時点のものである。（2015/8 に v3.0.0 用から v3.7.0 用に記述を変更した）
前回の投稿まで「GNSS/GPS 経路の表示に OpenLayers 2 を使う」と題して，OpenLayers 2 を使って，地図に GNSS/GPS の経路データを表示するやり方について述べた。その時の OpenLayers のバージョンは 2.13.1 だった。 しかし，最近 OpenLayers のサイトに行くと，バージョン 3.7.0 が最新版として表示されていた。 そこで，さっそく OpenLayers 3 を使って地図を表示させるのに挑戦してみた。 その事について数回に分けて書こう。
まず OpenLayers 3 関連のリンクを書こう。
・OpenLayers：メインのサイト (2014/9/8 現在は OpenLayers 3 が最新版になってる)
・User Documents：現状での最新版の OpenLayers の使い方の文章へのリンク
・API Documents：変数に関する説明
・Development examples：現状での最新版の OpenLayers の使用例
・complete list of releases：v3 全バージョンの更新情報
これらは当然ながら英語である。
数回になっているので，目次も書いておこう。
・その0：はじめに（このページ）
・その1：マウスクリックのイベント処理：マウスクリックした座標を読取る
・その2：地図の不透明度を変える
・その3：地図上に折線を引く：vector layer と MultiLineString で折れ線描画
・その4：マウスクリックで地図上に経路を描画する：マウスクリックで折れ線作成
・その5：テキストデータから折線データ読込み
・その6：ol.interaction.Draw を使った例：ol.layer.Vector を使ったもの
・その7：ol.interaction.Modify を使った修正可能バージョン
・その8：ol.interaction.Draw 修正可能バージョンで表示領域の大きさの調整を行う
・その9：KML データで経路を描画する
・その10：KML でマーカーを描画して吹出しをつける
・その11：KML から描画した経路とマーカーの表示／非表示の個別切替
・その12：KML+マーカーで zoom の自動調整
・その13：センターマークと凡例の表示・KML による経路＋マーカーの場合
・その14：GPX による経路の表示・各点の通過時刻を知る (これ以降 v3.16.0 で記述)
・その15：OpenLayers v3 で Google Map を表示する
・その16：OpenLayers v3 で Google Map と地理院地図を重ねる
・その17：OpenLayers v3 で 経路の距離を測る
・その18：Marker アニメーション
・その19：その9からその18までのまとめ
・その20：Open Street Map を表示させる
・その21：Highcharts でルートの標高グラフを表示
・その22：Highcharts でルートの標高グラフの改良
・番外：OpenLayers 3 について私なりにまとめてみた：いまいちまとめになってないかも…
・番外2：KML ファイルのフォーマットについて
・番外3：OpenLayers ver. 3.0.0 と 3.7.0 の違いについて
・番外4：OpenLayers v3.7.0 から v3.16.0 の間に変わった点
・番外5：JavaScript で KML データと GPX データを読み込む方法
・関連１：OpenLayers のバージョンが 4.0.1 になっていた
（追記の追記）2016/5/28 現在，最新バージョンはいつのまにやら 3.16.0 になっていた…。 細かい変更点に関しては，v3.16.0 release page や complete list of releases を見てほしいが，私のサイトに関連して1箇所変更点があった。 詳しくは番外４：OpenLayers v3.7.0 から v3.16.0 の間に変わった点を見てほしい。
（追記）2015/7/25 現在，最新バージョンは 3.7.0 になっている。 v3.7.0 release page によると， 「ol.FeatureOverlay の廃止」，「ol.View.fitExtent() と ol.View.fitGeometry() の ol.View.fit() への統一」などの変更が行われている。
ここに書いた内容は，一部を除いて，基本的に 3.7.0 の時点のものである。（2015/8 に v3.0.0 用から v3.7.0 用に記述を変更した）
前回の投稿まで「GNSS/GPS 経路の表示に OpenLayers 2 を使う」と題して，OpenLayers 2 を使って，地図に GNSS/GPS の経路データを表示するやり方について述べた。その時の OpenLayers のバージョンは 2.13.1 だった。 しかし，最近 OpenLayers のサイトに行くと，バージョン 3.7.0 が最新版として表示されていた。 そこで，さっそく OpenLayers 3 を使って地図を表示させるのに挑戦してみた。 その事について数回に分けて書こう。
まず OpenLayers 3 関連のリンクを書こう。
・OpenLayers：メインのサイト (2014/9/8 現在は OpenLayers 3 が最新版になってる)
・User Documents：現状での最新版の OpenLayers の使い方の文章へのリンク
・API Documents：変数に関する説明
・Development examples：現状での最新版の OpenLayers の使用例
・complete list of releases：v3 全バージョンの更新情報
これらは当然ながら英語である。
数回になっているので，目次も書いておこう。
・その0：はじめに（このページ）
・その1：マウスクリックのイベント処理：マウスクリックした座標を読取る
・その2：地図の不透明度を変える
・その3：地図上に折線を引く：vector layer と MultiLineString で折れ線描画
・その4：マウスクリックで地図上に経路を描画する：マウスクリックで折れ線作成
・その5：テキストデータから折線データ読込み
・その6：ol.interaction.Draw を使った例：ol.layer.Vector を使ったもの
・その7：ol.interaction.Modify を使った修正可能バージョン
・その8：ol.interaction.Draw 修正可能バージョンで表示領域の大きさの調整を行う
・その9：KML データで経路を描画する
・その10：KML でマーカーを描画して吹出しをつける
・その11：KML から描画した経路とマーカーの表示／非表示の個別切替
・その12：KML+マーカーで zoom の自動調整
・その13：センターマークと凡例の表示・KML による経路＋マーカーの場合
・その14：GPX による経路の表示・各点の通過時刻を知る (これ以降 v3.16.0 で記述)
・その15：OpenLayers v3 で Google Map を表示する
・その16：OpenLayers v3 で Google Map と地理院地図を重ねる
・その17：OpenLayers v3 で 経路の距離を測る
・その18：Marker アニメーション
・その19：その9からその18までのまとめ
・その20：Open Street Map を表示させる
・その21：Highcharts でルートの標高グラフを表示
・その22：Highcharts でルートの標高グラフの改良
・番外：OpenLayers 3 について私なりにまとめてみた：いまいちまとめになってないかも…
・番外2：KML ファイルのフォーマットについて
・番外3：OpenLayers ver. 3.0.0 と 3.7.0 の違いについて
・番外4：OpenLayers v3.7.0 から v3.16.0 の間に変わった点
・番外5：JavaScript で KML データと GPX データを読み込む方法
・関連１：OpenLayers のバージョンが 4.0.1 になっていた
登録:
投稿 (Atom)