Mercurial > gemma
changeset 4034:917c72e8360d pdfscaling
client: pdf-gen: implement basic print scaling
author | Fadi Abbud <fadi.abbud@intevation.de> |
---|---|
date | Tue, 23 Jul 2019 17:13:51 +0200 |
parents | 7afa18971d38 |
children | 0507a9e4772b |
files | client/src/components/Pdftool.vue |
diffstat | 1 files changed, 35 insertions(+), 9 deletions(-) [+] |
line wrap: on
line diff
--- a/client/src/components/Pdftool.vue Mon Jul 22 15:42:56 2019 +0200 +++ b/client/src/components/Pdftool.vue Tue Jul 23 17:13:51 2019 +0200 @@ -53,6 +53,17 @@ </select> </div> </div> + <div class="d-flex flex-fill-row"> + <small class="my-auto text-muted"> + <translate>Scale to 1:</translate> + </small> + <input + class="form-control form-control-sm w-100 ml-2" + placeholder="1:00000" + v-model.number="form.scale" + type="number" + /> + </div> <button @click="download" :key="'downloadBtn'" @@ -126,7 +137,8 @@ format: "landscape", paperSize: "a4", downloadType: "download", - resolution: "80" + resolution: "80", + scale: null }, templates: [ { @@ -257,7 +269,6 @@ * */ this.readyToGenerate = false; - console.log( "will generate pdf with", this.form.paperSize, @@ -287,13 +298,8 @@ this.pdf.doc = new jsPDF(this.form.format, "mm", this.form.paperSize); this.rendercompleteListener = map.once("rendercomplete", event => { let canvas = event.context.canvas; - let view = map.getView(); - let proj = view.getProjection(); - let metersPerPixel = // average meters (reality) per pixel (map) - getPointResolution(proj, view.getResolution(), view.getCenter()) * - proj.getMetersPerUnit(); let scaleDenominator = Math.round( - 1000 * pixelsPerMapMillimeter * metersPerPixel + 1000 * pixelsPerMapMillimeter * this.getMeterPerPixel() ); console.log("scaleDenominator = ", scaleDenominator); var snapshot = canvas.toDataURL("image/jpeg"); @@ -424,11 +430,31 @@ map.getView().setResolution(this.resolution); this.readyToGenerate = true; }); + const size = map.getSize(); const [width, height] = mapSizeForPrint; map.setSize(mapSizeForPrint); const scaling = Math.min(width / size[0], height / size[1]); - map.getView().setResolution(this.resolution / scaling); + map + .getView() + .setResolution( + this.form.scale + ? this.getResolutionFromScale() + : this.resolution / scaling + ); + }, + getResolutionFromScale() { + var pixelsPerMapMillimeter = this.form.resolution / 25.4; + return this.form.scale / (1000 * pixelsPerMapMillimeter); + }, + getMeterPerPixel() { + var map = this.openLayersMap(); + let view = map.getView(); + let proj = view.getProjection(); + return ( + getPointResolution(proj, view.getResolution(), view.getCenter()) * + proj.getMetersPerUnit() + ); }, cancel() { this.openLayersMap().un(