[카테고리:] OpenLayers

작성일자

[OpenLayers3] 지도 표시와 확대, 축소

OpenLayers3에서 Open Street Map을 배경맵으로 지정하고 맵을 확대, 축소하는 코드에 대한 예제를 설명합니다. 최종적으로 완성될 예제는 아래와 같은 지도화면으로 표시되고 작동됩니다.

위의 실행 화면을 구성하는 UI는 모두 3개입니다. 첫째는 지도를 표시하는 div와 축소와 확대에 대한 button입니다. 즉, UI는 body 부분에 다음 코드와 같습니다.

ID가 map인 div의 크기를 지정하기 위해 style에 대한 코드를 다음처럼 지정하였습니다.

이 예제는 OpenLayers3와 jQuery를 사용하는데요. 이를 위해 아래의 코드를 통해 css와 js를 가져와 페이지에 포함합니다.

UI와 필요한 js 라이브러리에 대한 준비가 모두 끝났는데요. 이제 코드를 살펴보겠습니다. 배경지도를 준비하고 축소 및 확대 버튼에 대한 이벤트 코드를 지정하는 코드는 아래와 같습니다.

위의 코드를 자세히 설명하면 다음과 같습니다. 먼저 3번 코드에서 ol.Map 객체를 생성하고 있는데요. 생성자의 인자로 지정하는 코드가 4~14번까지입니다. 4번 코드의 layers를 통해 지도를 구성하는 레이어를 배열로 지정할 수 있는데, 여기서는 오픈 스트리트 맵을 위해 기본적으로 제공되는 ol.source.OSM 객체를 생성하여 간단히 레이어를 추가하고 있습니다. 그리고 9번의 target는 지도가 표시되는 div의 ID를 지정합니다. 10~13번 코드는 지도가 화면에 표시되는 중심좌표와 줌 레벨을 지정합니다. 11번의 center를 통해 표시할 지도의 중심 좌표를 지정하는데, ol.proj.fromLonLat 함수를 통해 경위도를 오픈스트리트맵의 좌표계로 간단히 변환할 수 있습니다. 그리고 zoom에 5를 지정하였습니다. 이 zoom 값이 클수록 지도가 확대됩니다. 37번의 코드는 축소 버튼에 대한 클릭 이벤트를 지정하는 코드입니다. 이 클릭 이벤트의 코드 중 38번은 현재 지도의 뷰 상태 객체를 얻어오고, 이 뷰 객체에서 현재의 zoom 값을 얻습니다. 이렇게 얻은 zoom 값에 -1을 한 값을 다시 뷰 객체의 setZoom 함수의 인자로 전달함으로써 지도가 축소되게 합니다. 43번은 지도를 확대하는 버튼에 대한 이벤트 지정 코드입니다.

아래는 위에서 설명한 전체 코드에 대한 다운로드입니다.

작성일자

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

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