Printing OpenLayers：以特定比例打印PDF（例如1:1000）

我想在OpenLayers中使用specifis Scale创建PDF。 我知道这个例子如何用DinA4或DinA3打印PDF

   var dims = {
        a3: [420, 297],
        a4: [297, 210],
        a5: [210, 148]
      };

但到目前为止，我还没有在一个特定的空间（例如1:1000米）内创建地图。 谁能给我一个提示吗？

谢谢你的提示。 在OL5中，它可以很好地处理上面提到的示例中的代码（只是稍微更改了一点）：

import Map from 'ol/Map.js';
import View from 'ol/View.js';
import {getCenter} from 'ol/extent.js';
import {transform} from 'ol/proj.js';
import TileLayer from 'ol/layer/Tile.js';
import OSM from 'ol/source/OSM.js';
import WKT from 'ol/format/WKT.js';
import {defaults as defaultControls} from 'ol/control.js';
import {ScaleLine} from 'ol/control.js';
import ImageLayer from 'ol/layer/Image.js';
import ImageWMS from 'ol/source/ImageWMS.js';
import TileWMS from 'ol/source/TileWMS.js'; 
import Static from 'ol/source/ImageStatic.js';
import * as proj4 from 'ol/proj';
import proj4 from 'proj4';
import {register} from 'ol/proj/proj4.js';
import {get as getProjection} from 'ol/proj';
import BingMaps from 'ol/source/BingMaps.js';
import * as olProj from 'ol/proj';

import GeoJSON from 'ol/format/GeoJSON.js';
import VectorLayer from 'ol/layer/Vector.js';
import VectorSource from 'ol/source/Vector.js';
import {Circle as CircleStyle,Fill, Stroke, Style, Text} from 'ol/style.js';



proj4.defs('EPSG:25832', '+proj=utm +zone=32 +x_0=-32000000 +ellps=GRS80 +towgs84=0,0,0,0,0,0,0 +units=m +no_defs');
register(proj4);


const utm32n = transform([7.7,52.2], 'EPSG:4326', 'EPSG:25832');



function getURLParameter(name) {
return decodeURIComponent((new RegExp('[?|&]' + name + '=' + '([^&;]+?)(&|#|;|$)').exec(location.search) || [null, ''])[1].replace(/\+/g, '%20')) || null;
}

var mzoom=12;
var rechtswert = Number(getURLParameter('rechtswert'));

var hochwert = Number(getURLParameter('hochwert'));
var mzoom = Number(getURLParameter('zoom'));

if (rechtswert == 0 || hochwert == 0) {

rechtswert = 412989; hochwert = 5791597; mzoom=18;

}
if (mzoom == 0 ) { mzoom=18 
} 


var osm = new TileLayer({
source: new OSM()
});

var bingMapsAerial = new TileLayer({
preload: Infinity,
source: new BingMaps({
key: 'AqpsHuO0V-IoueH******************wj0w38QDNe5cVMeZtF-4VMlu4CM8oN',
imagerySet: 'Aerial',
})
});



var view = new View({
center: [rechtswert,hochwert],
zoom: mzoom,
projection: 'EPSG:25832'
});
var map = new Map({

layers: [osm,bingMapsAerial],
target: 'map',
view: view
});
map.addControl(new ScaleLine({units: 'metric'}));

var zoom = view.getZoom();

function openInNewTab(url) {
var win = window.open(url, '_blank');
win.focus();
}




 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 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 size = map.getSize();
        var viewResolution = map.getView().getResolution();
        var scaleResolution = scale / olProj.getPointResolution(map.getView().getProjection(), resolution / 25.4, map.getView().getCenter());

        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().setResolution(viewResolution);
          exportButton.disabled = false;
          document.body.style.cursor = 'auto';
        });

        // Set print size
        var printSize = [width, height];
        map.setSize(printSize);
        map.getView().setResolution(scaleResolution);

    }, false);

html代码如下所示：

<!DOCTYPE html>
<html>
  <head>
      <link rel="stylesheet" href="https://openlayers.org/en/v5.3.0/css/ol.css" type="text/css">
          <script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.2.61/jspdf.min.js"></script>
    <meta charset="utf-8">
    <title>k,ais test</title>
    <style>
      #map {
        width: 750px;
        height: 750px;
      }
    </style>
  </head>
  <body>
<div id="map" class="map"></div>
    <form class="form">
      <label>Page size </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>Resolution </label>
      <select id="resolution">
        <option value="72">72 dpi</option>
        <option value="150">150 dpi</option>
        <option value="200" selected>200 dpi</option>
        <option value="300">300 dpi</option>
      </select>
      <label>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>
...
....

k、 ais测试
#地图{
宽度：750px；
高度：750px；
}
页面大小
A0
A1
A2
A3
A4
A5
决议
72新闻部
150 dpi
200 dpi
300 dpi
规模
1:500000
1:250000
1:100000
1:50000
1:25000
1:10000
导出PDF
...
....
谢谢你的提示。
在OL5中，它可以很好地处理上面提到的示例中的代码（只是稍微更改了一点）：

import Map from 'ol/Map.js';
import View from 'ol/View.js';
import {getCenter} from 'ol/extent.js';
import {transform} from 'ol/proj.js';
import TileLayer from 'ol/layer/Tile.js';
import OSM from 'ol/source/OSM.js';
import WKT from 'ol/format/WKT.js';
import {defaults as defaultControls} from 'ol/control.js';
import {ScaleLine} from 'ol/control.js';
import ImageLayer from 'ol/layer/Image.js';
import ImageWMS from 'ol/source/ImageWMS.js';
import TileWMS from 'ol/source/TileWMS.js'; 
import Static from 'ol/source/ImageStatic.js';
import * as proj4 from 'ol/proj';
import proj4 from 'proj4';
import {register} from 'ol/proj/proj4.js';
import {get as getProjection} from 'ol/proj';
import BingMaps from 'ol/source/BingMaps.js';
import * as olProj from 'ol/proj';

import GeoJSON from 'ol/format/GeoJSON.js';
import VectorLayer from 'ol/layer/Vector.js';
import VectorSource from 'ol/source/Vector.js';
import {Circle as CircleStyle,Fill, Stroke, Style, Text} from 'ol/style.js';



proj4.defs('EPSG:25832', '+proj=utm +zone=32 +x_0=-32000000 +ellps=GRS80 +towgs84=0,0,0,0,0,0,0 +units=m +no_defs');
register(proj4);


const utm32n = transform([7.7,52.2], 'EPSG:4326', 'EPSG:25832');



function getURLParameter(name) {
return decodeURIComponent((new RegExp('[?|&]' + name + '=' + '([^&;]+?)(&|#|;|$)').exec(location.search) || [null, ''])[1].replace(/\+/g, '%20')) || null;
}

var mzoom=12;
var rechtswert = Number(getURLParameter('rechtswert'));

var hochwert = Number(getURLParameter('hochwert'));
var mzoom = Number(getURLParameter('zoom'));

if (rechtswert == 0 || hochwert == 0) {

rechtswert = 412989; hochwert = 5791597; mzoom=18;

}
if (mzoom == 0 ) { mzoom=18 
} 


var osm = new TileLayer({
source: new OSM()
});

var bingMapsAerial = new TileLayer({
preload: Infinity,
source: new BingMaps({
key: 'AqpsHuO0V-IoueH******************wj0w38QDNe5cVMeZtF-4VMlu4CM8oN',
imagerySet: 'Aerial',
})
});



var view = new View({
center: [rechtswert,hochwert],
zoom: mzoom,
projection: 'EPSG:25832'
});
var map = new Map({

layers: [osm,bingMapsAerial],
target: 'map',
view: view
});
map.addControl(new ScaleLine({units: 'metric'}));

var zoom = view.getZoom();

function openInNewTab(url) {
var win = window.open(url, '_blank');
win.focus();
}




 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 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 size = map.getSize();
        var viewResolution = map.getView().getResolution();
        var scaleResolution = scale / olProj.getPointResolution(map.getView().getProjection(), resolution / 25.4, map.getView().getCenter());

        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().setResolution(viewResolution);
          exportButton.disabled = false;
          document.body.style.cursor = 'auto';
        });

        // Set print size
        var printSize = [width, height];
        map.setSize(printSize);
        map.getView().setResolution(scaleResolution);

    }, false);


html代码如下所示：


<!DOCTYPE html>
<html>
  <head>
      <link rel="stylesheet" href="https://openlayers.org/en/v5.3.0/css/ol.css" type="text/css">
          <script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.2.61/jspdf.min.js"></script>
    <meta charset="utf-8">
    <title>k,ais test</title>
    <style>
      #map {
        width: 750px;
        height: 750px;
      }
    </style>
  </head>
  <body>
<div id="map" class="map"></div>
    <form class="form">
      <label>Page size </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>Resolution </label>
      <select id="resolution">
        <option value="72">72 dpi</option>
        <option value="150">150 dpi</option>
        <option value="200" selected>200 dpi</option>
        <option value="300">300 dpi</option>
      </select>
      <label>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>
...
....


k、 ais测试
#地图{
宽度：750px；
高度：750px；
}
页面大小
A0
A1
A2
A3
A4
A5
决议
72新闻部
150 dpi
200 dpi
300 dpi
规模
1:500000
1:250000
1:100000
1:50000
1:25000
1:10000
导出PDF
...
....
在Hi Mike的答案注释中有两个示例的链接，非常感谢：-）在Hi Mike的答案注释中有两个示例的链接，非常感谢：-）