comparison client/src/components/Pdftool.vue @ 1887:3ed036adc80f dev-pdf-generation

client: pdf-gen: fix scale calculation * Change scale calculation to use ol.proj.getPointResolution() at the center of the current view to make up for different point dimensions if you are not on the equator for the web mercator projection. This is also how the scaleline control of OpenLayers does it.
author Bernhard Reiter <bernhard@intevation.de>
date Thu, 17 Jan 2019 21:48:11 +0100
parents 20fe31b4dd5d
children c78efb1ddb02
comparison
equal deleted inserted replaced
1886:20fe31b4dd5d 1887:3ed036adc80f
79 * * Bernhard E. Reiter <bernhard@intevation.de> 79 * * Bernhard E. Reiter <bernhard@intevation.de>
80 * * Fadi Abbud <fadi.abbud@intevation.de> 80 * * Fadi Abbud <fadi.abbud@intevation.de>
81 */ 81 */
82 import { mapState } from "vuex"; 82 import { mapState } from "vuex";
83 import jsPDF from "jspdf"; 83 import jsPDF from "jspdf";
84 import { getPointResolution } from "ol/proj.js";
84 85
85 var paperSizes = { 86 var paperSizes = {
86 // in millimeter, landscape [width, height] 87 // in millimeter, landscape [width, height]
87 a3: [420, 297], 88 a3: [420, 297],
88 a4: [297, 210] 89 a4: [297, 210]
161 var self = this; 162 var self = this;
162 163
163 // set a callback for after the next complete rendering of the map 164 // set a callback for after the next complete rendering of the map
164 map.once("rendercomplete", function(event) { 165 map.once("rendercomplete", function(event) {
165 let canvas = event.context.canvas; 166 let canvas = event.context.canvas;
167
168 // because we are using Web Mercator, a pixel represents
169 // a differently sizes spot depending on the place of the map.
170 // So we use a value calculated from the center of the current view.
166 let view = map.getView(); 171 let view = map.getView();
167 let metersPerPixel = // meters (reality) per pixel (map) 172 let proj = view.getProjection();
168 view.getResolution() * view.getProjection().getMetersPerUnit(); 173 let metersPerPixel = // average meters (reality) per pixel (map)
174 getPointResolution(proj, view.getResolution(), view.getCenter()) *
175 proj.getMetersPerUnit();
169 console.log("metersPerPixel = ", metersPerPixel); 176 console.log("metersPerPixel = ", metersPerPixel);
170 177
171 var data = canvas.toDataURL("image/jpeg"); 178 var data = canvas.toDataURL("image/jpeg");
172 pdf.addImage(data, "JPEG", 0, 0, width, height); 179 pdf.addImage(data, "JPEG", 0, 0, width, height);
173 self.addRoundedBox( 180 self.addRoundedBox(