Table of Contents

leaflet 예제

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

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을 사용하였습니다.

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>";
	}