Mr.Tiler-Xr로 생성한 TMS 형식의 타일맵을 OpenLayers 3에서 활용하기

Mr.Tiler-Xr은 수치지도 또는 항공영상을 타일맵으로 가공할 수 있는 툴입니다. 특히 수치지도를 이용하여 서비스에 맞는 지도를 편집하고 디자인할 수 있는 툴이고 타일맵 가공 속도가 타사의 제품에 비해 빠릅니다.

Mr.Tiler-Xr은 직관적이고 단순한 UI를 제공합니다.

직관적이고 단순한 UI를 통해서도 세련된 지도를 디자인할 수 있습니다. 건물에 대한 입체표현, 복합심벌, 라벨의 회전 등과 같은 고급 기능을 심플한 UI를 이용해 쉽게 표현할 수 있습니다.

단순히 지도를 디자인하는 것 뿐만 아니라 공간데이터를 편집할 수 있는 기능도 제공합니다. 대용량의 SHP 파일 자체를 편집할 수 있으며, 편의성을 위해 Undo/Redo 기능과 Snap 기능을 제공합니다.

이와 같은 기능을 갖는 Mr.Tiler-Xr를 이용해 가공한 전국 범위의 지도에 대한 데모의 URL은 아래와 같습니다.

Sample1 / Sample2

Mr.Tiler-Xr을 이용하여 가공한 타일맵을 TMS 형식으로도 가공할 수 있는데 이렇게 가공한 타일맵을 오픈소스인 OpenLayers 3에서 레이어로 표시하는 방법에 대해 정리한 글입니다.

먼저 Mr.Tiler-Xr를 이용하여 생성된 타일맵은 다음과 같은 구조를 갖도록 하였습니다. 이러한 구조는 필요에 따라 변경될 수 있습니다.

총 9개의 단계로 구성되 있으며 Z 폴더 밑에 Y 폴더가 있고 Y 폴더 밑에 X 방향에 대한 256×256 크기의 타일맵 이미지가 png 형식으로 저장되어 있는 구조입니다.

이러한 형식으로 저장된 타일맵을 TMS 스펙을 이용하여 OpenLayers 3에서 레이어로 표시하는 코드는 아래와 같습니다.

위의 코드에 대한 실행 화면은 아래와 같습니다.

참고로 위의 지도 화면은 OpenLayers에서 TMS를 통한 레이어 활용에 대한 테스트를 위해 Mr.Tiler-Xr에서 간단히 만든 테스트 용 배경지도입니다.

“Mr.Tiler-Xr로 생성한 TMS 형식의 타일맵을 OpenLayers 3에서 활용하기”에 대한 4개의 댓글

  1. 안녕하세요 형준님,
    저번에 타일맵 관련하여 글을 남겼는데 글이 너무 길어 삭제된 것 같습니다..
    현재 arcgis 에서 타일 캐시맵을 다이렉트로 불러오려고 하는데
    말씀하셨던 “타일맵의 디렉토리 구조가.. 피라미드(z), 가로(x), 세로(y)에 대한 구조라면..
    또한 pixel 당 실제 길이(미터 단위등)값인 resolutions을 알고..
    또한 타일맵 가공시 기준 원점(일반적으로 z=0, x=0, y=0 위치의 타일맵 이미지 좌측 상단의 지도 좌표값)을 알면.. ” 이 값을 타일을 떴을때 생성되는 conf 파일을 보고 알아내었습니다.
    근데 위와 다른 폴더 구조라 다른 형식이 필요한데…
    이미지 파일을 못 불러오는 것 같습니다.
    0레벨 기준 _alllayers\L00\R00000000 안에 PNG 파일이 존재합니다… 이것을 표출하고싶은데요.. 어떻게 해야할까요?

    1. 안녕하세요, 김형준입니다.
      구체적인 코드는 시간 상 제공해 드리지 못할듯하고..
      이미 올리신 댓글의 내용을 통해 보면 필요한 인자는 모두 파악이 된듯합니다.
      다만.. ArcGIS의 타일맵 저장 구조가 _alllayers\L00\R00000000 안에 PNG 파일인 존재한다… 라고 하셨는데..
      아마도.. L00이 Z값인 0을 의미하고 R00000000이 Y값인 0일테고.. PNG 파일명은 00000000000.png, 0000000001.png 등이 아닌가 싶은데.. 맞다면 각각 X값이 0과 1을 의미하는 것일겁니다.
      이 부분을 참고하셔서 다시 코드를 검토해 보시기 바랍니다.

  2. 구한 값들은 …
    “origin” : {
    “x” : 171162.0,
    “y” : 2787645.0
    }
    {‘level’ : 0, ‘resolution’ : 2048, ‘scale’ : 7740456.96},
    {‘level’ : 1, ‘resolution’ : 1024, ‘scale’ : 3870228.48},
    {‘level’ : 2, ‘resolution’ : 512, ‘scale’ : 1935114.24},
    {‘level’ : 3, ‘resolution’ : 256, ‘scale’ : 967557.12},
    {‘level’ : 4, ‘resolution’ : 128, ‘scale’ : 483778.56},
    {‘level’ : 5, ‘resolution’ : 64, ‘scale’ : 241889.28},
    {‘level’ : 6, ‘resolution’ : 32, ‘scale’ : 120944.64},
    {‘level’ : 7, ‘resolution’ : 16, ‘scale’ : 60472.32},
    {‘level’ : 8, ‘resolution’ : 8, ‘scale’ : 30236.16},
    {‘level’ : 9, ‘resolution’ : 4, ‘scale’ : 15118.08},
    {‘level’ : 10, ‘resolution’ : 2, ‘scale’ : 7559.04},
    {‘level’ : 11, ‘resolution’ : 1, ‘scale’ : 3779.52},
    {‘level’ : 12, ‘resolution’ : 0.5, ‘scale’ : 1889.76},
    {‘level’ : 13, ‘resolution’ : 0.25, ‘scale’ : 944.88},

    “fullExtent” : {
    “xmin” : 171162,
    “ymin” : 1214781,
    “xmax” : 1752499.8328999998,
    “ymax” : 2787645,

    “initialExtent” : {
    “xmin” : 989512.8323382064,
    “ymin” : 1818228.2391612944,
    “xmax” : 989512.8323382064,
    “ymax” : 1818228.2391612944,

  3. 좌표계는 UTM-K EPSG 5179 값을 쓰고 있으며
    00 레벨 부터 13레벨까지 존재하는 파일입니다.
    그냥 간단하게 로컬에 저장되있는 사진을 읽어오고 싶은 것 뿐인데 ㅠㅠ 어렵네요…

댓글 남기기

이메일은 공개되지 않습니다. 필수 입력창은 * 로 표시되어 있습니다