[태그:] Mr.Tiler-Xr

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에서 레이어로 표시하는 코드는 아래와 같습니다.

var resolutions = [
    69.1891891892301, 34.5945945945568, 17.2972972972784, 
    8.64864864863921, 4.3243243242614, 2.1621621621307, 
    1.08108108118176, 0.540540540474467, 0.270270270295441
];

var map = new ol.Map({
    renderer: 'dom',
    target: 'map',
    layers: [
        new ol.layer.Tile({
            source: new ol.source.XYZ({
                tileUrlFunction: function (coordinate) {
                    if (coordinate == null) { 
                        return "";
                    }

                    var z = coordinate[0]+1;
                    var x = coordinate[1];
                    var y = coordinate[2];

                    return 'http://www.gisdeveloper.co.kr:8080/' + z + '/' 
                        + y + '/' + x + '.png';
                },
                tileGrid: new ol.tilegrid.TileGrid({
                    origin: [966265, 1823416],
                    resolutions: resolutions
                }),
            })
        })
    ],
    view: new ol.View({
        center: [977575, 1823685],
        maxZoom: 19,
        minZoom: 11,
        maxResolution: 69.1891891892301,
        minResolution: 0.270270270295441,
        zoom: 19
    })
});

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

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