open:leaflet-tilemapservice-예시 [EL]

This page is read only. You can view the source, but not change it. Ask your administrator if you think this is wrong.
# Leaflet TileMapService 예시

- 홈페이지 : http://leafletjs.com/
- 튜토리얼 : http://leafletjs.com/examples.html
- Docs : http://leafletjs.com/reference-1.2.0.html
- 다운로드 : http://leafletjs.com/download.html


## Leaflet 다운로드

[다운로드 페이지](http://leafletjs.com/download.html)에서 파일을 내려받습니다.

### HTML head 추가

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

```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 코드에서 지도영역을 설정합니다. 

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

## 지도 생성

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

## 타일맵 설정

```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}` 으로 폴더경로로 나뉘어 집니다.

- z : Zoom
- x : Longitude
- y : Latitude

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


## 타일맵을 지도에 등록

```javascript
base2d.addTo(map);
```

## 전체 소스

```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>
```