2014年7月13日日曜日

GNSS/GPS 経路の表示に OpenLayers 2 を使う(その6:KML ファイルで経路とマーカーを表示)

これはGNSS/GPS 経路の表示に OpenLayers 2 を使う (その5:KML ファイルで経路を表示)からの続きである。
GNSS/GPS 経路の表示に OpenLayers 2 を使う(その0:はじめに)に目次がある。
ここでは OpenLayers 2.13.1 を使っている。
前回(その5: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><![CDATA[Original tracking filename : LOG00489.nma</description>
        <styleUrl>#Line_1</styleUrl>
        <LineString>
          <extrude>0</extrude>
          <tessellate>1</tessellate>
          <altitudeMode>clampToGround</altitudeMode>
          <coordinates>
            136.181595,34.2331033333333,320.7
            136.181633333333,34.233065,329.8
            136.181591666667,34.23311,310.7
            136.18165,34.23311,311.2
            136.181568333333,34.2330966666667,309.3
            136.181206666667,34.2327066666667,310.8
            136.180971666667,34.2327233333333,311.9
          </coordinates>
        </LineString>
    </Placemark>
  </Folder>
</Document>
</kml>
KML ファイルの基本的な記載は前回と同じである。 違いは青字の部分緑字の部分に書かれている。 青字の部分では,出発点,写真を撮った点,用のアイコンを指定している。 緑字の部分はマーカーの具体的な記載である。 中身は見ていただければいいと思う。

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

その7:マーカーを text ファイル,経路を KML で表示に続く

0 件のコメント: