GNSS/GPS 経路の表示に OpenLayers 2 を使う（その０：はじめに）に目次がある。
ここでは OpenLayers 2.13.1 を使っている。
前回（その５：KML ファイルで経路を表示）では KML ファイルに記載した経路情報を地図上に記載する方法を記述した。
今回は KML ファイルの中に経路とマーカー情報を記載したもの示したい。 マーカーはマウスでクリックすると吹き出しが現れて，情報を表示する。 ここの記述は地理院地図の地理院タイルを用いたサイト構築サンプル集を参考にしている。
以下に 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: KML with Markers</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, url: 'work/map_data.kml' };
//]]></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 selectControl = null;
// -------------------------------------------------------------------
// 初期化
function init_map() {
// 地図表示の変数定義
map = new OpenLayers.Map({
div: param.div, projection: proj_3857, displayProjection: proj_4326
});
// 地理院地図（標準地図）を表示
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
});
map.addLayer(std_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());
// スケールの表示
map.addControl(new OpenLayers.Control.ScaleLine());
// kml ファイルの読込み
var kmlLayer = new OpenLayers.Layer.Vector('GPSデータ', {
projection: proj_4326,
strategies: [new OpenLayers.Strategy.Fixed()],
protocol: new OpenLayers.Protocol.HTTP({
url: param.url,
format: new OpenLayers.Format.KML({extractStyles: true, extractAttributes: true, maxDepth: 2})
})
});
map.addLayer(kmlLayer);
// kml 内のマーカーをクリックした際の処理
kmlLayer.events.on({
featureselected: onFeatureSelect,
featureunselected: onFeatureUnselect
});
selectControl = new OpenLayers.Control.SelectFeature(kmlLayer);
map.addControl(selectControl);
selectControl.activate();
} // 初期化
// -------------------------------------------------------------------
// kml 内のマーカーのコメントのpop up 処理
function onFeatureSelect(event) {
var feature = event.feature;
var content = '<h2>' + feature.attributes.name + '</h2>';
if (feature.attributes.description) {
content = content + feature.attributes.description;
}
var popup = new OpenLayers.Popup.FramedCloud('chicken',
feature.geometry.getBounds().getCenterLonLat(),
new OpenLayers.Size(200,200),
content, null, true, onPopupClose
);
feature.popup = popup;
map.addPopup(popup);
}
function onFeatureUnselect(event) {
var popup = event.feature.popup;
if (popup) {
map.removePopup(popup);
popup.destroy();
delete popup;
}
}
function onPopupClose(event) {
selectControl.unselectAll();
}
// -------------------------------------------------------------------
</script>
</head>
<body onload="init_map()">
<div id="map_canvas"></div>
</body>
</html>
基本的な構造はこれまでと同じである。
今回も今回に特徴的な部分を色付きにしてみた。
それぞれについて説明しよう。青字の部分は変数「kmlLayer」に対して，マウスクリックというイベント処理を定義している。 緑字の部分でマウスクリックの際の処理をより具体的に記載してある。 「content」にコメントとして表示させたい項目を書き， 「popup」という名前の吹出し用の変数を定義して，map に加えている。
次に KML ファイルの具体例を書こう。
<?xml version="1.0" encoding="UTF-8"?>
<kml xmlns="http://www.opengis.net/kml/2.2">
<Document>
<description>
<![CDATA[<p>大杉谷20140615</p>]]>
</description>
<Style id="Line_1">
<LineStyle>
<color>ffff0000</color>
<width>3</width>
</LineStyle>
</Style>
<Style id="StartIcon">
<IconStyle>
<scale>1</scale>
<Icon><href>http://maps.gstatic.com/intl/ja_jp/mapfiles/ms/micons/hiker.png</href></Icon>
<hotSpot x="0.5" y="0.0" xunits="fraction" yunits="fraction"/>
</IconStyle>
</Style>
<Style id="PhotoIcon">
<IconStyle>
<scale>1</scale>
<Icon><href>http://maps.gstatic.com/intl/ja_jp/mapfiles/ms/micons/camera.png</href></Icon>
<hotSpot x="0.5" y="0.0" xunits="fraction" yunits="fraction"/>
</IconStyle>
</Style>
<Folder>
<name>Icons_on_the_Map</name>
<Placemark>
<name><![CDATA[<div id="wp_name">出発点</div><div id="wp_address">三重県多気郡大台町大杉</div>]]></name>
<description><![CDATA[<div id="wp_time_info">2014/06/15 07:22:32</div>]]></description>
<styleUrl>#StartIcon</styleUrl>
<Point>
<coordinates>
136.181595,34.2331033333333,320.7
</coordinates>
</Point>
</Placemark>
<Placemark>
<name><![CDATA[<div id="wp_name">Photo Point</div><div id="wp_address">三重県多気郡大台町大杉</div>]]></name>
<description><![CDATA[<div id="wp_time_info">2014/06/15 07:27:23</div><div id="wp_photo_info"><a href="./P1110149.html" target="_blank"><img src="./image/P1110149_thumb.png"></a> <a href="./P1110150.html" target="_blank"><img src="./image/P1110150_thumb.png"></a> </div>]]></description>
<styleUrl>#PhotoIcon</styleUrl>
<Point>
<coordinates>
136.180895,34.2326366666667,313.1
</coordinates>
</Point>
</Placemark>
</Folder>
<Folder>
<name>Tracks</name>
<Placemark>
<name>Track 1</name>
<description><
0 件のコメント:
コメントを投稿