SGIS 통계지리정보서비스

OpenAPI 1.0 < OpenAPI < 공유마당 < 처음페이지

OpenAPI 1.0

S-OpenAPI 1.0의 내용은 다음과 같습니다.

※ S-OpenAPI 1.0은 2013년 12월 말 서비스 종료 되었습니다.

MapControl/Overlay서비스 좌표 변환 서비스 WebMap 서비스 Geocoder서비스 Reverse Geocoder서비스

집계구 기반 제공 항목 검색 서비스 원시명부항목검색서비스 집계구 기반 공간통계서비스

Map Control 및 Overlay 서비스

Map Control 및 Overlay 서비스는 자바 스크립트(Java Script) 언어를 사용하여 웹 사이트를 구현하는데 익숙한 사용자를 대상으로 하였습니다. Map Control 및 Overlay 서비스를 이용하여 웹사이트에 지도를 표시하려면 Map Control 및 Overlay 서비스 포함하고 있는 자바 스크립트를 사용할 수 있도록 웹 페이지를 작성해야 합니다. 또한 Map API 사용자 등록 키가 필요합니다.

1. Map Control API 예제

여기에서는 지도조작 API에서 제공하는 기능들을 이용하여 웹 페이지를 작성하는 예들을 보여줍니다.

1.1 지도생성

API발급키를 이용하여 지도를 웹 페이지에 표시하는 방법입니다.

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=EUC-KR">
	<title>통계지리정보서비스 OpenAPI 지도생성 예제 </title>
	<script type="text/javascript" language="javascript" src="http://sgis1.kostat.go.kr/SMapAPI/MapAPI.js"></script>
	<script type="text/javascript" language="javascript">
		function init(){
			var mapObj = new SMap("mapContainer","400","300",1, "API발급키");
		}
	</script>
</head>
<body onload="javascript:init();">
	<div id='mapContainer'></div>
</body>
</html>

1.2 지도 이동, 확대, 축소 및 축적 설정

1.2.1 지도 이동모드

API발급키를 이용하여 지도를 웹 페이지에 표시하는 방법입니다.

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=EUC-KR">
	<title>통계지리정보서비스 OpenAPI 지도이동 예제 </title>
	<script type="text/javascript" language="javascript" src="http://sgis1.kostat.go.kr/SMapAPI/MapAPI.js"></script>
	<script type="text/javascript" language="javascript">
		var mapObj = null;
		function init(){
			mapObj = new SMap("mapContainer","400","300",1, "API발급키");
		}
		
		function pan(){
			//지도를 이동모드로 전환하도록 설정
			mapObj.pan();
		}
	</script>
</head>
<body onload="javascript:init();">
	<div id='mapContainer'></div>
	<button onclick="javascript:pan();">pan</button>
</body>
</html>

1.2.2 지도 확대모드

지도를 확대모드로 전환하도록 설정하는 방법입니다.

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=EUC-KR">
	<title>통계지리정보서비스 OpenAPI 지도확대 예제 </title>
	<script type="text/javascript" language="javascript" src="http://sgis1.kostat.go.kr/SMapAPI/MapAPI.js"></script>
	<script type="text/javascript" language="javascript">
		var mapObj = null;
		function init(){
			mapObj = new SMap("mapContainer","400","300",1, "API발급키");
		}
		
		function zoomIn(){
			//지도를 확대모드로 전환하도록 설정
			mapObj.zoomIn();
		}
	</script>
</head>
<body onload="javascript:init();">
	<div id='mapContainer'></div>
	<button onclick="javascript:zoomIn();">zoomIn</button>
</body>
</html>

1.2.3 지도 축소모드

지도를 축소모드로 전환하도록 설정하는 방법입니다.

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=EUC-KR">
	<title>통계지리정보서비스 OpenAPI 지도축소 예제 </title>
	<script type="text/javascript" language="javascript" src="http://sgis1.kostat.go.kr/SMapAPI/MapAPI.js"></script>
	<script type="text/javascript" language="javascript">
		var mapObj = null;
		function init(){
			mapObj = new SMap("mapContainer","400","300",1, "API발급키");
		}
		
		function zoomOut(){
			//지도를 축소모드로 전환하도록 설정
			mapObj.zoomOut();
		}
	</script>
</head>
<body onload="javascript:init();">
	<div id='mapContainer'></div>
	<button onclick="javascript:zoomOut();">zoomOut</button>
</body>
</html>

1.2.4 지도 축척설정 및 축척확인 방법

지도의 scale을 임의로 설정하는 방법과 API가 제공하는 특정레벨의 scale로 설정하는 방법 그리고 레벨과 scale을 확인하는 방법입니다.

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=EUC-KR">
	<title>통계지리정보서비스 OpenAPI 지도축척 설정 예제 </title>
	<script type="text/javascript" language="javascript" src="http://sgis1.kostat.go.kr/SMapAPI/MapAPI.js"></script>
	<script type="text/javascript" language="javascript">
		var mapObj = null;
		function init(){
			mapObj = new SMap("mapContainer","400","300",1, "API발급키");
		}
			
		function getScale(){
			// 지도의 축척을 반환합니다.
			var scale = mapObj.getScale();
			alert(scale);
		}
		
		function getZoomLevel(){
			// 지도의 축척 레벨을 반환합니다.
			var zoomlevel = mapObj.getZoomLevel();
			alert(zoomlevel);
		}
		
		function setZoomLevel(val){
			// 지도가 특정레벨로 조정되도록 설정
			// 지도 API의 축척단계는 레벨 0 (가장확대) 부터 레벨 11 (가장축소) 까지 총 12단계로 나누어집니다.
			mapObj.setZoomLevel(val);
		}
		
		function setScale(){
			// 지도를 임의의 축적으로 설정
			// 지도를 1:6000의 축척으로 설정
			mapObj.setScale(6000);
		}
	</script>
</head>
<body onload="javascript:init();">
	<div id='mapContainer'></div>
	<button onclick="javascript:setZoomLevel(0);">0</button>
	<button onclick="javascript:setZoomLevel(1);">1</button>
	<button onclick="javascript:setZoomLevel(2);">2</button>
	<button onclick="javascript:setZoomLevel(3);">3</button>
	<button onclick="javascript:setZoomLevel(4);">4</button>
	<button onclick="javascript:setZoomLevel(5);">5</button>
	<button onclick="javascript:setZoomLevel(6);">6</button>
	<button onclick="javascript:getZoomLevel();">Level확인</button>
	<button onclick="javascript:setScale();">1:6000축척설정</button>
	<button onclick="javascript:getScale();">축척확인</button>
</body>
</html>

1.3 지도 중심점 이동

지도의 중심점을 좌표 및 영역 경계를 이용하여 이동하는 방법입니다.

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=EUC-KR">
	<title>통계지리정보서비스 OpenAPI 지도 중심점 이동 예제 </title>
	<script type="text/javascript" language="javascript" src="http://sgis1.kostat.go.kr/SMapAPI/MapAPI.js"></script>
	<script type="text/javascript" language="javascript">
		var mapObj = null;
		function init(){
			mapObj = new SMap("mapContainer","400","300",1, "API발급키");
		}
		
		function panToXY(){
			// 지도를 이동시킬 포인트 객체를 생성합니다.
			var point = new Point(237610, 315220);
			// 특정 포인트로 지도를 이동합니다.
			mapObj.panToXY(point);
		}
		
		function setCenterAndScale(){
			// 지도를 이동시킬 포인트 객체를 생성합니다.
			var point = new Point(237610, 315220);
			// 특정 축척을 적용하며 특정 포인트로 지도를 이동합니다.
			// 1:6000의 축척으로 특정 포인트로 지도를 이동합니다.
			mapObj.setCenterAndScale(point, 6000);
		}
		
		function setCenterAndZoomLevel(){
			// 지도를 이동시킬 포인트 객체를 생성합니다.
			var point = new Point(237610, 315220);
			// 특정 축척레벨을 적용하며 특정 포인트로 지도를 이동합니다.
			// 2레벨의 축척으로 특정 포인트로 지도를 이동합니다.
			mapObj.setCenterAndZoomLevel(point, 2);
		}
		
		function setBound(){
			// 영역경계 최소 x 좌표
			var minx = 235975; 
			// 영역경계 최소 y 좌표
			var miny = 314743.75; 
			// 영역경계 최대 x 좌표
			var maxx = 237245; 
			// 영역경계 최대 y 좌표
			var maxy = 315696.25; 
			// 지도를 이동시킬 영역경계 사각형 객체를 생성합니다.
			var rectangle = new Rectangle(minx,miny,maxx,maxy);
			// 특정 영역으로 지도를 이동합니다.
			// 영역으로 지도를 이동합니다.
			mapObj.setBounds(rectangle);
		}
	</script>
</head>
<body onload="javascript:init();">
	<div id='mapContainer'></div>
	<button onclick="javascript:panToXY();">panToXY</button>
	<button onclick="javascript:setCenterAndScale();">setCenterAndScale</button>
	<button onclick="javascript:setCenterAndZoomLevel();">setCenterAndZoomLevel</button>
	<button onclick="javascript:setBound();">setBound</button>
</body>
</html>

1.4 지도 컨트롤 등록

MapAPI에서 제공하는 컨트롤인 확대, 축소, 이동의 지도 컨트롤을 지도 상에 표시하는 방법입니다.
이 컨트롤은 특정 화면의 좌표 및 Position Anchor을 이용하여 정렬할 수 있습니다.

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=EUC-KR">
	<title>통계지리정보서비스 OpenAPI 지도 컨트롤 등록 예제 </title>
	<script type="text/javascript" language="javascript" src="http://sgis1.kostat.go.kr/SMapAPI/MapAPI.js"></script>
	<script type="text/javascript" language="javascript">
		var mapObj = null;
		// 지도 컨트롤을 생성합니다.
		var control = new Control();
		
		function init(){
			mapObj = new SMap("mapContainer","400","300",1, "API발급키");
		}

		function addControlXY(){
			// 지도 컨트롤을 특정 화면상 위치(10,10)에 등록합니다.
			mapObj.addControlXY(control, 10, 10);
		}
		
		function addControlAnchor(){
			// 지도 컨트롤을 특정 위치에 등록합니다.
			// 지도컨트롤위치 
			// 좌측하단 : U_ANCHOR_BOTTOM_LEFT
			// 우측하단 : U_ANCHOR_BOTTOM_RIGHT
			// 좌측상단 : U_ANCHOR_TOP_LEFT
			// 우측상단 : U_ANCHOR_TOP_RIGHT
			mapObj.addControlAnchor(control,U_ANCHOR_BOTTOM_LEFT);
		}
		
		function removeControl(){
			// 지도 컨트롤을 삭제합니다.
			mapObj.removeControl(control);
		}
		
	</script>
</head>
<body onload="javascript:init();">
	<div id='mapContainer'></div>
	<button onclick="javascript:addControlXY();">addControlXY</button>
	<button onclick="javascript:addControlAnchor();">addControlAnchor</button>
	<button onclick="javascript:removeControl();">removeControl</button>
</body>
</html>

1.5 이벤트 리스너 등록

지도상에서 사용자에 의해 일어나는 마우스 클릭, 이동과 같은 움직임을 감지하여 웹페이지가 적절한 동작을 하도록 이벤트 리스너를 등록하는 방법입니다. 사용자가 등록한 이벤트가 발생할 때 이벤트와 관련된 인자로 등록한 이벤트 리스너가 호출됩니다.

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=EUC-KR">
	<title>통계지리정보서비스 OpenAPI 지도 이벤트 리스너 등록 예제 </title>
	<script type="text/javascript" language="javascript" src="http://sfis.kostat.go.kr/SMapAPI/MapAPI.js"></script>
	<script type="text/javascript" language="javascript">
		var mapObj = null;
		
		function init(){
			mapObj = new SMap("mapContainer","400","300",1, "API발급키");
		}

		
		function addClick(){
			// 이벤트 리스너를 등록합니다.
			// 이벤트 종류
			// clicked, drag, startdrag, enddrag, mousedown, mouseup, mousemove, mouseover, mouseout
			mapObj.addListener(mapObj, "clicked", "onClicked");
		}
		
		function removeClick(){
			// 이벤트 리스너를 삭제합니다.
			mapObj.removeListener(mapObj, "clicked");
		}
		
		function onClicked(){
			// 이벤트 발생 시 호출되는 이벤트 리스너입니다.
			alert("clicked");
		}
		
	</script>
</head>
<body onload="javascript:init();">
	<div id='mapContainer'></div>
	<button onclick="javascript:addClick();">addClick</button>
	<button onclick="javascript:removeClick();">removeClick</button>
</body>
</html>

1.6 영역 그리기 예제

지도상에서 사용자에 의해 임의의 영역을 그리기 위한 방법과 그 영역에 대한 정보를 받아오는 방법에 대해서 보여줍니다..

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=EUC-KR">
	<title>통계지리정보서비스 OpenAPI 영역 그리기 사용 예제 </title>
	<script type="text/javascript" language="javascript" src="http://sfis.kostat.go.kr/SMapAPI/MapAPI.js"></script>
	<script type="text/javascript" language="javascript">
		var mapObj = null;
		
		function init(){
			mapObj = new SMap("mapContainer","400","300",1, "API발급키");
		}

		
		function drawArea(){
			// 원           : 1 (Circle)
			// 사각형 : 2 (Retangle)
			// 다각형 : 3 (Polygon)
			var areaType = 1;
			mapObj.setArea(areaType);
		}
		
		function getArea(){
			// 영역 정보를 얻어옵니다
			// 현재 화며면에 그려진 영역에 대한 정보를 얻어옵니다.
			// 반환되는 영역은 Circle,  Polygon객체입니다.
			// 단 화면에 그려진 영역이 없는 경우 현재화면을 Rectangle 객체로 반환됩니다.
			var geom = mapObj.getArea();
			if(geom instanceof Circle){
			 alert("Circle");
			}else if(geom instanceof Polygon){
			 alert("Polygon");
			}else if(geom instanceof Retangle){
			 alert("Retancle");
			}
			
		}
		

		
	</script>
</head>
<body onload="javascript:init();">
	<div id='mapContainer'></div>
	<button onclick="javascript:drawArea();">drawArea</button>
	<button onclick="javascript:getArea();">getArea</button>
</body>
</html>

2. Overlay API 예제

Overlay API에서 제공하는 기능들을 이용하여 웹 페이지를 작성하는 예들을 보여줍니다.

2.1 point overlay

Point를 지도에 overlay하고 이벤트를 등록하는 방법을 보여줍니다.

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=EUC-KR">
	<title>통계지리정보서비스 OpenAPI point overlay 예제 </title>
	<script type="text/javascript" language="javascript" src="http://sgis1.kostat.go.kr/SMapAPI/MapAPI.js"></script>
	<script type="text/javascript" language="javascript">
		var mapObj = null;
		// overlay할 포인트 객체를 생성합니다.
		var point = new Point(237610, 315220);
		
		function init(){
			mapObj = new SMap("mapContainer","400","300",1, "API발급키");
		}		
		
		function addPoint(){
			// point를 overlay 합니다.
			mapObj.addOverlay(point, 1);
			mapObj.panToXY(point);
		}
		
		function removePoint(){
			// point를 삭제합니다.
			mapObj.removeOverlay(point);
		}
		
		function addEvent()
		{
			// point에 이벤트를 등록합니다.
			mapObj.addListener(point, "mousedown","onMousedown");
		}
		
		function onMousedown()
		{
			// 이벤트 발생 시 호출되는 리스너입니다.
			alert("이벤트가 발생하였습니다.");
		}
		
	</script>
</head>
<body onload="javascript:init();">
	<div id='mapContainer'></div>
	<button onclick="javascript:addPoint();">addPoint</button>
	<button onclick="javascript:addEvent();">addEvent</button>
	<button onclick="javascript:removePoint();">removePoint</button>
</body>
</html>

2.2 marker overlay

특정지점을 표시하기 위한 marker와 marker객체와 연관된 정보를 표시하는 정보창을 이용하는 방법을 알려줍니다. marker를 사용하려면 아이콘 파일과 위치 그리고 marker에 표시할 내용을 이용하여 marker 객체를 생성하면 됩니다.

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=EUC-KR">
	<title>통계지리정보서비스 OpenAPI marker overlay 예제 </title>
	<script type="text/javascript" language="javascript" src="http:// sgis1.kostat.go.kr /SMapAPI/MapAPI.js"></script>
	<script type="text/javascript" language="javascript">
		var mapObj = null;
		// marker 생성에 필요한 값을 설정합니다.
		var point = new Point(237610, 315220);
		var marker = null;
		
		function init(){
			mapObj = new SMap("mapContainer","400","300",1, "API발급키");
			
		}		

		// marker 를 overlay 합니다.
		function addMarker()
		{
			var content = "Marker";
			var iconURL = "http://sgis1.kostat.go.kr/SMapAPI/symbols/PIN.gif";
			// overlay할 marker 객체를 생성합니다.
			marker = new Marker(point, iconURL, content);
			mapObj.addOverlay(marker, 1);
			mapObj.panToXY(point);
		}
		// marker 를 삭제합니다.
		function removeMarker(){
			mapObj.removeOverlay(marker);
		}
		// marker 에 이벤트를 등록합니다.
		function addEvent(){
			mapObj.addListener(marker, "mousedown", "onMousedown");
		}
		// 이벤트 발생 시 호출되는 리스너입니다.
		function onMousedown(){
			alert("이벤트가 발생하였습니다.");
		}
		
	</script>
</head>
<body onload="javascript:init();">
	<div id='mapContainer'></div>
	<button onclick="javascript:addMarker();">addMarker</button>
	<button onclick="javascript:addEvent();">addEvent</button>
	<button onclick="javascript:removeMarker();">removeMarker</button>
</body>
</html>

2.3 polyline overlay

Polyline을 지도 위에 overlay하고 이벤트를 등록하는 방법을 보여줍니다.

<title>통계지리정보서비스 OpenAPI polyline overlay 예제 </title>
	<script type="text/javascript" language="javascript" src="http://sgis1.kostat.go.kr/SMapAPI/MapAPI.js"></script>
	<script type="text/javascript" language="javascript">
		var mapObj = null;
		// polyline을 생성할 포인트 객체를 생성합니다.
		var point1 = new Point(237610, 315220);
		var point2 = new Point(236890, 315900);
		var point3 = new Point(235250, 315218);
		var point4 = new Point(235050, 315018);
		var point5 = new Point(236235, 315167);
		var points = new Array(point1, point2, point3, point4, point5);
		// polyline을 생성합니다.
		var polyline = new Polyline(points);
		
		function init(){
			mapObj = new SMap("mapContainer","400","300",1, "API발급키");
		}		
		
		// polyline 을 overlay 합니다.
		function addPolyline(){
			mapObj.addOverlay(polyline, 1);
			mapObj.setBounds(polyline.getBounds());
		}
		
		// polyline 을 삭제합니다.
		function removePolyline(){
			mapObj.removeOverlay(polyline);
		}
		
		// polyline 에 이벤트를 등록합니다.
		function addEvent(){
			mapObj.addListener(polyline, "mousedown", "onMousedown");
		}
		
		// 이벤트 발생 시 호출되는 리스너입니다.
		function onMousedown(){
			alert("이벤트가 발생하였습니다.");
		}
		
	</script>
</head>
<body onload="javascript:init();">
	<div id='mapContainer'></div>
	<button onclick="javascript:addPolyline();">addPolyline</button>
	<button onclick="javascript:addEvent();">addEvent</button>
	<button onclick="javascript:removePolyline();">removePolyline</button>
</body>
</html>

2.4 polygon overlay

Polygon을 지도 위에 overlay하고 이벤트를 등록하는 방법을 보여줍니다.

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=EUC-KR">
	<title>통계지리정보서비스 OpenAPI polygon overlay 예제 </title>
	<script type="text/javascript" language="javascript" src="http://sgis1.kostat.go.kr/SMapAPI/MapAPI.js"></script>
	<script type="text/javascript" language="javascript">
		var mapObj = null;
		// polygon을 생성할 포인트 객체를 생성합니다.
		var point1 = new Point(237610, 315220);
		var point2 = new Point(236890, 315900);
		var point3 = new Point(235250, 315218);
		var point4 = new Point(235050, 315018);
		var point5 = new Point(236235, 315167);
		var points = new Array(point1, point2, point3, point4, point5);
		// polygon을 생성합니다.
		var polygon= new Polygon (points);
		
		function init(){
			mapObj = new SMap("mapContainer","400","300",1, "API발급키");
		}		
		
		// polygon을 overlay 합니다.
		function addPolygon(){
			mapObj.addOverlay(polygon, 1);
			mapObj.setBounds(polygon.getBounds());
		}
		
		// polygon을 삭제합니다.
		function removePolygon(){
			mapObj.removeOverlay(polygon);
		}
		// polygon에 이벤트를 등록합니다.
		function addEvent(){
			mapObj.addListener(polygon, "mousedown","onMousedown");
		}
		// 이벤트 발생 시 호출되는 리스너입니다.
		function onMousedown(pos){
			alert("이벤트가 발생하였습니다.");
		}
		
	</script>
</head>
<body onload="javascript:init();">
	<div id='mapContainer'></div>
	<button onclick="javascript:addPolygon();">addPolygon</button>
	<button onclick="javascript:addEvent();">addEvent</button>
	<button onclick="javascript:removePolygon();">removePolygon</button>
</body>
</html>