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