[openlayers] 지도표현방식(WMS, TMS)

1. 지도표현방식 대표적인 2가지 (WMS와 TMS)

웹에서 지도를 표현하는 방식에는 대표적으로 WMS(Web Map Service)와  TMS(Tile Map Service )가 있습니다.

1) WMS(Web Map Service)
맵 데이터를 제공해주는 서비스입니다. WMS방식에는 맵 엔진이 반드시 필요합니다.  각 회사에서 개발한 맵 엔진 또는 GeoServer 같은 프로그램을 설치하여 맵 엔진 역할을 할 수도 있습니다.

맵 엔진으로 WMS를 구축하면 맵 서비스 요청에 필요한 맵 데이터를 가공하여 리턴해주는 형식입니다.
다만 TMS방식과 비교하였을 경우 상대적으로 맵 서비스 속도가 떨어집니다.

2)TMS(Tile Map Service )

TMS는 타일맵 서비스 입니다. 타일 형식으로 구역별 X,Y,Z 축으로 나누어진 지도 이미지를 가지고 있으면 그대로  이미지를 반환해줍니다. 속도는 이미 갖고있는 이미지를 리턴해주기 때문에 WMS방식보다는 빠릅니다.

---

2. (예제)TMS 방식으로 지도띄우기

이번 포스팅에서는 OSM지도를 사용하지 않고 TMS 방식을 이용해보고자 합니다.

아주 간단한 예시를 위해 기존 폴더에 mapImg라는 폴더를 생성하고 그 안에  {z}/{x}/{y}.png(축척/x좌표/y좌표) 순으로 디렉토리를 생성해 마지막 {y}는 파일을 생성해보았습니다.

각 폴더 안에는 47~50.png 파일을 동일하게 넣어주었습니다.
이미지 파일은 지도상에 띄워지는 순서를 알기위해 지도이미지 대신 각 파일 숫자를 넣어보았습니다.

그리고 나서 지난 포스팅에서 사용했던
ol.source.OSM()가 아닌 만들어둔 이미지를 띄우기뉘해 ol.source.XYZ()를 사용해보겠습니다.

ol.source.XYZ는
zoom레벨과 타일 그리드 x/y 좌표가 포함된 URL을 통해 액세스되는 타일 데이터에 사용됩니다.
그러므로 배경이미지를 만들어두었던 파일의 폴더위치를 url에 기입해보았습니다.

window.onload = ()=>{
         // 맵 객체 생성
         mainBgMap = new ol.Map({
            // 지도가 표시될 div id
            target: 'mapArea',
            // 레이어 추가
            layers: [
               // 타일 레이어 추가 (OpenStreetMap)
               new ol.layer.Tile({
                  source: new ol.source.XYZ({
                     url:
                     './mapImg/{z}/{x}/{y}.png'
                  }),
               })

            ],
            view: new ol.View({
               // 중심 좌표 설정 (위도, 경도)
               center: ol.proj.transform([127, 37.5], 'EPSG:4326', 'EPSG:3857'),
               // 줌 레벨 설정(1~20)
               zoom: 7
            })
         });
      }

아래사진과 같이 지도가 나타납니다.

타일이미지의 위치설명을 덧붙이자면
폴더 경로를 기준으로 {z}/{x}/{y} 순으로 나열되는걸 확인하실 수 있습니다.