Proj4를 활용한 Converting 작업 (X/Y 좌표 → 위도/경도)

---

[2016-12-20 화요일]

＊내용:

1. Converting: X/Y 좌표 → 위도/경도

- X/Y 좌표 유형: UTM-K (GRS80)

- 위도/경도 유형: WG84

- Proj4js 사용

- 추가 할 일

· 함수 만들기

· 좌표1, 좌표2 받아서 위도, 경도로 전환

· 거리 계산하여 Alert

---

＊참고 자료: 위도 경도 거리 계산

＊화면

＊테스트

- 로직

- 실행

1. Server
※ 좌표 데이터를 경위도 데이터로 변환 → 클라이언트로 전송(res.send)

var bodyParser = require('body-parser');
var jsonParser = bodyParser.json();
app.use(bodyParser.json());

app.post('/convertGsrToUtmK', function (req, res) {
    console.log('\n/convertGsrToUtmK');
    //console.log('body: ' + req.body);
   
    var coordinates = req.body; // 받아온 XY좌표
    // point array 1
    var point1 = [coordinates.x1, coordinates.y1]
   
    // point array 2
    var point2 = [coordinates.x2, coordinates.y2]
   
    var firstProjection = "+proj=tmerc +lat_0=38 +lon_0=127.5 +k=0.9996 +x_0=1000000 +y_0=2000000 +ellps=GRS80 +units=m +no_defs"; // from
    var secondProjection = "+proj=longlat +ellps=WGS84 +datum=WGS84 +no_defs"; // to
   
    // #1. 변환한 위도 경도 값 저장
    var lonAndLat1 = proj4(firstProjection, secondProjection, point1);// from 경위도
    var lonAndLat2 = proj4(firstProjection, secondProjection, point2); // to 경위도
   
    // #2. 하나의 JSON ARRAY로 데이터 저장 
    var retPoints ={
        X1: lonAndLat1[0],
        Y1: lonAndLat1[1],
        X2: lonAndLat2[0],
        Y2: lonAndLat2[1]
    };
    // #3. json stringify → response send
    res.send(JSON.stringify(retPoints));
});
 
var bodyParser = require('body-parser');
var jsonParser = bodyParser.json();
app.use(bodyParser.json());

app.post('/convertGsrToUtmK', jsonParser, function (req, res) {
    console.log('\n/convertGsrToUtmK');
    //console.log('body: ' + req.body);
   
    var coordinates = req.body; // 받아온 XY좌표
    // point array 1
    var point1 = [coordinates.x1, coordinates.y1]
   
    // point array 2
    var point2 = [coordinates.x2, coordinates.y2]
   
    var firstProjection = "+proj=tmerc +lat_0=38 +lon_0=127.5 +k=0.9996 +x_0=1000000 +y_0=2000000 +ellps=GRS80 +units=m +no_defs"; // from
    var secondProjection = "+proj=longlat +ellps=WGS84 +datum=WGS84 +no_defs"; // to
   
    // #1. 변환한 위도 경도 값 저장
    var lonAndLat1 = proj4(firstProjection, secondProjection, point1); // from 경위도
    var lonAndLat2 = proj4(firstProjection, secondProjection, point2); // to 경위도
   
    // #2. 하나의 JSON ARRAY로 데이터 저장 
    var retPoints ={
        X1: lonAndLat1[0],
        Y1: lonAndLat1[1],
        X2: lonAndLat2[0],
        Y2: lonAndLat2[1]
    };
    // #3. json stringify → response send
    res.send(JSON.stringify(retPoints));
});

2. Client

① 버튼

<button onclick="convertGsrToUtmK(setLatLanPoints)">
        convertGsrToUtmK
</button>

② 좌표 정보 Server로 Send → 경위도 정보로 변환 → 거리 계산

function convertGsrToUtmK(callback) {
    console.log('fn convertGsrToUtmK');
    // 좌표 data
    var data = {};
    // 좌표 1
    data.x1 = $("#x1").val();
    data.y1 = $("#y1").val();
    // 좌표 2
    data.x2 = $("#x2").val();
    data.y2 = $("#y2").val();
           
    $.ajax({
        type: 'POST',
        data: JSON.stringify(data),
        contentType: 'application/json',
        url: 'http://localhost:8080/convertGsrToUtmK',
        success: function (data) {
            console.log('convert success');
            var result = JSON.parse(data); // 서버로부터 받은 경위도 데이터
            console.log(result);
            // [호출 순서] convertGsrToUtmK → setLatLanPoints → getDistanceFromLatLonInKm
            callback(result, getDistanceFromLatLonInKm);
        }
    });
}
 
// 경위도 값 Set
function setLatLanPoints(points, callback) {
    $("#lon1").val(points.X1);
    $("#lat1").val(points.Y1);
    $("#lon2").val(points.X2);
    $("#lat2").val(points.Y2);
    callback(); // [Name] getDistanceFromLatLonInKm
}
 
// 계산된 경위도 사이의 거리 계산
function getDistanceFromLatLonInKm() {
    //convertGsrToUtmK(setLatLanPoints); // 좌표 변환
    var lat1 = document.getElementById('lat1').value;
    var lon1 = document.getElementById('lon1').value;
    var lat2 = document.getElementById('lat2').value;//lat1.toRadians();
    var lon2 = document.getElementById('lon2').value;//lat1.toRadians();
    var R = 6371; // Radius of the earth in km
    var dLat = deg2rad(lat2 - lat1);  // deg2rad below
    var dLon = deg2rad(lon2 - lon1);
           
    var a = Math.sin(dLat / 2) * Math.sin(dLat / 2) +
                     Math.cos(deg2rad(lat1)) * Math.cos(deg2rad(lat2)) *
                     Math.sin(dLon / 2) * Math.sin(dLon / 2);
    var c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1 - a));
    var d = R * c; // Distance in km
    $("#distanceKm").val(d + 'km');
    return d;
}
function deg2rad(deg) {
    return deg * (Math.PI / 180)
}
function cal() {
    var lat1 = $('#lat1').val();
    var lat2 = $('#lat2').val();
    var R = 6371e3; // metres
    var φ1 = lat1.toRadians();
    var φ2 = lat2.toRadians();
    var Δφ = (lat2 - lat1).toRadians();
    var Δλ = (lon2 - lon1).toRadians();
    var a = Math.sin(Δφ / 2) * Math.sin(Δφ / 2) +
                  Math.cos(φ1) * Math.cos(φ2) *
                  Math.sin(Δλ / 2) * Math.sin(Δλ / 2);
    var c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1 - a));
    var d = R * c;
}

＊결과 화면 및 검증

- 결과 화면

- 검증