반응형

JavaScript 5

vworld 지도 만들기(13) - 개별공시지가 표시하기(1) : JavaScript

이제 법정동 코드도 구했으니 법정동 코드를 이용해 해당 토지에 대한 개별 공시지가를 구해 보겠습니다. 1. API 검색먼저 해당 API를 검색해야 하는데,오픈API에서 API레퍼런스를 누른 후 국가중점데이터API의 레퍼런스 버튼을 누릅니다. 그러면 개별공시가 다음에 WMS, WFS, 속성이 나오는데, WMS는 맵 이미지를 조회하는 기능이고, WFS는 도형 및 속성값을 포함한 피처 집합을 조회하는 기능이라는데, 결괏값을 보니 해당 토지의 경계점 좌표와 개별공시지가를 반환합니다. 그리고, 개별공시지가속성조회는 해당 토지에 대한 개별공시지가를 조회하는 기능이므로 이것을 이용하겠습니다. 2. 샘플 코드위에서 개별공시지가속성조회를 누르면맨 아래에 샘플코드가 JAVA, JavaScript, JSONP, PHP, P..

Map(WEB) 2025.03.03

오픈 API를 이용한 법정동 코드 조회(5) - PHP(2)

이번에는 HTML과 PHP를 연결해서 클릭한 지점에 대한 주소뿐만 아니라 법정동 코드를 표시해 보겠습니다. 2. 코드 2 가. html 파일파일명은 search_legal_dong3.html 정도로 하면 됩니다. 나. php 파일파일명은 get_legal_dong.php입니다. $dong을 get 방식으로 받아서 처리하기 위해 주석 처리했던 부분을 해제하고,$dong을 직접 입력했던 부분은 주석 처리한 것 말고는 동일합니다. 다. html 파일 설명 (1) XMLHttpRequest()의 open 대상이 달라졌음get_text ='get_legal_dong.php?dong='+dong; xhr=new XMLHttpRequest(); xhr.open("GET", get_text); JavaScri..

Map(WEB) 2025.02.28

오픈 API를 이용한 법정동 코드 조회(3) - JavaScript(2)

2. 코드 2오픈 API를 이용한 법정동 코드 조회(2) - JavaScript(1)에서는송파동에 대한 법정동 코드만을 구할 수 있었는데, 이것을 좌표 클릭 시 표시되는 주소를 이용해서해당 동(리)에 대한 법정동 코드를 구하려고 합니다. 지도를 클릭하면 해당 지점에 대한 주소를 표시하는 글에 위 코드를 붙여서 클릭한 지점의 법정동 코드를 표시해 보겠습니다. 인증키는 입력하지 않았으므로 자신의 것으로 채우기 바랍니다.  가. function으로 변경 송파동에 대한 법정동 코드를 구하는 코드를function get_legal_code(dong) {안에 넣고, dong을 인수로 전달합니다. 나. 지번 주소에서 법정동 추출const match = result.response.result[0].text.mat..

Map(WEB) 2025.02.26

vworld 지도 만들기(6) - 2D지도 이동과 줌(2)

먼저 vworld 지도 만들기(5)에서 만들었던지도 이동과 줌 기능에 대한 동영상을 살펴 보기 바랍니다.버튼을 클릭하면 여의도 및 독도로 이동하고, 배율이 변경됩니다. 이번에는 여의도와 독도 버튼의 위치를 한 화면에 표시되도록 해보겠습니다. 1. 지도와 버튼을 한 화면에 표시하기ChatGPT에게 물어보니 아래와 같이 div문 아래에 JavaScript문을 추가하라고 합니다.기존 전체 코드는 https://lsw3210.tistory.com/610에서 확인 바랍니다. 설명도 잘 적혀 있습니다. 그리고, 특정 요소의 높이를 빼고 싶으면 extraSpace를 이용하면 된다고 합니다. 실제로 크롬 창의 크기를 조절해 봤는데, 여의도, 독도 버튼이 한 화면에 잘 표시됩니다. 오른쪽에 스크롤 바가 없는 것을 보..

Map(WEB) 2025.02.07

vworld 지도 만들기(1) - 인증키 신청, 관리

1. vworld 지도 개요가. vworld의 오픈APIhttps://www.vworld.kr/ 에 접속하면 아래와 같이 위쪽 메뉴에 오픈API가 있고, 아래에도 버튼 형식으로 오픈API가 있습니다. 오픈API를 누르면위쪽에 브이월드 오픈API에 대한 설명이 나오고,그 아래 왼쪽에 추천API, 오른쪽에 인기 활용 사례가 표시되고,왼쪽 추천API 아래에 국가중점데이터API, 2D지도 API와 웹지엘 3D지도 API 3개가 있습니다.  나. 2D지도 API먼저 2D지도 API를 이용해 지도를 그려보고, 지도와 데이터를 연결하기 위해 국가중점데이터 API를 다뤄보도록 하겠습니다. 2D지도 API는 다시 버전 1.0과 2.0으로 나뉘는데, 2.0을 누르면 레퍼런스와 코드샘플 탭이 있고,레퍼런스 아래에 소개, 지..

Map(WEB) 2025.01.31
반응형