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: Marker from Text file</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_data1.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 waypoints = 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);
// Way Points の表示：kml より後に表示するとこちらが上になる。
waypoints = new OpenLayers.Layer.Text( "Way_points", {location: "./work/waypointsfile4.txt", projection: proj_4326});
map.addLayer(waypoints);
} // 初期化
// -------------------------------------------------------------------
</script>
</head>
<body onload="init_map()">
<div id="map_canvas"></div>
</body>
</html>
基本的な構造はこれまでと同じである。
今回も今回に特徴的な部分を色付きにしてみた。
それについて説明しよう。青字の部分が今回のポイントである。 ここでは，マーカーの情報を別のテキストファイルにしておいて，それを読み込むことでマーカーを表示させている。 ポイントは赤字の部分に書いた「projection（投影法）の指定」である。 通常，緯度と経度で点を与えるが，この投影法を指定しておかないと，デフォルトの投影法になるため，思っている場所にマーカーが現れない。 全世界を表示すると，アフリカの辺りにマーカーが表示されてしまうのがわかる。
次にテキストファイルの具体例を書こう。
lat lon title description iconSize iconOffset icon 34.22814 136.174771666667 Photo Point 大杉谷 32,32 -16,-16 http://maps.gstatic.com/intl/ja_jp/mapfiles/ms/micons/camera.png 34.226625 136.174708333333 Photo Point 大杉谷<br><a href="./P1110158.html" target="_blank"><img src="./image/P1110162_thumb.png"></a> 32,32 -16,-16 http://maps.gstatic.com/intl/ja_jp/mapfiles/ms/micons/camera.png 34.22814 136.174771666667 Photo Point 大杉谷<br><a href="./P1110158.html" target="_blank"><img src="./image/P1110162_thumb.png"></a> 32,32 -16,-16 http://maps.gstatic.com/intl/ja_jp/mapfiles/ms/micons/camera.png 34.226625 136.174708333333 Photo Point 大杉谷<br><a href="./P1110158.html" target="_blank"><img src="./image/P1110164_thumb.png"></a> 32,32 -16,-16 http://maps.gstatic.com/intl/ja_jp/mapfiles/ms/micons/camera.pngこのテキストファイルは，基本的にタブで項目を区切らないといけない。 ここでは表示の都合でタブにはなっていないが…。 項目は，最初の行に各行の表示項目を指定しておく。 ここでは「lat」，「lon」，「title」，「description」，「iconSize」，「iconOffset」，「icon」を記載しているのがわかる。 「lat」は latitude なので緯度，「lon」は longitude で経度を表している。 「title」は点のタイトル，「description」はコメントの具体的な内容である。 その他，アイコンの大きさや，どの程度ずらして表示するか，アイコン画像の URL を指定している。 大きさやオフセットは pixel で指定している。
「その7」のサンプルを具体的な web ページとして用意したので，具体的な表示を見てみて欲しい。（ちなみにサンプルページはアクセスログを取るルーチンを組み込んでいます）
その8：マーカーと経路を別々の KML ファイルで表示に続く
0 件のコメント:
コメントを投稿