131 lines
3.9 KiB
JavaScript
131 lines
3.9 KiB
JavaScript
import Map from '../src/ol/Map.js';
|
|
import View from '../src/ol/View.js';
|
|
import {defaults as defaultControls, ScaleLine} from '../src/ol/control.js';
|
|
import WMTSCapabilities from '../src/ol/format/WMTSCapabilities.js';
|
|
import TileLayer from '../src/ol/layer/Tile.js';
|
|
import {get as getProjection, getPointResolution} from '../src/ol/proj.js';
|
|
import {register} from '../src/ol/proj/proj4.js';
|
|
import WMTS, {optionsFromCapabilities} from '../src/ol/source/WMTS.js';
|
|
import proj4 from 'proj4';
|
|
|
|
|
|
proj4.defs('EPSG:27700', '+proj=tmerc +lat_0=49 +lon_0=-2 +k=0.9996012717 ' +
|
|
'+x_0=400000 +y_0=-100000 +ellps=airy ' +
|
|
'+towgs84=446.448,-125.157,542.06,0.15,0.247,0.842,-20.489 ' +
|
|
'+units=m +no_defs');
|
|
|
|
register(proj4);
|
|
|
|
const proj27700 = getProjection('EPSG:27700');
|
|
proj27700.setExtent([0, 0, 700000, 1300000]);
|
|
|
|
const raster = new TileLayer();
|
|
|
|
const url = 'https://tiles.arcgis.com/tiles/qHLhLQrcvEnxjtPr/arcgis/rest/services/OS_Open_Raster/MapServer/WMTS';
|
|
fetch(url)
|
|
.then(function(response) {
|
|
return response.text();
|
|
})
|
|
.then(function(text) {
|
|
const result = new WMTSCapabilities().read(text);
|
|
const options = optionsFromCapabilities(result, {
|
|
layer: 'OS_Open_Raster'
|
|
});
|
|
options.attributions = 'Contains OS data © Crown Copyright and database right ' + new Date().getFullYear();
|
|
options.crossOrigin = '';
|
|
options.projection = proj27700;
|
|
options.wrapX = false;
|
|
raster.setSource(new WMTS(options));
|
|
});
|
|
|
|
|
|
const map = new Map({
|
|
layers: [raster],
|
|
controls: defaultControls({
|
|
attributionOptions: {collapsible: false}
|
|
}),
|
|
target: 'map',
|
|
view: new View({
|
|
center: [373500, 436500],
|
|
projection: proj27700,
|
|
zoom: 7
|
|
})
|
|
});
|
|
|
|
const scaleLine = new ScaleLine({bar: true, text: true});
|
|
map.addControl(scaleLine);
|
|
|
|
|
|
const dims = {
|
|
a0: [1189, 841],
|
|
a1: [841, 594],
|
|
a2: [594, 420],
|
|
a3: [420, 297],
|
|
a4: [297, 210],
|
|
a5: [210, 148]
|
|
};
|
|
|
|
|
|
// export options for html-to-image.
|
|
// See: https://github.com/bubkoo/html-to-image#options
|
|
const exportOptions = {
|
|
filter: function(element) {
|
|
const className = element.className || '';
|
|
return (
|
|
className.indexOf('ol-control') === -1 ||
|
|
className.indexOf('ol-scale') > -1 ||
|
|
(className.indexOf('ol-attribution') > -1 &&
|
|
className.indexOf('ol-uncollapsible'))
|
|
);
|
|
}
|
|
};
|
|
|
|
const exportButton = document.getElementById('export-pdf');
|
|
|
|
exportButton.addEventListener('click', function() {
|
|
|
|
exportButton.disabled = true;
|
|
document.body.style.cursor = 'progress';
|
|
|
|
const format = document.getElementById('format').value;
|
|
const resolution = document.getElementById('resolution').value;
|
|
const scale = document.getElementById('scale').value;
|
|
const dim = dims[format];
|
|
const width = Math.round(dim[0] * resolution / 25.4);
|
|
const height = Math.round(dim[1] * resolution / 25.4);
|
|
const viewResolution = map.getView().getResolution();
|
|
const scaleResolution = scale / getPointResolution(
|
|
map.getView().getProjection(),
|
|
resolution / 25.4,
|
|
map.getView().getCenter()
|
|
);
|
|
|
|
map.once('rendercomplete', function() {
|
|
exportOptions.width = width;
|
|
exportOptions.height = height;
|
|
domtoimage.toJpeg(map.getViewport(), exportOptions).then(function(dataUrl) {
|
|
const pdf = new jsPDF('landscape', undefined, format);
|
|
pdf.addImage(dataUrl, 'JPEG', 0, 0, dim[0], dim[1]);
|
|
pdf.save('map.pdf');
|
|
// Reset original map size
|
|
scaleLine.setDpi();
|
|
scaleLine.setMinWidth();
|
|
map.getTargetElement().style.width = '';
|
|
map.getTargetElement().style.height = '';
|
|
map.updateSize();
|
|
map.getView().setResolution(viewResolution);
|
|
exportButton.disabled = false;
|
|
document.body.style.cursor = 'auto';
|
|
});
|
|
});
|
|
|
|
// Set print size
|
|
scaleLine.setDpi(resolution);
|
|
scaleLine.setMinWidth(resolution * 4 / 2.54); // 4cm
|
|
map.getTargetElement().style.width = width + 'px';
|
|
map.getTargetElement().style.height = height + 'px';
|
|
map.updateSize();
|
|
map.getView().setResolution(scaleResolution);
|
|
|
|
}, false);
|