また，GNSS/GPS 経路の表示に OpenLayers 2 を使う（その０：はじめに）に目次がある。
ここでは OpenLayers 2.13.1 を使っている。
ここでは OpenLayers を使って Google Map をさせようと思う。 実は前回（GNSS/GPS 経路の表示に OpenLayers 2 を使う（その０：はじめに））すでに Google Map の表示の仕方を説明していた。 今回は同じ Google Map の表示だが，複数種類の Google Map を表示させよう。
OpenLayers では，地図画像や，マーカーなどはベースとなる変数（画像のためのキャンバスのような意味を持つ変数。ここでは「map」）に， いろんな地図やマーカーなどの「Layer（層）」を重ねていくイメージである。 通常は「背景」となる「Base Layer」となる画像を置き，その上に「Overlay（上の層）」を重ねていく。 ここで，Base Layer と Overlay の違いは，地図画像自体の透明度を変えるなどの加工ができるかどうか，であり， Base Layer は加工はできないみたいである（たぶん…）。
今回は，複数種類の Google Map を全て Base Layer として表示させる。 そのため，複数の地図画像 (Base) Layer を重ねてやると，複数種類の Google Map を同じ画面上に表示できるが， 当然下の画像は見えなくなってしまう。 片方の画像の透明度を変えるとうまく兼ねて表示できるのだが，その点に関しては，「その４」辺りで述べようと思う。
ここでは複数種類の地図を 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 の TERRAIN と SATELLITE 用の変数を用意している。 オプションとして「isBaseLayer: false」というのを「{...}」の中に書くと Base Layer ではなく，Overlay として表示させることができるが， ここではその指定をしていないので，全て Base Layer と認識される。
そして，赤字の部分で，ROADMAP と一緒に TERRAIN，SATELLITE を表示させている。 前回と違う点は，「map.addLayer」ではなく「map.addLayers」と末尾に「s」がついていて， 地図の指定が「[]」で囲まれている。これにより，複数の地図を同じ map 変数に表示させることができる。 地図に表示される優先順位は [] 内の先頭からであり，この場合は「gmap」がまずは表示される。
複数地図の表示の切替は緑字の部分で表示させている LayerSwitcher で行う。 これは地図画面の右上の方に表示されるが，最初は「＋」記号だけが小さく表示される。 その「＋」を押すと，複数の Layer の選択ボタンが現れる。 そこで ROADMAP と異なる種類の地図を選ぶと，表示されている Google Map が入れ替わる。
自分で web ページが作れない人のために「その１」のサンプルを用意したので，具体的な表示を見てみて欲しい。（ちなみにサンプルページはアクセスログを取るルーチンを組み込んでいます）
その2：OpenLayers 2 を使って地理院地図を表示に続く
0 件のコメント:
コメントを投稿