TMS(Tile Map Service)는 정적인 이미지를 모아준 저장소를 이용하여 매우 빠르게 수행하는 지도 서비스입니다. 지도 이미지 저장소는 특정 축척별로 지도 영역을 이미지로 저장한 디렉터리이며 이 구조에서 이미지를 불러오는것은 DB에서 지도를 생성하는 것보다 훨씬 빠릅니다. 그럼 정말로 간단하게 V월드와 Openlayers를 이용하여 TMS방식으로 지도를 띄우는걸 알아볼까요?
index.html을 생성하고 Openlayers에서 지도객체를 만들기 위한 div를 만들어 줍시다.
1 2 |
<div id="map"></div> <script src="./index.js"></script> |
index.js를 생성하고 아래처럼 지도 객체에 타일 레이어를 추가해 줍니다.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
import Map from 'ol/Map.js'; import View from 'ol/View.js'; import {Tile} from 'ol/layer.js'; import {XYZ} from 'ol/source.js'; var map = new Map({ target: 'map', layers: [ new Tile({ source: new XYZ({ url: 'http://xdworld.vworld.kr:8080/2d/Base/service/{z}/{x}/{y}.png' //url : 'http://xdworld.vworld.kr:8080/2d/Satellite/service/{z}/{x}/{y}.jpeg' 위성지도로 사용할 경우! }) }) ], view: new View({ center: [14128579.82, 4512570.74], zoom: 10, minZoom: 6 }) }); |
위의 코드를 실행시키면 아래처럼 결과가 나오게 됩니다.