[카테고리:] 프로그래밍

작성일자

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

일전에 Mr.Tiler-Xr로 생성한 TMS 형식의 타일맵을 OpenLayers 3에서 활용하는 글을 올린 적이 있습니다. 이번에는 OpenLayers 2에서 Mr.Tiler-Xr로 생성한 TMS 형식의 타일맵을 활용하는 글을 정리해 봅니다.

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를 이용하여 생성된 타일맵은 TMS는 Z 폴더 밑에 Y 폴더가 있고 Y 폴더 밑에 X 방향에 대한 256×256 크기의 타일맵 이미지가 png 형식으로 저장되어 있는 구조입니다.

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

function getTmsUrl(bounds) {
    var res = this.map.getResolution();
    var x = Math.round(
        (bounds.left - this.maxExtent.left) / (res * this.tileSize.w));
    var y = Math.round(
        (bounds.bottom - this.maxExtent.bottom) / (res * this.tileSize.h));
    var z = this.map.getZoom() + 1;

    var path = z + "/" + y + "/" + x + "." + this.type;
    var url = this.url;

    //if (url instanceof Array) {
    //    url = this.selectUrl(path, url);
    //}

    return url + path;
}

var layer = new OpenLayers.Layer.TMS(
    "LayerName",
    "http://222.237.78.208:8080/t/",
    { type: 'png', getURL: getTmsUrl }
);

var map = new OpenLayers.Map(
    'map',
    {
        maxExtent: new OpenLayers.Bounds(
            13886285, 3883489, 14695249, 4666659),
        resolutions: [1222, 610.984, 305.492, 152.746, 76.373],
        numZoomLevels: 5
    }
);

map.addLayer(layer);
map.addControl(new OpenLayers.Control.LayerSwitcher());
map.setCenter(new OpenLayers.LonLat(14085657, 3943422), 3);
작성일자

jQuery를 이용해 DOM의 크기 얻기

아래와 같은 Visual DOM 객체가 있다고 하자. jQuery를 이용해 이 객체의 가로와 세로에 대한 픽셀 크기를 얻는 코드에 대해 정리해 봅니다.

Visual DOM 객체는 눈에 보이는 것, 즉 본래의 모양과 외곽선(Border) 이외에도 Padding과 Margin와 같은 보이지 않지만 활용에서 유용한 속성을 갖는다. 아래의 그림을 보면..

위의 그림은 w3schools.com에서 jQuery 튜토리얼에서 가져온 그림입니다.

그림에서 함수는 jQuery에서 얻는 DOM 객체에 대한 것입니다. 정리를 하면 아래와 같습니다.

  • width(), height() ㅡ Padding, Border, Margin을 제외한 크기
  • innerWidth(), innerHeight() ㅡ Border, Margin을 제외한 크기
  • outerWidth(), outerHeight() ㅡ Margin을 제외한 크기
  • outerWidth(true), outerHeight(true) ㅡ Padding, Border, Margin을 모두 포함한 크기

특히나 위의 width와 height 함수는 크기를 얻는(get) 기능을 하면서도 인자를 받으면 해당 인자의 값만큼 크기를 설정하는(set) 기능도 갖습니다.

이제 이 글의 맨 앞에서 보인 DOM 객체(ID가 div1임)에 대한 스타일을 살펴봄으로써 Border, Padding, Margin의 값을 살펴볼 수 있습니다.

#div1 {
    height: 100px;
    width: 300px;
    padding: 10px;
    margin: 3px;
    border: 2px solid blue;
    background-color: lightblue;
}

ID가 div1인 div를 jQuery로 얻어 그 크기 몇가지를 얻는 코드는 아래와 같습니다.

$(document).ready(function () {
    $("button").click(function () {
        var div = $("#div1");
        var txt = "";

        txt += "Width of div: " + div.width() + "
";
        txt += "Height of div: " + div.height() + "
";
        txt += "Outer width of div (margin included): " 
            + div.outerWidth(true) + "
";
        txt += "Outer height of div (margin included): " 
            + div.outerHeight(true);

        div.html(txt);
    });
});

실행하고 이벤트가 설정된 버튼을 클릭하면 아래와 같은 결과를 살펴볼 수 있습니다.

참고로 위의 예제에서 사용한 body 부분의 DOM 구성 코드는 아래와 같습니다.


    
>/div>