2014年9月13日土曜日

OpenLayers 3 を使ってみよう(その9:KML データで経路を描画する)

これはOpenLayers 3 を使ってみよう(その8:ol.interaction.Draw 修正可能バージョンで表示領域の大きさの調整を行う)からの続きである。
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>&nbsp;不透明度・0.2ずつ変更:
    <a title="decrease opacity" href="javascript: changeOpacity(-0.2);">&lt;&lt;</a>
    <span id="opacity_control">0.5</span>
    <a title="increase opacity" href="javascript: changeOpacity(0.2);">&gt;&gt;</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 を使ってみよう(番外2:KML ファイルのフォーマットについて)に書いているので,そちらを見てみて欲しい。

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

その10:KML でマーカーを描画して吹出しをつけるに続く

0 件のコメント: