Map(WEB)

vworld 지도 만들기(15) - 개별공시지가 표시하기(3) : PHP(1)

별동산 2025. 3. 5. 08:08
반응형

이번에는 PHP를 이용해 만드는데 popup창과 alert창이 아니라

지도 위의 div 태그에 표시해 보겠습니다.

 

그동안 계속 cloudaccess.net의 무료 호스팅에서 작업했는데 안 돼서(vworld.kr이 외국 서버를 차단하는 듯, data.go.kr은 문제없음), iwinv.kr의 웹 호스팅에서 작업했습니다.

 

getIndvdLandPrice3_1.html
0.00MB

 

 

1. 토지정보 표시영역 설정

<html>
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no, shrink-to-fit=no">
	<title>개별공시지가 조회(PHP)</title>
	<style type="text/css">
		.txtLand { position:absolute;z-index:1000;top:20px;left:20px;background-color:blue;width:80%;color:white;border:solid 1px;padding:5px; }	
	</style>
</head>
<body>
	<div id="vmap">
	<script type="text/javascript" src="https://map.vworld.kr/js/vworldMapInit.js.do?version=2.0&apiKey=CEB52025-E065-364C-9DBA-44880E3B02B8&domain=localhost:8080"></script>
	</div>
	<div class="txtLand" ><b>토지 정보</b></div>
	</div>

 

 

head 태그에

<style type="text/css">
    .txtLand { position:absolute;z-index:1000;top:20px;left:20px;background-color:blue;width:80%;color:white;border:solid 1px;padding:5px; }
</style>

 

style을 지정하는데 class가 txtLand인 것의 position을 absolute로 지정하고, 위 여백을 20px, 왼쪽 여백을 20px, 배경색은 blue, 폭은 화면의 80% 등으로 지정합니다.

 

<div class="txtLand" ><b>토지 정보</b></div>

그리고, txtLand가 들어 있는 div 태그에 '토지 정보'란 글자를 입력합니다.

 

그러면 아래와 같이 됩니다.

 

 

2. 클릭 이벤트 설정

 

지도를 표시하고, 

vmap.on("click", function(evt) {으로 지도를 클릭했을 때 일어나는 동작을 정의합니다.

	<script type="text/javascript">
		let pop = null ;
		
		vw.ol3.MapOptions = {
			basemapType: vw.ol3.BasemapType.GRAPHIC
			, controlDensity: vw.ol3.DensityType.EMPTY
			, interactionDensity: vw.ol3.DensityType.BASIC
			, controlsAutoArrange: true
			, homePosition: vw.ol3.CameraPosition
			, initPosition: vw.ol3.CameraPosition
		};

		let vmap = new vw.ol3.Map("vmap",vw.ol3.MapOptions); 		 

		vmap.getView().setCenter([14129132.729661161, 4512073.703926638]);
		vmap.getView().setZoom(16);

		vmap.on("click", function(evt) {
			if(pop == null){
				pop = new vw.ol3.popup.Popup();
			}
			
			let coordinate = evt.coordinate //좌표정보(EPSG:900913)
			let latlng_4326 = ol.proj.transform(coordinate, 'EPSG:900913', 'EPSG:4326');
			let latlng_4326_str=latlng_4326[0] + "," + latlng_4326[1];

			content = "<b>좌표: </b>" + ol.coordinate.toStringHDMS(latlng_4326) + "<br>";
			
			pop.title = "<b>좌표 및 주소</b><br><br>";
			
			vmap.addOverlay(pop);
			pop.show(content, coordinate);
			
			let get_text="show_landprice.php?coord=" + latlng_4326_str;

			xmlhttp=new XMLHttpRequest();
			
			xmlhttp.onreadystatechange=function() {
			  if (this.readyState===4 && this.status===200) {
				//console.log(this.responseText);
				document.getElementsByClassName("txtLand")[0].innerHTML=this.responseText;
			  }
			};
			
			xmlhttp.open("GET",get_text,true);
			xmlhttp.send();	
		});
	</script>

 

let get_text="show_landprice.php?coord=" + latlng_4326_str;

 : show_landprice.php 파일에 coord인수로 위, 경도 좌표인 latlng_4326_str를 전달합니다.

 

let coordinate = evt.coordinate //좌표정보(EPSG:900913)
let latlng_4326 = ol.proj.transform(coordinate, 'EPSG:900913', 'EPSG:4326');
let latlng_4326_str=latlng_4326[0] + "," + latlng_4326[1];

latlng_4326_str은 900913 좌표계인 좌표를 4326 좌표계로 변환한 후 배열을 쉼표로 연결한 문자열입니다.

 

xmlhttp=new XMLHttpRequest();

xmlhttp.onreadystatechange=function() {
  if (this.readyState===4 && this.status===200) {
       console.log(this.responseText);
       document.getElementsByClassName("txtLand")[0].innerHTML=this.responseText;
  }
};

xmlhttp.open("GET",get_text,true);
xmlhttp.send();

get_text를 실행한 결과 응답이 정상일 때 txtLand가 포함된 div 태그에 응답 결과를 표시합니다.

 

3. 실행 화면

실행한 후 지도를 클릭하면 클릭한 지점에 좌표가 표시되고,

'토지정보' 상자에 지번과 도로명 주소 그리고 위도와 경도가 소수점 형식으로 표시되고, 개별공시지가가 아래 줄에 표시됩니다.

 

그동안은 클릭한 지점에 지번과 도로명 주소를 표시했는데, 지번과 도로명 주소를 토지정보라고 표시된 div 태그 안에 표시할 것이므로 뺐습니다.

 

4. 참고 사항

외국 서버라서 안 되는데,

let get_text="show_landprice.php?coord=" + latlng_4326_str;

에서 show_landprice.php를 국내 서버(myroot.kr)를 추가해서  https://myroot.kr/wp/show_landprice.php로 지정하면 문제없이 잘 됩니다.

 

그러나, 그럴 바에는 국내 서버에서 돌리는 것이 낫겠죠...

 

PHP 파일은 다음 편에서 다루도록 하겠습니다.

반응형
저작자표시 비영리

'Map(WEB)' 카테고리의 다른 글

vworld 지도 만들기(17) - 개별공시지가 표시하기(5) : PHP(3)  (0) 2025.03.07
vworld 지도 만들기(16) - 개별공시지가 표시하기(4) : PHP(2)  (0) 2025.03.06
vworld 지도 만들기(14) - 개별공시지가 표시하기(2) : JSONP  (0) 2025.03.04
vworld 지도 만들기(13) - 개별공시지가 표시하기(1) : JavaScript  (2) 2025.03.03
오픈 API를 이용한 법정동 코드 조회(5) - PHP(2)  (0) 2025.02.28

'Map(WEB)'의 다른글

  • 현재글vworld 지도 만들기(15) - 개별공시지가 표시하기(3) : PHP(1)

관련글

티스토리툴바