ホームページ作成支援ツール・撮影ポイント取得

国土地理院の地図が OpenLayer にバージョンアップになってから表示できなくなった。解決法が分からず国土地理院に尋ねると OpenLayer の参考書をご覧ください、ということだった。OpenLayer とは何ものなのかさえ分からないので解決法はさっぱり分からなかったが、OpenLayer とは Google Map などの表示に使われているものらしいことが分かった。

つまり Google Map API が使えるということらしい。しかし地図をどのように組み込むのかが分からない。本を探したりネットを検索したりの期間が長い間続いた。そしてようやく、それを教えてくれるサイト[ http://y2web.net/blog/computer/webmap/show_cj4_tiles_on_google_map_system-3355/ ]に辿り着くことができ、国土地理院の地図を組み込む方法が分かった。どこのどなたか分からないが感謝・感謝!!

今まで国土地理院の地図は別表示だったので、GPS軌跡も地理院の仕様に沿ったものと、GoogleMap の仕様に沿ったものとふた通り作成していた。
撮影ポイントを表示するマーカーは地理院の軌跡を作成するときに、GPSの時刻データとJPEG画像の撮影時刻データとを照合して作成していた。
今回、地理院仕様の「points.xml」を作成する必要がなくなったために、マーカーのポイントもGoogle Map 用のGPS軌跡を作成するコードの中で作成する必要がある。
そこで下記のように、以前作成した EncodedPolyline作成 の function を修正した。

<script language="Javascript">

//--------------------------------------------
//EncodedPolyline作成
//--------------------------------------------

function createEncodedPolyline(){
	var buff = [];
	var encodedPath;

	var dateStr, timeStr, jst, jpgTime, gpsTime, sTime, eTime;

	//撮影ポイント用画像(最大20枚)の撮影時刻(ミリ秒)
	for (var j = 0; j < 20; j++) {
		if (jpgData(j,0) != "") {
			dateStr = gpsDate2dateStr(jpgData(j,2));
			timeStr = gpsTime2timeStr(jpgData(j,2));
			jst     = dateTimeStr2dateJST(dateStr,timeStr);
			jpgData(j,7) = jst;
		}
	}

	//GPXのデータを取得する
	$.get(gpxPath2, function(xml){
		var gpx = $("trkpt", xml);

		//受け取った結果から緯度経度データを取り出し、配列に格納
		var trkpt, lat, lng, i, j, latLng, ele, utc, diffTime;

		for (i = 0; i < gpx.length; i++) {
			//<trkpt lat="yyy" lng="xxx">からyyy,xxxを取り出す
			lat = $(gpx[i]).attr("lat");
			lng = $(gpx[i]).attr("lon");
			ele = $(gpx[i]).find("ele").text();
			utc = $(gpx[i]).find("time").text();
			utc = utc.replace(/-/g, "/");

			dateStr = gpsDate2dateStr(utc);
			timeStr = gpsTime2timeStr(utc);
			jst     = dateTimeStr2dateJST(dateStr,timeStr);
			gpsTime = jst.getTime() + 32400000;			//JSTに変換するため9時間プラス

			//撮影ポイント用画像(最大20枚)の撮影時刻とGPS時刻を照合、時刻差の最小値=撮影ポイント
			for (j = 0; j < 20; j++) {
				if (jpgData(j,0) != "") {
					diffTime = Math.abs(gpsTime - jpgData(j,7));
					if (jpgData(j,8) > diffTime) {
						jpgData(j,8) = diffTime;
						jpgData(j,3) = lat + " " + lng;
						jpgData(j,4) = ele;
					}
				}
			}

			//GPS軌跡の範囲を取得(南西の角から北東の角の緯度経度取得)
			//緯度経度の最小値=南西の角(sw) 緯度経度の最大値=北東の角(ne)
			lat = +lat;						//文字列を数値に変換
			lng = +lng;						//文字列を数値に変換
			maxE = (maxE < lng) ? lng : maxE;
			minE = (minE > lng) ? lng : minE;
			maxN = (maxN < lat) ? lat : maxN;
			minN = (minN > lat) ? lat : minN;

			if (i == 10) {
				sTime = gpsTime / 1000;				//Start時間(最初の10ポイントは準備中として捨てる)
			}
			if (i == gpx.length - 2){
				eTime = gpsTime / 1000;				//End時間(最後の1ポイントは捨てる)
			}

			//buffにGPS位置データを格納する
			buff.push( new google.maps.LatLng(lat, lng) );
		}
		//64進数のエンコードポリラインを作成(64進数のものすごく長い文字列、64進数の文字にはASCII 0x20 から64文字使用している)
		encodedPath = google.maps.geometry.encoding.encodePath(buff);
	});
	gpolylinepoints = encodedPath.replace(/\\/g, "\\\\");			//メタキャラ打ち消し(¥を\\に書き換え)
	walkSecond = eTime - sTime;						//行動時間(End時間 - Start時間)
}


// 日付形式を書き換える (例)2014-05-19 → [dateStr] "2014/05/19"
function gpsDate2dateStr(s){
    var yy = s.substr(0,4);
    var mm = s.substr(5,2);
    var dd = s.substr(8,2);
    return (yy + '/' + mm + '/' + dd);
}

// 時刻形式を書き換える (例)8:13:20 → [timeStr] " 8:13:20"
function gpsTime2timeStr(s){
	var pos = s.indexOf(":");
	var hh = s.substr(pos-2, 2);
	var mm = s.substr(pos+1, 2);
	var ss = s.substr(pos+4, 2);
    return (hh + ':' + mm + ':' + ss);
}

// 日時表形式を書き換える (例)"2014/05/19 18:13:20"
function dateTimeStr2dateJST(dateStr,timeStr){
    var d = new Date(dateStr + ' ' + timeStr);
    return d;
}

</script>

現在位置: ホームなんでも日記メニュー > このページ