2014年7月9日水曜日

GNSS/GPS 経路の表示に OpenLayers 2 を使う (その1: OpenLayers 2 を使って複数の Google Map を表示)

これはGNSS/GPS 経路の表示に OpenLayers 2 を使う(その0:はじめに)からの続きである。
また,GNSS/GPS 経路の表示に OpenLayers 2 を使う(その0:はじめに)に目次がある。
ここでは OpenLayers 2.13.1 を使っている。
ここでは OpenLayers を使って Google Map をさせようと思う。 実は前回(GNSS/GPS 経路の表示に OpenLayers 2 を使う(その0:はじめに))すでに Google Map の表示の仕方を説明していた。 今回は同じ Google Map の表示だが,複数種類の Google Map を表示させよう。

 OpenLayers では,地図画像や,マーカーなどはベースとなる変数(画像のためのキャンバスのような意味を持つ変数。ここでは「map」)に, いろんな地図やマーカーなどの「Layer(層)」を重ねていくイメージである。 通常は「背景」となる「Base Layer」となる画像を置き,その上に「Overlay(上の層)」を重ねていく。 ここで,Base LayerOverlay の違いは,地図画像自体の透明度を変えるなどの加工ができるかどうか,であり, Base Layer は加工はできないみたいである(たぶん…)。

 今回は,複数種類の Google Map を全て Base Layer として表示させる。 そのため,複数の地図画像 (Base) Layer を重ねてやると,複数種類の Google Map を同じ画面上に表示できるが, 当然下の画像は見えなくなってしまう。 片方の画像の透明度を変えるとうまく兼ねて表示できるのだが,その点に関しては,「その4」辺りで述べようと思う。

 ここでは複数種類の地図を Base Layer として表示させるが,同時には見えないので,Layer 切り替えスイッチを使って表示を切り替える。 以下に具体例を示すので,自分で表示させて感触を得て欲しい。

 以下に web ソースコードを書いておこう。
<!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_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
        });
        // Google Maps(高度表示):base layer
        var gmapT = new OpenLayers.Layer.Google("Google TERRAIN", {
          type: google.maps.MapTypeId.TERRAIN,
          numZoomLevels:16
        });
        // Google Maps(衛星写真):base layer
        var gmapS = new OpenLayers.Layer.Google("Google SATELLITE", {
          type: google.maps.MapTypeId.SATELLITE,
          numZoomLevels:22
        });
        map.addLayers([gmap, gmapT, gmapS]);  // 最初は道路地図が見える。切り替えは Layer 切替スイッチで行う

        // 中心座標を設定
        if (!map.getCenter()) {
          map.setCenter(new OpenLayers.LonLat(param.lon, param.lat).transform(proj_4326, proj_3857), param.zoom);
        }
        // Layer の切替スイッチの表示
        map.addControl(new OpenLayers.Control.LayerSwitcher());
} // 初期化

</script>
</head>

<body onload="init_map()">
<div id="map_canvas"></div>

</body>
</html>

 基本的には前回と同じだが,異なる種類の Google Map を表示させている点が異なってる。 具体的には以下のソースの青字の部分で,Google Map の TERRAINSATELLITE 用の変数を用意している。 オプションとして「isBaseLayer: false」というのを「{...}」の中に書くと Base Layer ではなく,Overlay として表示させることができるが, ここではその指定をしていないので,全て Base Layer と認識される。

 そして,赤字の部分で,ROADMAP と一緒に TERRAINSATELLITE を表示させている。 前回と違う点は,「map.addLayer」ではなく「map.addLayers」と末尾に「s」がついていて, 地図の指定が「[]」で囲まれている。これにより,複数の地図を同じ map 変数に表示させることができる。 地図に表示される優先順位は [] 内の先頭からであり,この場合は「gmap」がまずは表示される。

 複数地図の表示の切替は緑字の部分で表示させている LayerSwitcher で行う。 これは地図画面の右上の方に表示されるが,最初は「+」記号だけが小さく表示される。 その「+」を押すと,複数の Layer の選択ボタンが現れる。 そこで ROADMAP と異なる種類の地図を選ぶと,表示されている Google Map が入れ替わる。

 自分で web ページが作れない人のために「その1」のサンプルを用意したので,具体的な表示を見てみて欲しい。(ちなみにサンプルページはアクセスログを取るルーチンを組み込んでいます)

その2:OpenLayers 2 を使って地理院地図を表示に続く

0 件のコメント: