[카테고리:] OpenLayers

작성일자

[OpenLayers] 지도 화면을 PDF 파일로 저장하기

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

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

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



    
        
        OpenLayers

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번 코드의 호출이 필요하다.

작성일자

[OpenLayers] 지오메트리(Geometry)에 대한 공간 연산(JSTS.js 사용)

ol에서 지오메트리에 대해 buffer나 union 등과 같은 공간 연산 기능에 대한 API를 정리합니다. 공간 연산 기능은 JSTS.js라는 별도의 라이브러리를 통해 수행합니다. JSTS.js는 Java의 JTS 라이브러리를 Javascript 언어로 포팅한 라이브러리입니다. 이글은 공간 연산을 위한 지오메트리를 생성하기 위해 “마우스로 Vector 생성하기(그리기)”라는 글의 코드를 약간 변형하여 사용합니다. ol에서 마우스로 도형을 그리는 API의 설명은 이 글을 참고 하기 바랍니다.

먼저 실행 결과를 아래의 동영상을 통해 살펴볼 수 있습니다.

사용자가 Buffer 연산을 적용할 지오메트리를 그리면 바로 200m 만큼 Buffer 연산이 적용되어 화면에 표시됩니다. 이를 위해 먼저 index.html 파일을 아래처럼 구성합니다.



    
        
        OpenLayers

20번 라인에 jsts.js 라이브러리 스크립트를 추가하고 있습니다. index.js 파일에 대해 설명하면 다음과 같습니다.

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

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

그리고 레이어와 지도를 구성합니다.

var raster = new TileLayer({
    source: new OSM()
});

var source = new VectorSource({wrapX: false});
 
var vector = new VectorLayer({
    source: source
});

var map = new Map({
    layers: [raster, vector],
    target: 'map',
    view: new View({
        center: [-11000000, 4600000],
        zoom: 15
    })
});

다음으로 그리고자 하는 도형의 종류를 선택하는 UI의 이벤트 처리와 도형을 그리는 Draw 클래스 타입을 위한 draw 변수를 정의합니다.

var typeSelect = document.getElementById('type');
 
typeSelect.onchange = function() {
    map.removeInteraction(draw);
    addInteraction();
};
 
addInteraction();

var draw;

지금까지는 “마우스로 Vector 생성하기(그리기)”의 내용과 큰 차이가 없습니다. 이제 변경된 가장 중요한 부분인 addInteraction 함수는 아래와 같습니다.

function addInteraction() {
    var value = typeSelect.value;
 
    if (value !== 'None') {
        draw = new Draw({
            source: source,
            type: typeSelect.value,
            freehand: true
        });

        draw.on('drawend', function(e) {
            var format = new WKT();
            var feature = e.feature;
            var wkt = format.writeFeature(feature);
            var reader = new jsts.io.WKTReader()
            var jstsGeom = reader.read(wkt)
            var buffered = jstsGeom.buffer(200);
            var writer = new jsts.io.WKTWriter()
            var bufferedWKT = writer.write(buffered);
            var bufferedFeature = format.readFeature(bufferedWKT);

            feature.setGeometry(bufferedFeature.getGeometry());
        });

        map.addInteraction(draw);
    }
}

마우스를 통한 도형 그리기가 완료되면 11번 코드에 등록된 drawend 이벤트 함수가 호출됩니다. 이 이벤트 함수에서 그려진 도형을 WKT로 변환하고 JSTS.js에서 해석할 수 있는 지오메트로로 변환한 후 Buffer 연산을 수행합니다. 그리고 이를 다시 WKT로 변환하고 ol의 지오메트리로 변환하는 과정을 거치게 됩니다. 실행하면 앞서 살펴본 영상과 동일한 결과를 볼 수 있습니다.