Table of Contents

Leaflet TileMapService 예시

Leaflet 다운로드

다운로드 페이지에서 파일을 내려받습니다.

HTML head 추가

다운로드 받은 파일을 추가 합니다.

snippet.html
<link rel="stylesheet" href="<c:url value='/js/leaflet/leaflet.css' />" />
<script src="<c:url value='/js/leaflet/leaflet.js' />"></script>

JSTL를 사용중이므로 <c:url ... />와 같이 사용하였습니다.

지도 영역 설정

HTML 코드에서 지도영역을 설정합니다.

snippet.html
<div class="content-map" id="mapArea">
	<!-- 지도영역 -->
</div>

지도 생성

snippet.javascript
var map; // 화면 표출 맵
// 지도 생성
map = L.map('mapArea', {});

타일맵 설정

snippet.javascript
var geoserver = "10x.11x.10x.11x";
 
var baseOption = {
	minZoom : 15,
	maxZoom : 19
}
 
var base2dUrl = 'http://' + geoserver + ':9500/geoserver/www/tms/2d/base/{z}/{x}/{y}.png';
var base2d = L.tileLayer(base2dUrl, baseOption);

타일맵 파일들을 서버에 복사합니다.

타일맵은 {z}/{x}/{y} 으로 폴더경로로 나뉘어 집니다.

타일맵 파일은 웹 서버에 등록해 놓았습니다.

타일맵을 지도에 등록

snippet.javascript
base2d.addTo(map);

전체 소스

snippet.html
<html>
	<head>
		<link rel="stylesheet" href="<c:url value='/js/leaflet/leaflet.css' />"  />
		<script src="<c:url value='/js/leaflet/leaflet.js' />"></script>
	</head>
	<body>
		<div class="content-map" id="mapArea">
		<!-- 지도영역 -->
		</div>
 
		<script type="text/javascript">
			var map; // 화면 표출 맵
			// 지도 생성
			map = L.map('mapArea', {});
 
			var geoserver = "10x.11x.10x.11x";
 
			var baseOption = {
				minZoom : 15,
				maxZoom : 19
			}
 
			var base2dUrl = 'http://' + geoserver + ':9500/geoserver/www/tms/2d/base/{z}/{x}/{y}.png';
			var base2d = L.tileLayer(base2dUrl, baseOption);
 
			base2d.addTo(map);	
		</script>	
	</body>
</html>