컴퓨터를 만나는 기쁨

vworld 지도 만들기(11) - 좌표에 대한 주소 검색하기(3)

vworld 지도 만들기(9) - 좌표에 대한 주소 검색하기(2)에서 만든 프로그램을 실행하고 확인해 보니좌표에 대한 주소는 바뀌는데 좌표 표시는 지도의 중심( vmap.getView().getCenter() ) 을 기준으로 하고 있어서// 좌표 변환 content = "좌표: " + ol.coordinate.toStringHDMS(ol.proj.transform(vmap.getView().getCenter(),"EPSG:3857","EPSG:4326")) + ""; 지도의 중심이 바뀌지 않으면, 다시 말해 표시되는 지도가 동일하면 클릭한 지점이 달라져도 좌표가 동일하게 표시되는 문제가 발견되어 이를 해결하고자 합니다. 1. 해법 1 : 지도의 중심점 이동let coordinate = evt.coord..

지난번에는 클릭한 지점에 대한 좌표값을 구한 다음 주소를 구했는데,이번에는 반대로 주소를 입력하면 주소에 대한 좌표값을 구하는 것을 해보겠습니다. API는 지난번과 같은 페이지에 있는데, 왼쪽 '주소를 좌표로 변환' 탭의 내용을 참고합니다. 1. 예제 코드자바스크립트 예제 코드가 아래와 같이 작성되어 있습니다. 이를 기존 코드에 갖다 붙이면 아래와 같습니다.   2. 코드 실행on_click 메서드이기 때문에 지도가 로딩된 다음 아무 지점이나 클릭하면(F12키를 눌러서) console 창에서 좌표를 확인할 수 있습니다. 잘 안 보여서 해당 부분만 확대하면 아래와 같습니다. point x는 127.057115634, y는 37.512953367입니다. 3. popup으로 표시9편에서 다뤘던 popup을..

이번에는 alert 창이 아니라 클릭한 지점에 팝업 창을 표시해서 좌표 등 정보를 표시해 보겠습니다. 1. vw.ol3.popup.Popup 기능2D지도 API 2.0중 popup 기능을 이용하면 되는데,코드 샘플 중 popup을 누릅니다. 예제 코드는 아래와 같이 되어 있는데, var pop = null ; vw.ol3.MapOptions = { basemapType: vw.ol3.BasemapType.GRAPHIC , controlDensity: vw.ol3.DensityType.EMPTY , interactionDensity: vw.ol3.DensityType.FULL , controlsAutoArrange: true , homePosition: ..

1. 관련 API지도를 클릭했을 때 해당 좌표에 대한 주소를 알려면 오픈API에서 Geocoder API 2.0을 이용합니다. 맨 아래 사용예제에 요청 URL이 있고, 그 오른쪽에 Java, Python, JS(AJAX), R용 코드가 있습니다.JS(AJAX) 탭의 코드를 보면 아래와 같습니다./* JS(AJAX) 코드 사용예제 */ $.ajax({ url: "https://api.vworld.kr/req/address?", type: "GET", dataType: "jsonp", data: { service: "address", request: "getaddress", version: "2.0", crs: "EPSG:4326", type: "ROAD", point: "1..

1. vworld에서 사용하고 있는 좌표계 vworld는 우리에게 친숙한 위, 경도를 사용하지 않고, 아래와 같이 14129709.590359,4512313.7639686와 같은 이상한 숫자(좌표)를 사용하고 있습니다.    여의도   독도   그래서 찾아보니 2D지도 API 2.0은 메카르도(EPSG:3857) 좌표계를 사용하고 있다고 합니다. 2. 좌표계의 종류좌표계는 종류도 많고, 상호 간에 변환 문제가 있어 매우 복잡합니다.Q&A를 찾아보면 이것에 대한 질문이 꽤 많이 있고,FAQ를 검색하니 WMS에서 지원하는 좌표계 목록은 아래와 같다고 합니다. 그런데, 위 API 레퍼런스에서는 메카르도(Mercator) 좌표계의 EPSG 번호가 3857로 표시되는데, 여기서는 Google Mercator의 좌..

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

이번에는 2D지도 API 2.0의 코드 샘플에 있는 지도 이동 기능에 대해 알아보겠습니다.  1. 코드 샘플코드 샘플 중 두 번째 줄 왼쪽 예제입니다. 이것을 눌러 들어가면 중간 부분에 소스 코드가 나오는데, 오른쪽 '직접해보기'를 누른 다음  코드 중 아래의 코드를 복사한 후2D지도 만들기(3)에서 만들었던 코드의 script문 아래에 붙여넣어 기존 코드를 덮어씌웁니다. 그리고, 서버에 올리고 실행하면 지도가 한 화면에 차고, 버튼이 그 아래에 있다 보니, 오른쪽 스크롤 바를 아래로 내려야 여의도와 독도 버튼이 왼쪽에 보입니다. 2. 실행 지도 아래에 있는 여의도 버튼을 누르면 서서히 이동한 후 여의도를 확대해서 보여 주고 독도 버튼을 눌러도 독도로 서서히 이동한 후 확대됩니다. 3. 코드 수정코드를..

다. center와 zoom 설정하기(1) 첫 번째 방법center는 처음에 지도가 위치할 중심점을 지정하는 것이고,zoom은 지도의 배율을 정하는 것입니다. 레퍼런스를 보면 아래와 같이 설정하라고 되어 있는데, vw.ol3.CameraPosition.center = [14086424.137257246, 4301029.874526409]; vw.ol3.CameraPosition.zoom = 15; vw.ol3.MapOptions = { 안에 넣어도 안되고, vmap = new vw.ol3.Map("vmap", vw.ol3.MapOptions); 뒤에 넣어도 안된다. 왜 이리 어려운가?코끼리 더듬기네요. 그러다, '3.브이월드에 이벤트 추가.html'을 보니 vw.ol3.MapOptions를 설정하기..

1. 코드 간단하게 살펴보기 가. HTMLHTML은 상위에 html이 있고,그 아래 body가 있고,짝을 이루어서 은 로 끝나고,는 로 끝납니다. HTML 구문은 자유도가 높아서조금 잘못돼도 큰 문제없이 화면에 표시됩니다. 다시 말해 위 코드를 보면 과 도 없고,도 없습니다. 아래와 같이 해야 정석에 맞는 코드입니다. 나. apiKeyapiKey가 내 것이 아니어도 작동하는 데는 문제가 없지만, 자기 것으로 바꾸는 것이 좋습니다.네이버 지도는 apiKey가 맞는지 체크하는데 vworld는 체크하지 않네요.다. vw.ol3.MapOptionsvw.ol3.MapOptions에 대한 설명을 보려면코드샘플 페이지의 맨 아래로 내려가 관련 레퍼런스 아래의 vw.ol3.MapOptions 또는 base..

1. 2D지도 API 2.0 https://www.vworld.kr/dev/v4dv_opn2dmap2guide_s001.do를 들어가면 레퍼런스와 코드샘플 탭이 있는데, 코드 샘플을 클릭합니다. 2. 2D지도 API 2.0 코드 샘플 그러면 아래와 같이 여러 가지 지도 모양이 보이는데, 코드는 아직 안보입니다.가장 기초적인 것 같은 오른쪽 네 번째 'Map 지도 생성'을 클릭합니다. 그러면 중간 부분에 소스코드가 있는데,vw.ol3.MapOptions로 시작하는 부분만 있고, HTML 전체 코드는 없습니다. 이번에는 소스코드 오른쪽의 '직접 해보기'를 눌러봅니다.그랬더니 왼쪽에는 body부터 코드가 보이고, 오른쪽에는 Result라고 그려진 지도가 보입니다. 이제 전체 코드를 알았습니다. 3. 내 사이트..