GNSS/GPS 経路の表示に OpenLayers 2 を使う（その０：はじめに）に目次がある。
ここでは OpenLayers 2.13.1 を使っている。
前回（その１：OpenLayers 2 を使って複数の Google Map を表示）は OpenLayers を使って Google Map を表示させたが，今回は地理院地図を表示させてみる。
以下に 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: Cyber Japan Map</title>
<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,
projection: proj_3857
});
// 地理院地図（標準地図）を半透明にしてoverlay として表示
var 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, isBaseLayer: false
});
var pale_map = new OpenLayers.Layer.XYZ('淡色地図', 'http://cyberjapandata.gsi.go.jp/xyz/pale/${z}/${x}/${y}.png', {
attribution: '<a href="http://portal.cyberjapan.jp/help/termsofuse.html" target="_blank">国土地理院</a>',
maxZoomLevel: 17
});
map.addLayers([std_map, pale_map]);
// 中心座標を設定
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 の時と同じである。 ここでは，地理院地図の「標準地図」と「淡色地図」を表示させている。 「淡色地図」を Base Layer にし，「標準地図」を Overlay として表示させている。
前回と異なる点として，赤字の部分にあるように，変数「map」の定義の際に表示する際の投影法を指定している。 これは OpenLayers の標準の投影法と地理院地図の投影法が異なるための処理である。
青字の部分で地理院地図用の変数を定義している。 標準地図と淡色地図の定義はほぼ同じだが，標準地図の方にだけ「isBaseLayer: false」というのがある。 これによって標準地図は Base Layer でなくなり，Overlay となる。
「その２」のサンプルを具体的な web ページとして用意したので，具体的な表示を見てみて欲しい。（ちなみにサンプルページはアクセスログを取るルーチンを組み込んでいます）
その3：中央にセンターマークを表示に続く
0 件のコメント:
コメントを投稿