[OpenLayers] 지도를 이미지로 저장하기

ol의 지도로 표현된 내용을 이미지 파일로 저장하는 내용에 대한 정리입니다. 먼저 지도를 위한 div와 이미지 저장을 위한 버튼에 대한 tag를 아래처럼 index.html에 작성합니다.

그림 파일로 저장

지도를 구성하는 코드는 아래와 같고..

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
    })
});

이미지 저장을 위한 버튼을 클릭할 경우와 관련된 코드는 아래와 같습니다.

document.querySelector('#saveAsImage').addEventListener('click', function() {
    map.once('rendercomplete', function(event) {
        var canvas = event.context.canvas;
        if (navigator.msSaveBlob) {
            navigator.msSaveBlob(canvas.msToBlob(), 'map.png');
        } else {
            canvas.toBlob(function(blob) {
                saveAs(blob, 'map.png');
            });
        }
    });
    map.renderSync();
});

saveAs라는 함수가 보이는데, 이 함수를 사용하기 위해서는 다음과 같은 js 라이브러리를 페이지에 포함해야 합니다.