Newer
Older
2024-C1232021_kanata / measure.js
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);