十章-99-导出地图PDF
2020-03-27 本文已影响0人
彩云飘过
本文基于腾讯课堂老胡的课《跟我学Openlayers--基础实例详解》做的学习笔记，使用的openlayers 5.3.x api。
源码 见 1099.html ，对应的 官网示例
导出地图png / jpg 见七章-88导出地图PNG
核心技术点：
使用canvas将当前的地图转换为jpg图像，再利用jdpdf库生成pdf
<!DOCTYPE html>
<html>
<head>
<title></title>
<link rel="stylesheet" href="../include/ol.css" type="text/css" />
<link rel="stylesheet" href="../include/bootstrap.css" type="text/css" />
<script src="../include/jquery.js"></script>
<script src="../include/ol.js"></script>
<script src="../include/jsts.min.js"></script>
<script src="../include/jspdf.min.js"></script>
</head>
<style>
</style>
<body>
<div class="row-fluid">
<div class="span12">
</div>
</div>
<form class="form">
<label>页面大小</label>
<select id="format">
<option value="a0">A0 (慢)</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 (较快)</option>
</select>
<label>分辨率 </label>
<select id="resolution">
<option value="72">72 dpi (较快)</option>
<option value="150">150 dpi</option>
<option value="300">300 dpi (较慢)</option>
</select>
</form>
<button id="export-pdf">导出 PDF</button>
<div id="map" class="map"></div>
<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',
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 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 {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('landscape', undefined, 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 });
exportButton.disabled = false;
document.body.style.cursor = 'auto';
});
// Set print size
var printSize = [width, height];
map.setSize(printSize);
map.getView().fit(extent, { size: printSize });
}, false);
</script>
</body>
</html>
