네이버 API를 활용한 GeoServer WMS 서비스 연동

이번 지도 시각화를 진행하면서 네이버 API를 활용하여 시각화 하기로 하였다.

WFS 시각화 같은 경우 GeoServer로 부터 GeoJson타입으로 받아와서 네이버 API이용하여 어렵지 않게 시각화를 진행할 수 있지만 WMS 같은 경우 약간 문제가 된다.

 

GeoServer의 WMS Naver API 연동

네이버 클라우드의 개발자문서를 끊임없이 찾아보았다. 사용해볼만한 것이 ImageMapType이라는 함수가 있었는데 정상적으로 작동하진 않았다. 

 

GeoServer의 WMS의 경우 BBOX를 이용하는 반면에 네이버의 ImageMapType의 경우 XYZ를 이용하므로 연동하기가 쉽지 않았다.

GeoServer에서 WMS로 이미지를 불러와서 ImageMapType으로 시각화하는 경우 타일형태로 시각화 되면서 이미지가 중복되면서 물제가 발생한다. 결국 정상적인 시각화가 되지 않았다.

 

이길은 잘못된 길...

다른 API를 탐색한다.

여러번 검색하고 탐색한 결과 naver.maps.GroundOverlay라는것이 있다.

 

GroundOverlay

지원하는 내용을 보아하니, GeoServer에서 이미지 형태로 응답받아서 레이어로 시각화 하기 딱 좋은 함수인것으로 보인다.

한번 개발을 진행해본다.

네이버에서는 물론 Map API ClientID를 받아두어야 한다.

지도 초기화

UI.MAP.init();

 

지도 생성 및 WMS 시각화

__THIS.INSTANCE = new naver.maps.Map("map", {
		    zoom: 12,
		    center: new naver.maps.LatLng(36.634249797, 127.129160067),
		    mapTypeId: "normal",
		});
		
		var bounds = new naver.maps.LatLngBounds(
	        new naver.maps.LatLng(UI.MAP.INSTANCE.bounds._min.y, UI.MAP.INSTANCE.bounds._min.x),
	        new naver.maps.LatLng(UI.MAP.INSTANCE.bounds._max.y, UI.MAP.INSTANCE.bounds._max.x)
	    );

		var width = $("#map").width();
		var height = $("#map").height();

		__THIS.groundOverlay = new naver.maps.GroundOverlay(
			"http://<URL>/geoserver/cite/wms?" +
					"service=WMS&" +
					"version=1.1.0&" +
					"request=GetMap&" +
					"layers=<layerName>&" + 
					"&bbox=" + UI.MAP.INSTANCE.bounds._min.x + "%2C" + UI.MAP.INSTANCE.bounds._min.y + "%2C" + UI.MAP.INSTANCE.bounds._max.x + "%2C" + UI.MAP.INSTANCE.bounds._max.y + "&" +
					"width="+width+"&" +
					"height="+height+"&" +
					"srs=EPSG%3A4326&" +
					"styles=&" +
					"format=image%2Fpng&" +
					"RGN_CLSS=%27H1%27",
		    bounds,
		    {
		        opacity: 0.8,
		        clickable: false
		    }
		);

		__THIS.groundOverlay.setMap(__THIS.INSTANCE);
		
		var listeners = [
		    naver.maps.Event.addListener(__THIS.INSTANCE, 'dragend', UI.MAP.onDragEnd),
			naver.maps.Event.addListener(__THIS.INSTANCE, 'zoom_changed', UI.MAP.onZoom),
		];

 

WMS로 시각화 하기 위해서 GeoServer로 요청하는 경우, width, height 값이 매우 중요하다.

내려받은 값은 groundOverlay.setMap함수 이용하여 시각화 하면 된다.