Leaflet TileMapService 예시
- 홈페이지 : http://leafletjs.com/
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} 으로 폴더경로로 나뉘어 집니다.
- z : Zoom
- x : Longitude
- y : Latitude
타일맵 파일은 웹 서버에 등록해 놓았습니다.
타일맵을 지도에 등록
- 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>