OpenLayers 3 を使ってみよう（その0：はじめに：地理院地図を表示）に目次がある。
ここでは OpenLayers 3.7.0 を使っている。
前回（その8：ol.interaction.Draw 修正可能バージョンで表示領域の大きさの調整を行う）では， ol.interaction.Draw を使った経路作成で，地図の表示の中心や zoom を自動調整する方法について書いた。
今回は趣きを変えて KML データから経路を地図上に表示する方法について述べよう。
KML データから経路を表示させるには，KML タイプの Vector layer を作ればよい。 ol.layer.Vector クラスの変数（インスタンス）で，ol.format.KML クラスのフォーマットを持つ ol.source.Vector を source として定義すればよい。
まず，いつものように以下に web ページのソースを載せる。 ここではOpenLayers 3 を使ってみよう（その2：地図の不透明度を変える）に近いので， そこからの変更箇所の色を変えて示そう。と言っても，web ページのソースコードはタイトルと JavaScript のファイル名が違うぐらいなのだが…。
<!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">
<link rel="stylesheet" href="http://openlayers.org/en/v3.7.0/css/ol.css" type="text/css">
<script src="http://openlayers.org/en/v3.7.0/build/ol.js" type="text/javascript"></script>
<style type="text/css">
div.fill {width: 100%; height: 100%;}
body {padding: 0; margin: 0;}
html, body, #map {height: 100%; width: 100%;}
.ol-attribution {
padding: 3px; position: absolute; background-color:#ffffff;
background-color:rgba(230,255,255,0.7);
right: 3px; bottom:5px; font-size:12px;
}
.ol-attribution ul { padding: 0px; line-height: 14px; margin: 0px; }
.ol-attribution li { line-height: inherit; display: inline; list-style: none outside none; }
.ol-zoom .ol-zoom-out { margin-top: 202px; }
.ol-zoomslider { background-color: transparent; top: 2.3em; }
.ol-touch .ol-zoom .ol-zoom-out { margin-top: 212px; }
.ol-touch .ol-zoomslider { top: 2.75em; }
</style>
<title>OpenLayers 3 Example: KML Layer</title>
<script src="ol3ex9.js" type="text/javascript"></script>
</head>
<body onload="init_map()">
<div id="map_canvas" style="width: 100%; height: 97%; position:absolute; top:25px; left:0px; font-size:100%;"></div>
<div style="font-size:85%"> 不透明度：<a title="decrease opacity" href="javascript: directSetOpacity(0.1);">0.1</a>
<a title="decrease opacity" href="javascript: directSetOpacity(0.5);">0.5</a>
<a title="decrease opacity" href="javascript: directSetOpacity(1.0); ">1.0</a>
<b> 不透明度・0.2ずつ変更:
<a title="decrease opacity" href="javascript: changeOpacity(-0.2);"><<</a>
<span id="opacity_control">0.5</span>
<a title="increase opacity" href="javascript: changeOpacity(0.2);">>></a></b>
</div>
</body>
</html>
違いはタイトルと JavaScript のファイル名ぐらいである。
主な違いは JavaScript の中身なので，次に JavaScript の中身について見てみよう。次に JavaScript を載せる。ここでもOpenLayers 3 を使ってみよう（その2：地図の不透明度を変える）と比べて，変更箇所の色を変えて表示する。説明は JavaScript のコードの下に書いておく。
var cyberJ = null; // 地理院地図用の変数
var center_lon = 136.181193333; // 中心の経度（大杉谷，宮川第三発電所）
var center_lat = 34.2329783333; // 中心の緯度（大杉谷，宮川第三発電所）
var kml_url = "work/map_data1.kml";
var initZoom = 15; // ズームの初期値
var MinZoom = 6; // ズームの最小値（最も広い範囲）
var MaxZoom = 21; // ズームの最大値（最も狭い範囲）
var initPrecision = 8; // 座標表示の小数点以下の桁数の初期値
var initOpacity = 1.0; // 不透明度の初期値
var gMaxOpacity = 1.0; // 不透明度の最大値
var gMinOpacity = 0.0; // 不透明度の最小値
// *******************************************************************
function init_map() {
// 表示用の view 変数の定義
var view = new ol.View({maxZoom: MaxZoom, minZoom:MinZoom});
// cyberJ の opacity をいじるために，cyberJ という変数に入れている。
cyberJ = new ol.layer.Tile({
opacity: initOpacity,
source: new ol.source.XYZ({
attributions: [ new ol.Attribution({ html: "<a href='http://maps.gsi.go.jp/development/ichiran.html' target='_blank'>国土地理院</a>" }) ],
url: "http://cyberjapandata.gsi.go.jp/xyz/std/{z}/{x}/{y}.png", projection: "EPSG:3857"
})
});
// 経路の KML データ
// v3.11.0 以降の場合は new ol.format.KML() を new ol.format.KML({ showPointNames: false }) とする。
var kml_vector = new ol.layer.Vector({
source: new ol.source.Vector({
url: kml_url,
format: new ol.format.KML()
})
});
// -------------------------------------------------------------------
// 地図変数 (map 変数) の定義。地理院地図を表示するように指定している
var map = new ol.Map({
target: document.getElementById('map_canvas'),
layers: [cyberJ, kml_vector],
view: view,
renderer: ['canvas', 'dom'],
controls: ol.control.defaults().extend([new ol.control.ScaleLine()]),
interactions: ol.interaction.defaults()
});
// zoom slider の追加
map.addControl(new ol.control.ZoomSlider());
// 中心の指定。view に対して指定。transform を忘れないこと。
view.setCenter(ol.proj.transform([center_lon, center_lat], "EPSG:4326", "EPSG:3857"));
// zoom の指定。view に対して指定する。
view.setZoom(initZoom);
// span opacity_control (地理院地図の不透明度) に初期値（実数）を入れる。
document.getElementById('opacity_control').innerHTML = initOpacity.toFixed(1);
} // 初期化
// -------------------------------------------------------------------
// 地理院地図 (var cyberJ) の opacity(この場合は不透明度) を変える
function changeOpacity(opacity) {
var newOpacity = (parseFloat(document.getElementById('opacity_control').innerHTML) + opacity).toFixed(1); // 新しい opacity の値を求める
newOpacity = Math.min(gMaxOpacity, Math.max(gMinOpacity, newOpacity)); // 最大値と最小値の範囲を超えないように
cyberJ.setOpacity(newOpacity); // 地理院地図の opacity の変更
document.getElementById('opacity_control').innerHTML = newOpacity.toFixed(1); // opacity の数字の表示書き換え
}
function directSetOpacity(opacity) {
cyberJ.setOpacity(opacity);
document.getElementById('opacity_control').innerHTML = opacity.toFixed(1);
}
JavaScript の変更も大したことはない。
経路とマーカー用の KML データを持つ vector layar を定義し，それを map の定義式の layers の中で map に登録しているだけである。
KML ファイルについての説明はOpenLayers 3 を使ってみよう（番外２：KML ファイルのフォーマットについて）に書いているので，そちらを見てみて欲しい。
「その9」のサンプルを具体的な web ページとして用意したので，具体的な表示を見てみて欲しい。（ちなみにサンプルページはアクセスログを取るルーチンを組み込んでいます）
その10：KML でマーカーを描画して吹出しをつけるに続く
0 件のコメント:
コメントを投稿