GIS Developer

지도를 이동 또는 확대 후에 지도가 표시되는 화면의 영역을 얻어야할 때가 있습니다. 여기서의 화면 영역의 좌표는 지도 좌표입니다. 이 글은 지도가 이동 또는 확대 시 발생되는 이벤트를 통해서.. 변경된 지도 화면에 대한 지도 좌표 영역을 얻어서 지도 상에 사각형으로 그려주는 예를 소개합니다.

먼저 필요한 index.html 파일의 내용입니다.

그리고 index.js 파일에 대한 내용인데, 순차적으로 하나씩 언급하면.. 먼저 필요한 모듈의 추가입니다.

import 'ol/ol.css';
 
import Map from 'ol/Map.js';
import View from 'ol/View.js';
import {getBottomLeft, getTopRight, getBottomRight, getTopLeft} from 'ol/extent.js';
import {toLonLat} from 'ol/proj.js';
import OSM from 'ol/source/OSM.js';
import {Vector as VectorSource} from 'ol/source.js';
import Feature from 'ol/Feature.js';
import {LineString} from 'ol/geom.js';
import {Stroke, Style} from 'ol/style.js';
import {Tile as TileLayer, Vector as VectorLayer} from 'ol/layer.js';
import {get as getProjection} from 'ol/proj.js';

현재 화면 영역에 대한 사각형 도형을 추가하기 위한 벡터 레이어가 필요하므로 이를 위한 레이어 생성과 이 레이어로 구성된 지도를 생성하는 코드입니다.

var vectorsource = new VectorSource();

var vectorlayer = new VectorLayer({
    source: vectorsource,
    style: new Style({
        stroke: new Stroke({
            width: 2,
            color: [0, 0, 255, 1]
        })
    })
});

var map = new Map({
    layers: [
        new TileLayer({
            source: new OSM()
        }),
        vectorlayer
    ],
    target: 'map',
    view: new View({
        center: [0, 0],
        zoom: 18
    })
});

사용자가 지도를 확대 또는 이동하면 지도에 대해서 moveend 이벤트가 발생하는데, 이 이벤트에 대한 콜백 함수를 지정합니다.

map.on('moveend', onMoveEnd);

function onMoveEnd(evt) {
    var map = evt.map;
    var size = map.getSize();
    var extent = map.getView().calculateExtent(size);
    var bottomLeft = toLonLat(getBottomLeft(extent));
    var topRight = toLonLat(getTopRight(extent));
    var bottomRight = toLonLat(getBottomRight(extent));
    var topLeft = toLonLat(getTopLeft(extent));

    var box = new Feature(new LineString(
        [
            [bottomLeft[0], bottomLeft[1]], 
            [bottomRight[0], bottomRight[1]], 
            [topRight[0], topRight[1]],
            [topLeft[0], topLeft[1]],
            [bottomLeft[0], bottomLeft[1]]
        ])
    );

    var current_projection = getProjection('EPSG:4326');
    var new_projection = getProjection('EPSG:3857');
 
    box.getGeometry().transform(current_projection, new_projection);

    vectorsource.addFeatures([box]);
}

이 글의 핵심적인 내용이니 하나씩 파악해보면… 5번 코드의 map에 대한 getSize()를 통해 얻어올 수 있는 것은 현재 지도에 대한 픽셀 단위의 화면 크기입니다. 이 화면 크기를 이용해 map의 view에 대한 calculateExtent 함수의 인자로 전달해 해당 크기만큼의 현재 지도 화면의 지도 좌표의 경계(MinX, MinY, MaxX, MaxY)를 얻는 코드가 6입니다. 이렇게 얻은 지도 좌표 경계는 사각형 형태인데 각 4개의 모서리 좌표를 얻는 것이 7-10번 코드입니다. 그런데 이 코드들을 보면 좌표를 경위도로 변경하고 있는데.. 이는 OSM의 좌표계인 EPSG:4326으로 넘어오기 때문에 이를 WGS84 타원체의 경위도 좌표계(EPSG:3857)로 변환하는 것입니다. 사실 그냥 표현만을 위한 것이라면 OSM 좌표계로 그대로 사용해도 되지만 DBMS에 저장시에는 경위도 좌표계가 필요한 경우가 많아 소개해 봅니다. 이렇게 얻은 좌표를 이용해 Feature를 생성하고, 이를 다시 화면에 표시하기 위해 EPSG:3857에서 EPSG:4326으로 변환합니다. ^^; 역시 좌표계 변환을 방법을 소개 및 정리하기 위해 추가해본 코드입니다. 이처럼 좌표변환까지 완료된 Feature를 소스에 추가해 주면 됩니다.

웹에서 PDF 파일을 생성하는 것은 클라이언트가 서버에 PDF 파일 생성을 요청하고 서버측에서 생성한 PDF 파일을 클라이언트에서는 다운로드 하는 방식으로 이루어졌다. 하지만 서버의 기술 없이도 클라이언트에서 PDF 파일을 생성해 내려받을 수 있는데, 이를 ol의 지도를 PDF 파일로 생성하는 것을 토대로 정리해 본다.

웹에서 JS만으로 PDF를 생성하는 API로 많이 사용되는 jspdf.js 라이브러리가 있는데 이를 이용한다.

먼저 index.html에 UI 요소에 대한 코드를 다음처럼 작성한다.

    
        
        
        

        
    
                    
        

        Save PDF

        
    

jspdf.js 스크립트에 대한 추가와 DOM 요소로써 PDF로 출력할 지도에 대한 DIV 및 PDF 출력을 위한 버튼이 보인다. index.js에 JS 코드를 작성할 것인데, 하나씩 살펴보자.

먼저 필요한 모듈을 추가한다.

import 'ol/ol.css';
 
import Map from 'ol/Map.js';
import View from 'ol/View.js';
import {Tile as TileLayer, Vector as VectorLayer} from 'ol/layer.js';
import {OSM, Vector as VectorSource} from 'ol/source.js';

다음은 출력할 지도 객체에 대한 코드이다.

var map = new Map({
        layers: [
        new TileLayer({
            source: new OSM()
        })
    ],
    target: 'map',
    view: new View({
        center: [0, 0],
        zoom: 2
    })
});

이제 버튼을 클릭하면 해당 지도의 내용이 PDF로 출력되는데, 이를 위해 필요한 변수이다.

var format = 'a4';

/*  Unit : mm
    A0: [1189, 841]
    A1:  [841, 594]
    A2:  [594, 420]
    A3:  [420, 297]
    A4:  [297, 210]
    A5:  [210, 148]
*/
var dim = [297, 210];

var resolution = 150; //dpi (Unit: inch)

지도를 A4 용지 크기로 PDF 출력할 것이고, A4 용지의 크기는 397mm x 210mm 라는 점. 그리고 출력 DPI 해상도는 150으로 지정했는데, 이를 높이면 그만큼 출력 품질은 올라가지만 더 많은 CPU와 메모리 자원을 사용하고 생성하는 시간도 상당이 길어진다. 다음은 출력 버튼의 클릭 이벤트에 대한 코드이다.

var btn = document.querySelector('#btn');

btn.addEventListener('click', function() {
    btn.disabled = true;
    document.body.style.cursor = 'progress';

    var width = Math.round(dim[0] * resolution / 25.4); // 1in = 25.4mm
    var height = Math.round(dim[1] * resolution / 25.4);
    var size = /** @type {module:ol/size~Size} */ (map.getSize());
    var extent = map.getView().calculateExtent(size);

    map.once('rendercomplete', function(event) {
        var canvas = event.context.canvas;
        var data = canvas.toDataURL('image/jpeg');
        var pdf = new jsPDF({
            orientation: 'landscape',
            unit: 'mm',
            format: format
        });

        pdf.addImage(data, 'JPEG', 0, 0, dim[0], dim[1]);
        pdf.save('map.pdf');
        
        // Reset original map size
        map.setSize(size);
        map.getView().fit(extent, {size: size});
        
        btn.disabled = false;
        document.body.style.cursor = 'auto';
    });

    // Set print size
    var printSize = [width, height];
    map.setSize(printSize);
    map.getView().fit(extent, {size: printSize});
}, false);

위의 코드를 이해하기 위해서는 먼저 jspdf.js 라이브러리의 사용법을 익히는게 필요하다. 중요한 부분만을 언급하면 7~10번은 앞서 A4 용지 크기만큼 지도를 출력하기 위해서는 A4 용지의 크기만큼 지도를 다시 그려줘야하는데 그려줄 영역의 크기를 계산하고 이 크기를 33~35번 코드처럼 지도 객체에 설정하게 되면 지도가 그려지게 시작하면서 다 그려지면 rendercomplete 이벤트가 발생한다. 이 이벤트에 대한 호출 함수는 12번에서 정의되어 있는데 여기서 jsPDF 라이브러리를 사용하는 코드가 보인다. jsPDF를 통해 PDF 출력이 끝나면 다시 지도를 원래의 크기로 되돌리기 위해 25~26번 코드의 호출이 필요하다.