열린 레이어가있는 PDF 파일을 만드는 솔루션을 찾으려고합니다.openlayers div를 사용하여 pdf 파일을 만드는 방법
나는 사용자에게 PDF 파일을 생성하기 위해 openlayers로 만든 WMTS 타일이 들어있는 div가 있습니다. 나는 인터넷을 통해 exloring을 시도했지만 해결책을 찾지 못했습니다. 여기
<body> <div id="mapContainer" /> </body>
이전에 window.print()을 사용했지만 사용자가 볼 수있는 일부지도 데이터가 잘 렸습니다. 가능한 해결책을 제시하십시오.
Openlayers3에서 인쇄용 PDF 예제 (Export PDF example)를 제공했음을 기억합니다.
<!DOCTYPE html>
<html>
<head>
<title>Export PDF example</title>
<link rel="stylesheet" href="https://openlayers.org/en/v3.20.1/css/ol.css" type="text/css">
<!-- The line below is only needed for old environments like Internet Explorer and Android 4.x -->
<script src="https://cdn.polyfill.io/v2/polyfill.min.js?features=requestAnimationFrame,Element.prototype.classList,URL"></script>
<script src="https://openlayers.org/en/v3.20.1/build/ol.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.2.61/jspdf.min.js"></script>
<style>
.map {
max-width: 566px;
}
</style>
</head>
<body>
<div class="row-fluid">
<div class="span12">
<div id="map" class="map"></div>
</div>
</div>
<form class="form">
<label>Page size </label>
<select id="format">
<option value="a0">A0 (slow)</option>
<option value="a1">A1</option>
<option value="a2">A2</option>
<option value="a3">A3</option>
<option value="a4" selected>A4</option>
<option value="a5">A5 (fast)</option>
</select>
<label>Resolution </label>
<select id="resolution">
<option value="72">72 dpi (fast)</option>
<option value="150">150 dpi</option>
<option value="300">300 dpi (slow)</option>
</select>
</form>
<button id="export-pdf">Export PDF</button>
<script>
var raster = new ol.layer.Tile({
source: new ol.source.OSM()
});
var format = new ol.format.WKT();
var feature = format.readFeature(
'POLYGON((10.689697265625 -25.0927734375, 34.595947265625 ' +
'-20.1708984375, 38.814697265625 -35.6396484375, 13.502197265625 ' +
'-39.1552734375, 10.689697265625 -25.0927734375))');
feature.getGeometry().transform('EPSG:4326', 'EPSG:3857');
var vector = new ol.layer.Vector({
source: new ol.source.Vector({
features: [feature]
})
});
var map = new ol.Map({
layers: [raster, vector],
target: 'map',
controls: ol.control.defaults({
attributionOptions: /** @type {olx.control.AttributionOptions} */ ({
collapsible: false
})
}),
view: new ol.View({
center: [0, 0],
zoom: 2
})
});
var dims = {
a0: [1189, 841],
a1: [841, 594],
a2: [594, 420],
a3: [420, 297],
a4: [297, 210],
a5: [210, 148]
};
var loading = 0;
var loaded = 0;
var exportButton = document.getElementById('export-pdf');
exportButton.addEventListener('click', function() {
exportButton.disabled = true;
document.body.style.cursor = 'progress';
var format = document.getElementById('format').value;
var resolution = document.getElementById('resolution').value;
var dim = dims[format];
var width = Math.round(dim[0] * resolution/25.4);
var height = Math.round(dim[1] * resolution/25.4);
var size = /** @type {ol.Size} */ (map.getSize());
var extent = map.getView().calculateExtent(size);
var source = raster.getSource();
var tileLoadStart = function() {
++loading;
};
var tileLoadEnd = function() {
++loaded;
if (loading === loaded) {
var canvas = this;
window.setTimeout(function() {
loading = 0;
loaded = 0;
var data = canvas.toDataURL('image/png');
var pdf = new jsPDF('landscape', undefined, format);
pdf.addImage(data, 'JPEG', 0, 0, dim[0], dim[1]);
pdf.save('map.pdf');
source.un('tileloadstart', tileLoadStart);
source.un('tileloadend', tileLoadEnd, canvas);
source.un('tileloaderror', tileLoadEnd, canvas);
map.setSize(size);
map.getView().fit(extent, size);
map.renderSync();
exportButton.disabled = false;
document.body.style.cursor = 'auto';
}, 100);
}
};
map.once('postcompose', function(event) {
source.on('tileloadstart', tileLoadStart);
source.on('tileloadend', tileLoadEnd, event.context.canvas);
source.on('tileloaderror', tileLoadEnd, event.context.canvas);
});
map.setSize([width, height]);
map.getView().fit(extent, /** @type {ol.Size} */ (map.getSize()));
map.renderSync();
}, false);
</script>
</body>
</html>