[leaflet] vworld Geocoder API로 좌표 주소로 변환하기

Yuni·2023년 6월 9일
0

지도

목록 보기
9/12

우선 나는 java와 javascript 2가지를 따로따로 불러오는걸 해보았다
이 말은 각각 호출을 하는 방법을 만들었다

javascript는 전체적으로 다올렸고
java로 하는 부분은 그냥 데이터만 들어왔는지 확인하는거까지 진행하였다

1. java

이렇게 호출해놓고 javascript로 jsp로 띄워줄수있다!

@Controller
public class AddressController {
    private final Logger logger = LoggerFactory.getLogger(this.getClass());

    @GetMapping("/address")
    public @ResponseBody String AddressTranslation(/*String lat, String lng, HttpServletRequest request*/) throws Exception {

        logger.info("AddressTranslation: ");

        String apikey = Key.address;
        String searchType = "BOTH";                     // BOTH(둘다), PARCEL(지번), ROAD(도로명)
        String point = "127.101313354,37.402352535";    // lng(경도), lat(위도)
        String epsg = "epsg:4326";
        String type = "json";
        String simple = "false";
        String zipcode = "true";

        StringBuilder urlBuilder  = new StringBuilder("https://api.vworld.kr/req/address");
        urlBuilder.append("?service=address");
        urlBuilder.append("&version=2.0");
        urlBuilder.append("&request=getaddress");
        urlBuilder.append("&key=" + apikey);        // 서비스키
        urlBuilder.append("&type=" + searchType);   // 주소 유형
        urlBuilder.append("&point=" + point);       // lng(경도), lat(위도)
        urlBuilder.append("&crs=" + epsg);          // 좌표계
        urlBuilder.append("&format=" + type);         // json, xml
        urlBuilder.append("&simple=" + simple);     // 응답결과
        urlBuilder.append("&zipcode=" + zipcode);   // 우편번호 출력여부

        URL url  = new URL(urlBuilder.toString());
        logger.info("urlBuilder.toString(): " + urlBuilder.toString());
        HttpURLConnection conn = (HttpURLConnection) url.openConnection();
        conn.setRequestMethod("GET");
        conn.setRequestProperty("Content-type", "application/json");

        logger.info("Response code: " + conn.getResponseCode());

        BufferedReader rd;

        if (conn.getResponseCode() >= 200 && conn.getResponseCode() <= 300) {
            rd = new BufferedReader(new InputStreamReader(conn.getInputStream()));
        } else {
            rd = new BufferedReader(new InputStreamReader(conn.getErrorStream()));
        }
        StringBuilder sb = new StringBuilder();
        String line;
        while ((line = rd.readLine()) != null) {
            sb.append(line);
        }

        rd.close();
        conn.disconnect();

        logger.info("sb.toString(): "+sb.toString());

        JSONObject ret = new JSONObject();
        ret.put("list", sb);

        logger.info("ret.toString(): "+ret.toString());

        return ret.toString();
    }
}

2. javascript

자바스크립트를 독점적으로 파서.. 이게 분량이 더 많다
전에 만들어준 leflet 지도와 그때 같이 넣어두었던
위도/경도 실시간으로 보여줬던 js를 같이 사용 할 것이다.

var nConytol; // 변수 설정 해주기 
L.control.mousePosition().addTo(mymap); // 이렇게 넣어줬던 코드를
nConytol = L.control.mousePosition().addTo(mymap); // 이렇게 변경해준다

코드를 변경해주고 이제 수정을 들어가볼건데

api_address();

이렇게 함수를 선언해넣어주자

 function api_address() {

   mymap.on('mousemove', function(e ) { // mousemove, mouseup, mousedown
     //console.log(e._container);
     const lng = e.latlng.lng.toFixed(5);
     const lat = e.latlng.lat.toFixed(5);

     $.ajax({
       type: "get",
       url: "https://api.vworld.kr/req/address?service=address&request=getAddress&version=2.0&crs=epsg:4326&format=json&type=both&zipcode=true&simple=false",
       dataType : "jsonp",
       data : {
         point: lng+","+lat,
         key: '${key_address}'
       },
       async: true,
       success: function(data) {
                      
         /*
         여기에 코드 새롭게 추가!!!
         국내 외에 다른지역을 찍을경우 오류코드, 
         도로명이 없는경우에는 지번으로 뜨게 했다
         */
         try {
           if(data.response.status == "NOT_FOUND"){ 
             var prefixAndValue = "정보를 찾을 수 없는 지역입니다";
             nConytol._container.innerHTML = prefixAndValue;
                             
           }else if(data.response.result.length < 2){
             var prefixAndValue =  data.response.result[0].text; // 지번주소
             nConytol._container.innerHTML = prefixAndValue;
                              
           }else {
             var prefixAndValue =  data.response.result[1].text; // 도로명주소
             nConytol._container.innerHTML = prefixAndValue;
           }
         }catch (err){
           console.log(err, '에러 발생');
         }

       },
       error: function(xhr, status, error) {
         console.log(xhr, status, error);
       }
     });
   }

그리고 이제 위도경도.js에 들어가서 L.Control.MousePosition 참고문서

_onMouseMove: function (e) {

    var lng = this.options.lngFormatter ? this.options.lngFormatter(e.latlng.lng) : L.Util.formatNum(e.latlng.lng, this.options.numDigits);
    var lat = this.options.latFormatter ? this.options.latFormatter(e.latlng.lat) : L.Util.formatNum(e.latlng.lat, this.options.numDigits)
    var value = this.options.lngFirst ? lng + this.options.separator + lat : lat + this.options.separator + lng;
    var prefixAndValue = this.options.prefix + ' ' + value;
    // this._container.innerHTML = prefixAndValue; // 위도/경도 마우스위치 숨기려면 이거 주석처리
  }
});

맨 아래 저 부분을 주석처리를 해주면

원래 위도:경도가 떴던 부분에 주소가 뜨게된다!

mymap.on('mousemove', function(e )

클릭할때마다 나오게 하고싶다! 하면 이 부분을 mousedown이거로 바꿔주면 된다.
마우스 움직일때마다 찾게 했더니 하루 트래픽을 모두 써버려서.. 바꾸는걸 추천!

주소가 도로명이 안나오는 주소도 되게 많아서 없으면 지번주소가 나오게 해두기도 하였다!
--> 건물을 누르면 도로명이 나오고 길을 누르면 지번이 나옴

profile
backend developers

0개의 댓글