GNSS/GPS 経路の表示に OpenLayers 2 を使う（その０：はじめに）に目次がある。
ここでは OpenLayers 2.13.1 を使っている。
前回（その３：中央にセンターマークを表示）では 地図の中央にセンターマークを表示させた。 今回は，2つの地図を重ねて，一方の不透明度を操作して2つの地図を同時に見たり，一方だけにしたりしてみたい。 ここでの記載はy2blog OpenLayersでレイヤーをオーバレイ表示する方法を参考にさせてもらっている（というか，そのままに近いかもしれない…）。
以下に 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: Opacity</title>
<link rel="stylesheet" href="../../cj_map/popup.css" type="text/css">
<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
var map = null;
var std_map = null;
var gMaxOpacity = 1.0; // 不透明度の最大値
var gMinOpacity = 0.0; // 不透明度の最小値
// -------------------------------------------------------------------
// 初期化
function init_map() {
// 地図表示の変数定義
map = new OpenLayers.Map({
div: param.div, projection: proj_3857, displayProjection: proj_4326
});
// 地理院地図（標準地図）を半透明にしてoverlay として表示
std_map = new OpenLayers.Layer.XYZ('標準地図', 'http://cyberjapandata.gsi.go.jp/xyz/std/${z}/${x}/${y}.png', {
attribution: '<a href="http://portal.cyberjapan.jp/help/termsofuse.html" target="_blank">国土地理院</a>',
maxZoomLevel: 17, opacity: 0.5, isBaseLayer: false
});
// Google Maps（衛星写真）を base layer として表示
var gmap = new OpenLayers.Layer.Google("Google Satellite", {
type: google.maps.MapTypeId.SATELLITE, numZoomLevels:21
});
map.addLayers([std_map, gmap]);
// 中心座標を設定
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());
// スケールの表示
map.addControl(new OpenLayers.Control.ScaleLine());
} // 初期化
// -------------------------------------------------------------------
// 地理院地図 (var std_map) の opacity(不透明度) を変える
function changeOpacity(opacity) {
var newOpacity = ( parseFloat( OpenLayers.Util.getElement('opacity_control').value) + opacity ).toFixed(1); // 新しい opacity の値を求める
newOpacity = Math.min( gMaxOpacity, Math.max( gMinOpacity, newOpacity) ); // 最大値と最小値の範囲を超えないように
OpenLayers.Util.getElement('opacity_control').value = newOpacity; // opacity の数字の表示書き換え
std_map.setOpacity(newOpacity); // 地理院地図の opacity の変更
}
// -------------------------------------------------------------------
</script>
</head>
<body onload="init_map()">
<div id="map_canvas" style="width: 100%; height: 95%; position:absolute; top:35px; left:0px"></div>
<div><b>不透明度:(0.1刻み)
<a title="decrease opacity" href="javascript: changeOpacity(-0.1);"><<</a>
<input id="opacity_control" type="text" value="0.5" size="3" disabled="true">
<a title="increase opacity" href="javascript: changeOpacity(0.1);">>></a>
</b></div>
</body>
</html>
基本的な構造は前回や前々回と同じである。 今回に特徴的な部分を色付きにしてみた。 それぞれについて少しだけ（わかっている範囲で）説明しよう。
最初の青字の部分は，不透明度の最大値と最小値を定義している。 参考にしたサイトは 0.1 ～ 0.9 だったが，私は 0～1 にしてみた。 また，地図の定義の所で，Overlay になっている地理院地図の標準地図は，最初から不透明度を 0.5 として，重なっているのがわかるようにしてある。
ここで一番のミソとなるのが緑字の部分の部分である。 ここでは，web ページに表示させている矢印（<< と >>）のいずれかがクリックされた際に， 不透明度の数値を新しいものに置換え，最後に地理院地図・標準地図の Opacity（不透明度）を新しい数値に設定しなおしている。
最後に，web ページに矢印と不透明度の数値を表示する箱を用意している。
「その4」のサンプルを具体的な web ページとして用意したので，具体的な表示を見てみて欲しい。（ちなみにサンプルページはアクセスログを取るルーチンを組み込んでいます）
その5：KML ファイルで経路を表示に続く
0 件のコメント:
コメントを投稿