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);