2014年7月9日水曜日

GNSS/GPS 経路の表示に OpenLayers 2 を使う (その0:はじめに)

 最近,電子国土の仮サービスが地理院地図というサービスに統合された。 地理院地図は 1/25000 の地形図を電子形式にしたもので,私的な利用に関してはあまり制限なく使うことができる(正確な事は地理院地図の利用規約を見て欲しい)

 私は,これまで GNSS/GPS ロガーの経路データを写真の表示に主に Google Map を使っていた。 理由は Google Maps API というのを使えば,自分で地図をカスタマイズできたからである。 しかし,Google Maps の場合,道路地図だと拡大していくと細かい部分は省略されてしまうし, かと言って衛星画像は読込みが重いし,Google の地形図はいまいち好みじゃないし,と思っていた。 他の地図サービスというと,Yahoo Map の他に,電子国土というサービスがあり,1/25000 地形図を見ることができるのは知っていた。 でも,GNSS/GPS ロガーの経路データの表示に使おうと思っていなかった。 しかし,最近,電子国土から地理院地図に変わり, いろいろと調べてみると,意外とカスタマイズできそうだったので,地理院地図を使った GNSS/GPS ロガーの経路データ表示に挑戦してみた。 それについて,ここで数回に分けて書きたいと思う。

 地理院地図だが,web 上での表示にはオープンソース・ソフトウェアである OpenLayers を使っている。 実際,地理院地図のページに行き,ソースを表示させると OpenLayers を使っているのがわかる。 そこで,まずは OpenLayers (OpenLayers 2.13.1) について勉強してみた。 その上で,私なりに地理院地図+OpenLayers を使った GNSS/GPS ロガー経路データの表示を行うことにした。

 以下に OpenLayers 本家関連のリンクを書こう。
  ・OpenLayers:メインのサイト (2014/9/1 現在は OpenLayers 3 になってる)
  ・OpenLayers 2:OpenLayers 2.13.1 のメインサイト
  ・User Documents:OpenLayers の使い方の文章
  ・API Documents:変数に関する説明
  ・Development examples:OpenLayers の使用例
  ・Release examples (2.13.1):最新バージョンの使用例(リスト形式)
これらは当然ながら英語であるが,検索すると日本にしてあるものもあるので探してみて欲しい。

 数回になっているので,目次も書いておこう。
  ・その0:はじめに(このページ)
  ・その1:OpenLayers 2 を使って複数種類の Google Map を表示
  ・その2:OpenLayers 2 を使って地理院地図を表示
  ・その3:中央にセンターマークを表示
  ・その4:不透明度を変えて2つの地図を重ねて表示
  ・その5:KML ファイルで経路を表示
  ・その6:KML ファイルで経路とマーカーを表示
  ・その7:マーカーを text ファイル,経路を KML で表示
  ・その8:マーカーと経路を別々の KML ファイルで表示
  ・その9:今回の一連のものをまとめたもの
  ・OpenLayers 3 を使ってみよう(その0:はじめに:地理院地図を表示):OpenLayers 3 を使った例

 まずは OpenLayers についておおまかに述べておこう。
OpenLayers は JavaScript を使って web ページ上に地図を表示するものである。 そのために web ページが必要となる。 その web ページ上で JavaScript を使って地図を表示させたり,マウスクリックで何かの作業を行わせたりする,のが OpenLayers である。

 以下に OpenLayers を使った地図を表示するための基本形を書いておこう。
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<meta http-equiv="content-style-type" content="text/css">
<meta http-equiv="content-script-type" content="text/javascript">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>OpenLayers Example: Google Map</title>
<script src="http://maps.google.co.jp/maps/api/js?sensor=false&language=ja"></script>
<script src="../OpenLayers-2.13.1/lib/OpenLayers.js"></script>
<script type="text/javascript">//<![CDATA[
var param = { div: 'map_canvas', lon: 136.181193333333, lat: 34.2329783333333, zoom: 15 };
//]]></script>
<script type="text/javascript">
var proj_900913 = new OpenLayers.Projection('EPSG:900913'); // 900913 is old. ==> use 3857
var proj_3857 = new OpenLayers.Projection('EPSG:3857');
var proj_4326 = new OpenLayers.Projection('EPSG:4326'); // WGS84

// 初期化
function init_map() {
        // 地図表示の変数定義
        var map = new OpenLayers.Map({
          div: param.div
        });

        // Google Maps(道路地図)を base layer として表示
        var gmap = new OpenLayers.Layer.Google("Google Roadmap", {
           type: google.maps.MapTypeId.ROADMAP,
           numZoomLevels:22
        });
        map.addLayer(gmap);

        // 中心座標を設定
        if (!map.getCenter()) {
          map.setCenter(new OpenLayers.LonLat(param.lon, param.lat).transform(proj_4326, proj_3857), param.zoom);
        }
} // 初期化
</script>
</head>

<body onload="init_map()">
<div id="map_canvas"></div>
</body>
</html>
 これは web ページのソース形式で書かれている。 1行目や,それに続く「<html>〜</html>」,「<head>〜</head>」は web ページを記述している。 ここでは web ページの基本についてはわかっているものとして話を進めたい。 わからない人はまずは html の基本についてどこかで勉強して欲しい。

 <meta .... > の形式の行は,当該の web ページの全体設定のようなものなので,ここではおまじないと考えておいて欲しい。 一点注意するところは,「content="text/html; charset=UTF-8"」と書かれている部分である。 これは,このファイルを UTF-8 という文字コードで記述してある,という意味なので,UTF-8 で書いておかないと,web ページが文字化けしてしまう。

<title> の行は言うまでもなく web ページのタイトルである。 それに続く
 <script src="http://maps.google.co.jp/maps/api/js?sensor=false&language=ja"></script>
の部分は Google Map を表示する時に必要な API を読み込むものである。 API はアプリケーション・プログラミング・インターフェース(Application Programming Interface)の略であり,Google Map 用のプログラムみたいなものである。

<script src="../OpenLayers-2.13.1/lib/OpenLayers.js"></script>
の行は,OpenLayers を使うために必要な JavaScript を読み込んでいる。 OpenLayers のサイトから読み込んでいいが,ここではサーバーにダウンロードしたファイルを参照している。

<script type="text/javascript">//<![CDATA[
    var param = { div: 'map_canvas', lon: 136.181193333333, lat: 34.2329783333333, zoom: 15 };
//]]></script>

の行は,青い字の JavaScript にパラメータを渡している部分であり,地理院地図の使用例の形式を踏襲している。 メインとなる青字の JavaScript に直接書き込んでも一向に構わない。 ここでは,地図を表示するための領域の id を「map_canvas」,中心位置を東経136.1811933333度,北緯34.23297833333度にして, 地図の拡大度を 15 に設定している。 これらは下の青字の JavaScript の中で変数として使われている。

青字の部分は後回しにして,オレンジ色の部分は web ページの中身である。 実は中身はほとんど何もない。 <body> は,読み込まれたら JavaScript の「init_map()」という関数を実行する。 後は「id="map_canvas"」を持つ「カラの <div>」があるのみである。 この「カラの <div>」に青い字の JavaScript 部分で地図の画像を表示させていることになる。

<script type="text/javascript">…で始まる青字の部分がメインとなる JavaScript の部分である。 最初の3行「proj_900913,proj_3857,proj_4326」は,地図上の投影法を表す変数である。 GPS で使われる WGS84 は,EPSG:4326 と呼ばれているらしい。 OpenLayers もこの 4326 を使って表示させているみたい。 一方,普通の緯度経度を使った表示は,EPSG:900913 という番号を持っているみたいである。 なので,両方の(固定の)変数が必要となっている。 しかし,この 900913 というのは古いらしい,とどこかに書いてあったので, 同じ投影法だが,EPSG:3857 をここでは使っている。 なので,900913 の定義の行は実はいらない。

さて,いよいよここからが肝心な部分となっている。 「function init_map()」が web ページ本体を読み込んだ時に実行される関数であり, ここで,地図を定義して,読み込み,中心位置を設定している。 具体的には,
var map = new OpenLayers.Map({
    div: param.div
});

の部分で,地図を描くための変数(絵を描くためのキャンバスみたいな役割をする変数)を定義している。 これは,OpenLayers が定義する「Map」という種類の変数であり,表示領域は少し上で与えた param.div と定義されている。

次の部分で Google Map 用の変数「gmap」を定義している。
var gmap = new OpenLayers.Layer.Google("Google Roadmap", {
    type: google.maps.MapTypeId.ROADMAP,
    numZoomLevels:22
});

ここでは,gmap で与えられる地図の名前は「Google Roadmap」, 地図のタイプは Google Map の ROADMAP(道路地図)とし, 地図の表示の解像度のレベルが全部で 22 個ある(0〜21)と定義している。

そして,map.addLayer(gmap); でキャンバス役の変数「map」に「gmap」で表される地図画像を加えて(読み込ませて)いる。

最後に
if (!map.getCenter()) {
    map.setCenter(new OpenLayers.LonLat(param.lon, param.lat).transform(proj_4326, proj_3857), param.zoom);
}

で,中心点や表示の解像度を設定している。 ここでは,投影法を proj_4326 から proj_3857 に変更して表示しなさい,と指示している(あれ?これであってる?)

その1:OpenLayers 2 を使って複数種類の Google Map を表示に続く

0 件のコメント: