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

작성일자

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>
작성일자

PostgreSQL의 LIKE 검색

이 글의 원문은 아래와 같습니다.

http://www.tutorialspoint.com/postgresql/postgresql_like_clause.htm

PostgreSQL은 엔터프라이즈급의 대용량의 데이터 처리에 적합한 안정적인 DBMS입니다. 이글은 SELECT 문에서 LIKE 검색에 대해 간단히 정리한 글입니다.

LIKE 검색에서 주요한 2가지 특수문자가 사용됩니다.

  • Percent Sign(%) : 0개 이상의 불특정 문자를 나타냄
  • Under Score(_) : 1개의 불특정 문자를 나타냄

LIKE 검색의 예와 그 결과에 대한 설명은 아래와 같습니다.

  • WHERE SALARY::text LIKE ‘200%’ – 200으로 시작하는 모든 값을 검색함
  • WHERE SALARY::text LIKE ‘%200%’ – 200을 포함하는 모든 값을 검색함
  • WHERE SALARY::text LIKE ‘_00%’ – 두번째 부터 00으로 시작하는 모든 값을 검색함
  • WHERE SALARY::text LIKE ‘2_%_%’ – 2로 시작하며 최소 3개의 문자로 구성된 값을 검색함
  • WHERE SALARY::text LIKE ‘%2’ – 2로 끝나는 모든 값을 검색함
  • WHERE SALARY::text LIKE ‘_2%3’ – 두번째부터 2로 시작하고 3으로 끝나는 모든 값을 검색함
  • WHERE SALARY::text LIKE ‘2___3’ – 2로 시작하고 3으로 끝나며 5개의 문자로 구성된 모든 값을 검색함

작성일자

[C#] 일반 컨트롤에 툴팁 기능 부여하기

일반 컨트롤에 툴팁을 부여하기 위해서 가장 먼저 속성 중 ToolTip을 찾습니다. 그러나 기대와 다르게 이러한 속성은 없습니다. 예를 들어 Button 컨트롤의 속성을 살펴보면 다음과 같습니다.

대신 C#에서는 ToolTip이라는 클래스를 통해 이러한 툴팁을 제공할 수 있도록 하고 있는데요. 아래의 코드는 어떤 컨트롤들(3개의 버튼)에 대해서 툴팁을 설정하고 있는 코드입니다.

ToolTip toolTip = new ToolTip();

toolTip.AutoPopDelay = 5000;
toolTip.InitialDelay = 1000;
toolTip.ReshowDelay = 500;
toolTip.ShowAlways = true;
toolTip.IsBalloon = true;

toolTip.SetToolTip(this.btnRefresh, "Refresh");
toolTip.SetToolTip(this.btnView, "View map");
toolTip.SetToolTip(this.btnAttr, "View fields");

단 하나의 ToolTip 객체를 통해 다수의 컨트롤에 툴팁을 부여할 수 있다는 것을 알 수 있습니다. 실행해 보면 아래와 같이 툴팁이 나타납니다.

그런데 가만히 보시면 툴팁 모양이 풍선입니다. 2000년대에 유행했던.. 이유는 7번 코드의 IsBalloon의 속성값을 true로 지정했기 때문인데요. 이 코드를 제거하면 현대적 감각의 최첨단 단순 툴팁을 보실 수 있습니다.

작성일자

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

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에서 간단히 만든 테스트 용 배경지도입니다.