Newer
Older
2023-shota / map / domon / gps-game.js
var center = [38.891, 139.824];
var clickCount = 0;
var mymap = L.map("gpsmap").setView([38.891, 139.824], 16);
L.tileLayer('https://{s}.tile.osm.org/{z}/{x}/{y}.png', {
	attribution:
	'&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> \
	contributors'
}).addTo(mymap);

function latlngdist(pos1, pos2) {
    return pos1.distanceTo(pos2);
}
var path = [];				
var line = null;			
var lineprop = {		
    color: 'navy', opacity: 0.6, weight: 8
};
var sMarker, gMarker;		
var totalDist = 0;
var info = document.getElementById('info');
function updatedistance(delta) {	// 距離の加算を行ない結果を
    totalDist += delta;			// info要素に距離を表示する
    info.innerHTML = '距離: '+Math.round(totalDist*100)/100+'m';
}
var tm = 0;
var time = document.getElementById('time');
if (totalDist < 500) {tm = 5;
  }
  else if (totalDist < 1000){tm = 7;
  }
  else if (totalDist < 1500){tm = 9;
  }
  else if (totalDist< 2000){tm = 11;
  } 
  else if (totalDist < 2500){tm = 13;
  }
  else{tm = 15;
  }
function updatedistance(delta) {	
    totalDist += time;	
    time.innerHTML = '時間: '+Math.round(tm)+'分';
}
function resetPath() {		
    sMarker.remove(mymap);	
    gMarker.remove(mymap);	
    line.remove(mymap);		
    line = sMarker = gMarker = null;
    path = [];
    totalDist = 0;
    mymap.doubleClickZoom.enable();	
    info.innerHTML = 'クリアしました';
}
function measurePath(e) {		
    var imsg = '北緯 '+e.latlng.lat+' 東経 '+e.latlng.lng;
    mymap.doubleClickZoom.disable();	
    if (path.length > 1
	&& e.latlng.lat == path[path.length-1].lat
	&& e.latlng.lng == path[path.length-1].lng) {
	return null;	
    }
    path.push(e.latlng);		
    if (path.length == 1) {		// 始点未設定なら
	sMarker = L.marker(path[0]).addTo(mymap).bindPopup(imsg);
	gMarker = L.marker(path[0]).addTo(mymap).bindPopup(imsg);
	line = L.polyline(path, lineprop).addTo(mymap)	// polyline生成
	info.innerHTML = imsg;
	time.innerHTML = imsg;// 情報表示
    } else {				
	line.addLatLng(e.latlng);	
	gMarker.setLatLng(e.latlng);	
    }
    if (path.length > 1) {	
	updatedistance(latlngdist(path[path.length-2], path[path.length-1]));
    }
    if (e.originalEvent.shiftKey) {	// SHIFT+クリックで
	resetPath(e);			// 終了
    }
}
function removePoint(e) {		
    if (path.length > 1) {		
	let rm = path.pop();		
	updatedistance(-latlngdist(rm, path[path.length-1])); 
	line.setLatLngs(path);		
	gMarker.setLatLng(path[path.length-1]);	
	mymap.panTo(path[path.length-1]);	
    } else {				
	info.innerHTML = '始点は削れません。'
    }
}

mymap.on('click', measurePath);		
mymap.on('contextmenu', removePoint);	
document.getElementById('undo').addEventListener('click', removePoint);
document.getElementById('finish').addEventListener('click', resetPath);