제가 사용하고 있는 지도와 관련된 파일은 두개 입니다.

• /WEB-INF/jsp/web/stat/StatView.jsp
• /webapp/js/webMap.js

StatView.jsp 에서는 사용을 위해 함수 호출만 있고 실질적인 처리는 webMap.js 에서 이루어 집니다.
아래 추가한 코드는 모두 webMap.js 에 있는 코드입니다.

k1OKnl

snippet.javascript

	wmap.init = function(mapid) {
		map = L.map(mapid, {});
		L.tileLayer('http://xdworld.vworld.kr:8080/2d/Base/201411/{z}/{x}/{y}.png', {
			maxZoom : 18,
			id : 'mapbox.streets'
		}).addTo(map);
		map.invalidateSize();
		map.setView([ 37.40187, 126.97351 ], 13);
	}

타일맵을 생성합니다. 타일맵 소스는 vworld 에서 가져옵니다.
사이즈 조정을 위해서 invalidateSize()를 호출합니다.
뷰를 변경하기 위해 setView를 호출합니다.

snippet.javascript

var clickBind = '<div><input type="button" value="상황등록" class="AXButton" onclick="fnPopEventRegist()"/></div>' + '<div><input type="button" value="전파등록" class="AXButton" onclick="fnPopSpreadRegist()" /></div>';
wmap.onClick(clickBind);
 
// 지도클릭 이벤트 등록
wmap.onClick = function(bind) {
	map.on('click', function(e) {
		L.popup().setLatLng(e.latlng).setContent(bind).openOn(map);			
		latlng = e.latlng;
	});
}

L 로 시작하는 부분이 Leaflet 입니다. 지도 클릭시 넘어온 e 에서 좌표정보 e.latlng 를 이용하여 클릭 이벤트를 처리합니다. 클릭 위치에 넘겨준 clickBind HTML 코드가 표출됩니다.

WRdHLP

# 데이터 가져오기

GeoServer 를 통해서 데이터를 가져옵니다.

WYHWCf

3개의 레이어를 서비스 하고 있습니다.

snippet.javascript

	var info = getLayerInfo(table, type);		
	var callbackName = getCallbackName();		
	var parameters = L.Util.extend(getWfsDefaultParameters(info, callbackName));

jsonp 를 이용을 위한 값을 세팅합니다. 동시에 여러개의 jsonp 를 요청하기 콜백이름을 서로 다르게 주기 위하여 콜백이름을 생성합니다.

snippet.javascript

function getCallbackName() {
	callbackIdx += 1;
	return "getJson" + callbackIdx;
}
``` 
 
ajax 요청을 위한 기본 파라미터 값을 세팅합니다.
 
	var wfsDefaultParameters = {	// GeoServer 요청을 위한 파라미터
		service : 'WFS',
		version : '1.0.0',
		request : 'GetFeature',
		maxFeatures : 200,
		outputFormat : 'text/javascript',
		//format_options : 'callback: getJson',
		srsName : 'EPSG:4326'
	};
 
	var parameters = L.Util.extend(getWfsDefaultParameters(info, callbackName));
 
	// WFS 기본 파라미터를 설정하여 반환한다. 
	function getWfsDefaultParameters(info, callbackName) {
		wfsDefaultParameters.typeName = "mcs:" + info.table;
		if (info.filter && info.type){
			wfsDefaultParameters.CQL_FILTER = info.filter + "='" + info.type + "'";
		}		
		wfsDefaultParameters.format_options = "callback: " + callbackName;
		return wfsDefaultParameters;
	}

ajax 를 통해 데이터를 요청합니다.

snippet.javascript

// 지도에 마커를 추가한다. 해당 마커에 이벤트 바인드를 한다.
wmap.addLayerBind = function(bind, table, type) {
	var info = getLayerInfo(table, type);		
	var callbackName = getCallbackName();		
	var parameters = L.Util.extend(getWfsDefaultParameters(info, callbackName));
	console.log(wfsUrl + L.Util.getParamString(parameters));
 
	$.ajax({			
		url : wfsUrl + L.Util.getParamString(parameters),
		dataType : 'jsonp',
		jsonpCallback : callbackName,
		success : function(data){
			// 기존 레이어 삭제
			deleteLayer(info);				
 
			// 새로운 레이어 추가.
			layer = L.geoJson(data, {
				pointToLayer : function(feature, latlng) {
					return L.marker(latlng, {
						icon : typeIcon(info.icon)
					}).bindPopup(bind(feature)).openPopup();
				}
			}).addTo(map);
 
			styledLayerControl.addOverlay(layer, typeLegend(info.icon, info.title), {
				groupName : info.group,
				expanded : true
			});
 
			layerMap[info.getKey()] = layer;
		}
	});
}

L.geoJson을 이용하여 마커를 표출합니다.

snippet.javascript

	// 새로운 레이어 추가.
		layer = L.geoJson(data, {
			pointToLayer : function(feature, latlng) {
				return L.marker(latlng, {
					icon : typeIcon(info.icon)
				}).bindPopup(bind(feature)).openPopup();
			}
		}).addTo(map);

qNNhqn

icon : typeIcon(info.icon) 에서 아이콘을 설정합니다.
bindPopup(bind(feature)).openPopup() 에서 클릭시 이벤트를 처리합니다.

zPkKCy

범례 표시를 위해서 StyledLayerControl을 사용하였습니다.

• https://github.com/davicustodio/Leaflet.StyledLayerControl

5eYIgJ

styledLayerControl에 추가(addOverlay)합니다.

snippet.javascript

	styledLayerControl.addOverlay(layer, typeLegend(info.icon, info.title), {
		groupName : info.group,
		expanded : true
	});

zVzfLa

addOverlay 한번에 범례에 하나의 아이콘이 추가됩니다. 범례에 보이는 수 만큼 ajax 요청을 하여 데이터를 얻어오고, 화면에 마커를 추가하였습니다.

범례에 표시되는 아이콘은 아래와 같이 설정하였습니다.

snippet.javascript

	var iconSize = [ 30, 30 ]; // size of the icon
	var iconAnchor = [ 15, 15 ]; // point of the icon which will correspond
	// to marker's location
	var popupAnchor = [ 0, -10 ]; // point from which the popup should open
	// relative to the iconAnchor
 
	var typeIcon = function(type) {
		return L.icon({
			iconUrl : '/img/marker/' + type + '.png',
			iconSize : iconSize,
			iconAnchor : iconAnchor,
			popupAnchor : popupAnchor
		});
	}
 
	var typeLegend = function(icon, title) {
		console.log(icon, title);
		return "<span><img src='/img/marker/" + icon + ".png' style='vertical-align: middle;'  height='45' width='45' />" + title + "</span>";
	}