var mymap = L.map('mymap').setView([38.891, 139.824], 16);
L.tileLayer('http://cyberjapandata.gsi.go.jp/xyz/std/{z}/{x}/{y}.png', {
attribution: '<a href="http://maps.gsi.go.jp/development/ichiran.html">国土地理院</a>'
}).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');
var MAX_DISTANCE = 2000;
function updatedistance(delta) {
totalDist += delta;
info.innerHTML = `距離: ${Math.round(totalDist)}m`;
if (totalDist >= MAX_DISTANCE) {
alert("目標距離に達しました!");
}
}
function resetPath() {
if (line) line.remove();
if (sMarker) sMarker.remove();
if (gMarker) gMarker.remove();
path = [];
totalDist = 0;
line = sMarker = gMarker = null;
mymap.doubleClickZoom.enable();
info.innerHTML = "リセットされました。";
}
function measurePath(e) {
var latlng = e.latlng;
if (
path.length > 1 &&
latlng.lat === path[path.length - 1].lat &&
latlng.lng === path[path.length - 1].lng
) {
return;
}
path.push(latlng);
var message = `北緯 ${latlng.lat} 東経 ${latlng.lng}`;
if (path.length === 1) {
sMarker = L.marker(latlng).addTo(mymap).bindPopup(message);
gMarker = L.marker(latlng).addTo(mymap).bindPopup(message);
line = L.polyline(path, lineprop).addTo(mymap);
info.innerHTML = "始点が設定されました。";
} else {
line.addLatLng(latlng);
gMarker.setLatLng(latlng);
updatedistance(latlngdist(path[path.length - 2], latlng));
}
if (e.originalEvent.shiftKey) {
resetPath();
}
}
function removePoint() {
if (path.length > 1) {
let removed = path.pop();
updatedistance(-latlngdist(removed, 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);
document.getElementById("undo").addEventListener("click", removePoint);
document.getElementById("finish").addEventListener("click", resetPath);