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(