You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
543 lines
24 KiB
HTML
543 lines
24 KiB
HTML
2 weeks ago
|
<!DOCTYPE html>
|
||
|
|
<html lang="en-US">
|
||
|
|
<head>
|
||
|
|
<meta charset="UTF-8">
|
||
|
|
<meta http-equiv="X-UA-Compatible" content="IE=Edge">
|
||
|
|
<meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
|
||
|
|
<script>
|
||
|
|
var gaProperty = 'UA-2577926-1';
|
||
|
|
// Disable tracking if the opt-out cookie exists.
|
||
|
|
var disableStr = 'ga-disable-' + gaProperty;
|
||
|
|
if (document.cookie.indexOf(disableStr + '=true') > -1) {
|
||
|
|
window[disableStr] = true;
|
||
|
|
}
|
||
|
|
function gaOptout() {
|
||
|
|
document.cookie = disableStr + '=true; expires=Thu, 31 Dec 2099 23:59:59 UTC; path=/';
|
||
|
|
window[disableStr] = true;
|
||
|
|
}
|
||
|
|
function gaOptoutRevoke() {
|
||
|
|
document.cookie = disableStr + '=false; expires=Thu, 31 Dec 2099 23:59:59 UTC; path=/';
|
||
|
|
window[disableStr] = false;
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
<!-- Global site tag (gtag.js) - Google Analytics -->
|
||
|
|
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-2577926-1"></script>
|
||
|
|
<script>
|
||
|
|
window.dataLayer = window.dataLayer || [];
|
||
|
|
function gtag(){dataLayer.push(arguments);}
|
||
|
|
gtag('js', new Date());
|
||
|
|
gtag('config', 'UA-2577926-1', { 'anonymize_ip': true });
|
||
|
|
</script>
|
||
|
|
<link rel="stylesheet" type="text/css" href="//cdnjs.cloudflare.com/ajax/libs/cookieconsent2/3.1.0/cookieconsent.min.css" />
|
||
|
|
<script src="//cdnjs.cloudflare.com/ajax/libs/cookieconsent2/3.1.0/cookieconsent.min.js"></script>
|
||
|
|
<script src="https://unpkg.com/lz-string@1.4.4/libs/lz-string.min.js"></script>
|
||
|
|
<script>
|
||
|
|
window.addEventListener("load", function() {
|
||
|
|
window.cookieconsent.initialise({
|
||
|
|
'palette': {
|
||
|
|
'popup': {
|
||
|
|
'background': '#eaf7f7',
|
||
|
|
'text': '#5c7291'
|
||
|
|
},
|
||
|
|
'button': {
|
||
|
|
'background': '#56cbdb',
|
||
|
|
'text': '#ffffff'
|
||
|
|
}
|
||
|
|
},
|
||
|
|
'theme': 'edgeless',
|
||
|
|
'type': 'opt-out',
|
||
|
|
'onInitialise': function (status) {
|
||
|
|
if (!this.hasConsented()) {
|
||
|
|
gaOptout()
|
||
|
|
}
|
||
|
|
},
|
||
|
|
'onStatusChange': function(status, chosenBefore) {
|
||
|
|
if (!this.hasConsented()) {
|
||
|
|
gaOptout()
|
||
|
|
}
|
||
|
|
},
|
||
|
|
'onRevokeChoice': function() {
|
||
|
|
gaOptoutRevoke()
|
||
|
|
}
|
||
|
|
})
|
||
|
|
});
|
||
|
|
</script>
|
||
|
|
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" type="text/css">
|
||
|
|
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" type="text/css">
|
||
|
|
<link rel="stylesheet" href="./resources/prism/prism-1.20.0.css" type="text/css">
|
||
|
|
<link rel="stylesheet" href="./css/ol.css" type="text/css">
|
||
|
|
<link rel="stylesheet" href="./resources/layout.css" type="text/css">
|
||
|
|
<script src="https://unpkg.com/elm-pep"></script>
|
||
|
|
<script src="https://cdn.polyfill.io/v3/polyfill.min.js?features=fetch,requestAnimationFrame,Element.prototype.classList,URL,TextDecoder"></script>
|
||
|
|
<script src="https://unpkg.com/dom-to-image-more@2.8.0/dist/dom-to-image-more.min.js"></script>
|
||
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.5.3/jspdf.min.js"></script>
|
||
|
|
<link rel="stylesheet" href="print-to-scale.css">
|
||
|
|
<title>Print to scale example</title>
|
||
|
|
</head>
|
||
|
|
<body>
|
||
|
|
|
||
|
|
<header class="navbar navbar-expand-sm navbar-dark mb-3 py-0" role="navigation">
|
||
|
|
<a class="navbar-brand" href="https://openlayers.org/"><img src="./resources/logo-70x70.png" alt=""> OpenLayers</a>
|
||
|
|
|
||
|
|
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#olmenu" aria-controls="olmenu" aria-expanded="false" aria-label="Toggle navigation">
|
||
|
|
<span class="navbar-toggler-icon"></span>
|
||
|
|
</button>
|
||
|
|
|
||
|
|
<!-- menu items that get hidden below 768px width -->
|
||
|
|
<nav class="collapse navbar-collapse" id="olmenu">
|
||
|
|
<ul class="nav navbar-nav ml-auto">
|
||
|
|
<li class="nav-item dropdown">
|
||
|
|
<a class="nav-link dropdown-toggle" href="#" id="docdropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Docs</a>
|
||
|
|
<div class="dropdown-menu dropdown-menu-right mb-3" aria-labelledby="docdropdown">
|
||
|
|
<a class="dropdown-item" href="../doc/">Docs</a>
|
||
|
|
<div class="dropdown-divider"></div>
|
||
|
|
<a class="dropdown-item" href="../doc/quickstart.html"><i class="fa fa-check fa-fw mr-2 fa-lg"></i>Quick Start</a>
|
||
|
|
<a class="dropdown-item" href="../doc/faq.html"><i class="fa fa-question fa-fw mr-2 fa-lg"></i>FAQ</a>
|
||
|
|
<a class="dropdown-item" href="../doc/tutorials/"><i class="fa fa-book fa-fw mr-2 fa-lg"></i>Tutorials</a>
|
||
|
|
<a class="dropdown-item" href="/workshop/"><i class="fa fa-graduation-cap fa-fw mr-2 fa-lg"></i>Workshop</a>
|
||
|
|
<div class="dropdown-divider"></div>
|
||
|
|
<a class="dropdown-item" href="https://stackoverflow.com/questions/tagged/openlayers"><i class="fa fa-stack-overflow fa-fw mr-2"></i>Ask a Question</a>
|
||
|
|
</div>
|
||
|
|
</li>
|
||
|
|
<li class="nav-item active"><a class="nav-link" href="../examples/">Examples</a></li>
|
||
|
|
<li class="nav-item"><a class="nav-link" href="../apidoc/"><i class="fa fa-sitemap mr-1"></i>API</a></li>
|
||
|
|
<li class="nav-item dropdown">
|
||
|
|
<a class="nav-link dropdown-toggle" href="#" id="codedropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Code</a>
|
||
|
|
<div class="dropdown-menu dropdown-menu-right mb-3" aria-labelledby="codedropdown">
|
||
|
|
<a class="dropdown-item" href="https://github.com/openlayers/openlayers"><i class="fa fa-github fa-fw mr-2 fa-lg"></i>Repository</a>
|
||
|
|
<a class="dropdown-item" href="/download/"><i class="fa fa-download fa-fw mr-2 fa-lg"></i>Download</a>
|
||
|
|
</div>
|
||
|
|
</li>
|
||
|
|
</ul>
|
||
|
|
</nav>
|
||
|
|
</header>
|
||
|
|
|
||
|
|
<div class="container-fluid line-numbers">
|
||
|
|
|
||
|
|
<div id="latest-check" class="alert alert-warning alert-dismissible" role="alert" style="display:none">
|
||
|
|
<button id="latest-dismiss" type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">×</span></button>
|
||
|
|
This example uses OpenLayers v<span>6.5.0</span>. The <a id="latest-link" href="#" class="alert-link">latest</a> is v<span id="latest-version"></span>.
|
||
|
|
</div>
|
||
|
|
|
||
|
|
|
||
|
|
<div class="row-fluid">
|
||
|
|
<a href="#" id="codepen-button" class="btn btn-link float-right">
|
||
|
|
<i class="fa fa-codepen fa-lg"></i> Edit
|
||
|
|
</a>
|
||
|
|
<div class="span12">
|
||
|
|
<h4 id="title">Print to scale example</h4>
|
||
|
|
<p class="tags">
|
||
|
|
<span class="badge-group">
|
||
|
|
<a
|
||
|
|
href="./index.html?q=print" class="badge badge-info">print</a
|
||
|
|
><a
|
||
|
|
class="badge badge-info tag-modal-toggle text-white"
|
||
|
|
data-toggle="modal"
|
||
|
|
data-target="#tag-example-list"
|
||
|
|
data-title="print"
|
||
|
|
data-content="
|
||
|
|
<a class="list-group-item list-group-item-action active" href="./print-to-scale.html">Print to scale example</a>"
|
||
|
|
tabindex="0"
|
||
|
|
>1</a>
|
||
|
|
</span>
|
||
|
|
<span class="badge-group">
|
||
|
|
<a
|
||
|
|
href="./index.html?q=printing" class="badge badge-info">printing</a
|
||
|
|
><a
|
||
|
|
class="badge badge-info tag-modal-toggle text-white"
|
||
|
|
data-toggle="modal"
|
||
|
|
data-target="#tag-example-list"
|
||
|
|
data-title="printing"
|
||
|
|
data-content="
|
||
|
|
<a class="list-group-item list-group-item-action active" href="./print-to-scale.html">Print to scale example</a>"
|
||
|
|
tabindex="0"
|
||
|
|
>1</a>
|
||
|
|
</span>
|
||
|
|
<span class="badge-group">
|
||
|
|
<a
|
||
|
|
href="./index.html?q=scale" class="badge badge-info">scale</a
|
||
|
|
><a
|
||
|
|
class="badge badge-info tag-modal-toggle text-white"
|
||
|
|
data-toggle="modal"
|
||
|
|
data-target="#tag-example-list"
|
||
|
|
data-title="scale"
|
||
|
|
data-content="
|
||
|
|
<a class="list-group-item list-group-item-action" href="./icon-scale.html">Icon Scale</a>
|
||
|
|
<a class="list-group-item list-group-item-action active" href="./print-to-scale.html">Print to scale example</a>"
|
||
|
|
tabindex="0"
|
||
|
|
>2</a>
|
||
|
|
</span>
|
||
|
|
<span class="badge-group">
|
||
|
|
<a
|
||
|
|
href="./index.html?q=scaleline" class="badge badge-info">scaleline</a
|
||
|
|
><a
|
||
|
|
class="badge badge-info tag-modal-toggle text-white"
|
||
|
|
data-toggle="modal"
|
||
|
|
data-target="#tag-example-list"
|
||
|
|
data-title="scaleline"
|
||
|
|
data-content="
|
||
|
|
<a class="list-group-item list-group-item-action" href="./scaleline-indiana-east.html">OpenStreetMap Reprojection with ScaleLine Control</a>
|
||
|
|
<a class="list-group-item list-group-item-action active" href="./print-to-scale.html">Print to scale example</a>"
|
||
|
|
tabindex="0"
|
||
|
|
>2</a>
|
||
|
|
</span>
|
||
|
|
<span class="badge-group">
|
||
|
|
<a
|
||
|
|
href="./index.html?q=export" class="badge badge-info">export</a
|
||
|
|
><a
|
||
|
|
class="badge badge-info tag-modal-toggle text-white"
|
||
|
|
data-toggle="modal"
|
||
|
|
data-target="#tag-example-list"
|
||
|
|
data-title="export"
|
||
|
|
data-content="
|
||
|
|
<a class="list-group-item list-group-item-action" href="./export-pdf.html">Export PDF example</a>
|
||
|
|
<a class="list-group-item list-group-item-action" href="./export-map.html">Map Export</a>
|
||
|
|
<a class="list-group-item list-group-item-action active" href="./print-to-scale.html">Print to scale example</a>"
|
||
|
|
tabindex="0"
|
||
|
|
>3</a>
|
||
|
|
</span>
|
||
|
|
<span class="badge-group">
|
||
|
|
<a
|
||
|
|
href="./index.html?q=pdf" class="badge badge-info">pdf</a
|
||
|
|
><a
|
||
|
|
class="badge badge-info tag-modal-toggle text-white"
|
||
|
|
data-toggle="modal"
|
||
|
|
data-target="#tag-example-list"
|
||
|
|
data-title="pdf"
|
||
|
|
data-content="
|
||
|
|
<a class="list-group-item list-group-item-action" href="./export-pdf.html">Export PDF example</a>
|
||
|
|
<a class="list-group-item list-group-item-action active" href="./print-to-scale.html">Print to scale example</a>"
|
||
|
|
tabindex="0"
|
||
|
|
>2</a>
|
||
|
|
</span>
|
||
|
|
</p>
|
||
|
|
<div class="modal modal-tag-example" id="tag-example-list" tabindex="-1" role="dialog" aria-labelledby="tag-example-title" aria-hidden="true">
|
||
|
|
<div class="modal-dialog modal-dialog-scrollable" role="document">
|
||
|
|
<div class="modal-content">
|
||
|
|
<div class="modal-header">
|
||
|
|
<h5 class="modal-title" id="tag-example-title"></h5>
|
||
|
|
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
|
||
|
|
<span aria-hidden="true">×</span>
|
||
|
|
</button>
|
||
|
|
</div>
|
||
|
|
<div class="modal-body">
|
||
|
|
<div class="list-group"></div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="wrapper">
|
||
|
|
<div id="map" class="map"></div>
|
||
|
|
</div>
|
||
|
|
<form class="form">
|
||
|
|
<label for="format">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 for="resolution">Resolution </label>
|
||
|
|
<select id="resolution">
|
||
|
|
<option value="72">72 dpi (fast)</option>
|
||
|
|
<option value="150">150 dpi</option>
|
||
|
|
<option value="200" selected>200 dpi</option>
|
||
|
|
<option value="300">300 dpi (slow)</option>
|
||
|
|
</select>
|
||
|
|
<label for="scale">Scale </label>
|
||
|
|
<select id="scale">
|
||
|
|
<option value="500">1:500000</option>
|
||
|
|
<option value="250" selected>1:250000</option>
|
||
|
|
<option value="100">1:100000</option>
|
||
|
|
<option value="50">1:50000</option>
|
||
|
|
<option value="25">1:25000</option>
|
||
|
|
<option value="10">1:10000</option>
|
||
|
|
</select>
|
||
|
|
</form>
|
||
|
|
<button id="export-pdf">Export PDF</button>
|
||
|
|
|
||
|
|
</div>
|
||
|
|
<form method="POST" id="codepen-form" target="_blank" action="https://codesandbox.io/api/v1/sandboxes/define">
|
||
|
|
<input id="codesandbox-params" type="hidden" name="parameters">
|
||
|
|
</form>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="row-fluid">
|
||
|
|
<div class="span12">
|
||
|
|
<p id="shortdesc">Example of printing a map to a specified scale.</p>
|
||
|
|
<div id="docs"><p>Example of printing a map to a specified scale. The print is exported as a PDF using the <a href="https://github.com/MrRio/jsPDF" target="_blank">jsPDF</a> library. Unlike the <a href="export-pdf.html">Export PDF example</a> the on screen map is only used to set the center and rotation. The extent printed depends on the scale and page size. To print the scale bar and attributions the example uses the <a href="https://github.com/1904labs/dom-to-image-more" target="_blank">dom-to-image-more</a> library. Due to browser limitations and restrictions <b>Internet Explorer and Safari are not supported</b>.</p>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="row-fluid">
|
||
|
|
<h5 class="source-heading">main.js</h5>
|
||
|
|
<pre><code id="example-js-source" class="language-js">import 'ol/ol.css';
|
||
|
|
import Map from 'ol/Map';
|
||
|
|
import TileLayer from 'ol/layer/Tile';
|
||
|
|
import View from 'ol/View';
|
||
|
|
import WMTS, {optionsFromCapabilities} from 'ol/source/WMTS';
|
||
|
|
import WMTSCapabilities from 'ol/format/WMTSCapabilities';
|
||
|
|
import proj4 from 'proj4';
|
||
|
|
import {ScaleLine, defaults as defaultControls} from 'ol/control';
|
||
|
|
import {getPointResolution, get as getProjection} from 'ol/proj';
|
||
|
|
import {register} from 'ol/proj/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);
|
||
|
|
|
||
|
|
var proj27700 = getProjection('EPSG:27700');
|
||
|
|
proj27700.setExtent([0, 0, 700000, 1300000]);
|
||
|
|
|
||
|
|
var raster = new TileLayer();
|
||
|
|
|
||
|
|
var 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) {
|
||
|
|
var result = new WMTSCapabilities().read(text);
|
||
|
|
var 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));
|
||
|
|
});
|
||
|
|
|
||
|
|
var map = new Map({
|
||
|
|
layers: [raster],
|
||
|
|
controls: defaultControls({
|
||
|
|
attributionOptions: {collapsible: false},
|
||
|
|
}),
|
||
|
|
target: 'map',
|
||
|
|
view: new View({
|
||
|
|
center: [373500, 436500],
|
||
|
|
projection: proj27700,
|
||
|
|
zoom: 7,
|
||
|
|
}),
|
||
|
|
});
|
||
|
|
|
||
|
|
var scaleLine = new ScaleLine({bar: true, text: true, minWidth: 125});
|
||
|
|
map.addControl(scaleLine);
|
||
|
|
|
||
|
|
var 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
|
||
|
|
var exportOptions = {
|
||
|
|
filter: function (element) {
|
||
|
|
var className = element.className || '';
|
||
|
|
return (
|
||
|
|
className.indexOf('ol-control') === -1 ||
|
||
|
|
className.indexOf('ol-scale') > -1 ||
|
||
|
|
(className.indexOf('ol-attribution') > -1 &&
|
||
|
|
className.indexOf('ol-uncollapsible'))
|
||
|
|
);
|
||
|
|
},
|
||
|
|
};
|
||
|
|
|
||
|
|
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 scale = document.getElementById('scale').value;
|
||
|
|
var dim = dims[format];
|
||
|
|
var width = Math.round((dim[0] * resolution) / 25.4);
|
||
|
|
var height = Math.round((dim[1] * resolution) / 25.4);
|
||
|
|
var viewResolution = map.getView().getResolution();
|
||
|
|
var 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) {
|
||
|
|
var 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();
|
||
|
|
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);
|
||
|
|
map.getTargetElement().style.width = width + 'px';
|
||
|
|
map.getTargetElement().style.height = height + 'px';
|
||
|
|
map.updateSize();
|
||
|
|
map.getView().setResolution(scaleResolution);
|
||
|
|
},
|
||
|
|
false
|
||
|
|
);
|
||
|
|
</code></pre>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="row-fluid">
|
||
|
|
<h5 class="source-heading">index.html</h5>
|
||
|
|
<pre><code id="example-html-source" class="language-markup"><!DOCTYPE html>
|
||
|
|
<html lang="en">
|
||
|
|
<head>
|
||
|
|
<meta charset="UTF-8">
|
||
|
|
<title>Print to scale example</title>
|
||
|
|
<!-- Pointer events polyfill for old browsers, see https://caniuse.com/#feat=pointer -->
|
||
|
|
<script src="https://unpkg.com/elm-pep"></script>
|
||
|
|
<!-- The line below is only needed for old environments like Internet Explorer and Android 4.x -->
|
||
|
|
<script src="https://cdn.polyfill.io/v3/polyfill.min.js?features=fetch,requestAnimationFrame,Element.prototype.classList,URL,TextDecoder"></script>
|
||
|
|
<script src="https://unpkg.com/dom-to-image-more@2.8.0/dist/dom-to-image-more.min.js"></script>
|
||
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.5.3/jspdf.min.js"></script>
|
||
|
|
<style>
|
||
|
|
.map {
|
||
|
|
width: 100%;
|
||
|
|
height:400px;
|
||
|
|
}
|
||
|
|
.wrapper {
|
||
|
|
max-width: 566px;
|
||
|
|
width: 100%;
|
||
|
|
height: 400px;
|
||
|
|
overflow: hidden;
|
||
|
|
}
|
||
|
|
</style>
|
||
|
|
</head>
|
||
|
|
<body>
|
||
|
|
<div class="wrapper">
|
||
|
|
<div id="map" class="map"></div>
|
||
|
|
</div>
|
||
|
|
<form class="form">
|
||
|
|
<label for="format">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 for="resolution">Resolution </label>
|
||
|
|
<select id="resolution">
|
||
|
|
<option value="72">72 dpi (fast)</option>
|
||
|
|
<option value="150">150 dpi</option>
|
||
|
|
<option value="200" selected>200 dpi</option>
|
||
|
|
<option value="300">300 dpi (slow)</option>
|
||
|
|
</select>
|
||
|
|
<label for="scale">Scale </label>
|
||
|
|
<select id="scale">
|
||
|
|
<option value="500">1:500000</option>
|
||
|
|
<option value="250" selected>1:250000</option>
|
||
|
|
<option value="100">1:100000</option>
|
||
|
|
<option value="50">1:50000</option>
|
||
|
|
<option value="25">1:25000</option>
|
||
|
|
<option value="10">1:10000</option>
|
||
|
|
</select>
|
||
|
|
</form>
|
||
|
|
<button id="export-pdf">Export PDF</button>
|
||
|
|
<script src="main.js"></script>
|
||
|
|
</body>
|
||
|
|
</html></code></pre>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
|
||
|
|
<div class="row-fluid">
|
||
|
|
<h5 class="source-heading">package.json</h5>
|
||
|
|
<pre><code id="example-pkg-source" class="language-json">{
|
||
|
|
"name": "print-to-scale",
|
||
|
|
"dependencies": {
|
||
|
|
"ol": "6.5.0",
|
||
|
|
"proj4": "2.6.3"
|
||
|
|
},
|
||
|
|
"devDependencies": {
|
||
|
|
"parcel": "^2.0.0-beta.1"
|
||
|
|
},
|
||
|
|
"scripts": {
|
||
|
|
"start": "parcel index.html",
|
||
|
|
"build": "parcel build --public-url . index.html"
|
||
|
|
}
|
||
|
|
}</code></pre>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
|
||
|
|
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.bundle.min.js"></script>
|
||
|
|
<script src="./resources/prism/prism-1.20.0.min.js"></script>
|
||
|
|
<script src="./resources/common.js"></script>
|
||
|
|
<script src="common.js"></script>
|
||
|
|
<script src="print-to-scale.js"></script>
|
||
|
|
<script>
|
||
|
|
$('#tag-example-list').on('show.bs.modal', function (event) {
|
||
|
|
const button = $(event.relatedTarget); // Button that triggered the modal
|
||
|
|
const title = button.data('title');
|
||
|
|
const content = button.data('content');
|
||
|
|
const modal = $(this)
|
||
|
|
modal.find('.modal-title').text(title);
|
||
|
|
modal.find('.modal-body').html(content);
|
||
|
|
});
|
||
|
|
|
||
|
|
var packageUrl = 'https://raw.githubusercontent.com/openlayers/openlayers.github.io/build/package.json';
|
||
|
|
fetch(packageUrl).then(function(response) {
|
||
|
|
return response.json();
|
||
|
|
}).then(function(json) {
|
||
|
|
var latestVersion = json.version;
|
||
|
|
document.getElementById('latest-version').innerHTML = latestVersion;
|
||
|
|
var url = window.location.href;
|
||
|
|
var branchSearch = url.match(/\/([^\/]*)\/examples\//);
|
||
|
|
var cookieText = 'dismissed=-' + latestVersion + '-';
|
||
|
|
var dismissed = document.cookie.indexOf(cookieText) != -1;
|
||
|
|
if (branchSearch && !dismissed && /^v[0-9\.]*$/.test(branchSearch[1]) && '6.5.0' != latestVersion) {
|
||
|
|
var link = url.replace(branchSearch[0], '/latest/examples/');
|
||
|
|
fetch(link, {method: 'head'}).then(function(response) {
|
||
|
|
var a = document.getElementById('latest-link');
|
||
|
|
a.href = response.status == 200 ? link : '../../latest/examples/';
|
||
|
|
});
|
||
|
|
var latestCheck = document.getElementById('latest-check');
|
||
|
|
latestCheck.style.display = '';
|
||
|
|
document.getElementById('latest-dismiss').onclick = function() {
|
||
|
|
latestCheck.style.display = 'none';
|
||
|
|
document.cookie = cookieText;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
});
|
||
|
|
</script>
|
||
|
|
</body>
|
||
|
|
</html>
|