vue3-openlayers

Appearance

ol-print-dialog-control ​

A print dialog to print the current map canvas content.

Demo ​

Setup ​

Plugin usage ​

This component is part of the MapControls plugin. If not installed globally, you need to import and use the plugin in your main.ts or use the explicit component import (see section below).

Import and use the MapControls plugin
ts
import { createApp } from "vue";
import App from "./App.vue";

import {
  Map,
  Layers,
  Sources,
  MapControls, 
} from "vue3-openlayers";

const app = createApp(App);
// ...
app.use(MapControls); 
// ...

Explicit import ​

If you don't want to install a plugin, you can import the component explicitly. It's available as a child of the named export MapControls.

NOTE

The following documentation refers to the plugin usage. Please make sure to adopt the component names, when you decided to use explicit component imports (e. g. <ol-map> becomes <Map.OlMap> etc.).

Usage ​

Plugin UsageExplicit Import
<ol-print-dialog-control><MapControls.OlPrintDialogControl>
vue
<template>
  <ol-map ref="map" style="height: 400px" :controls="[]">
    <ol-view
      ref="view"
      :center="center"
      :zoom="zoom"
      :projection="projection"
    />

    <ol-tile-layer>
      <ol-source-osm />
    </ol-tile-layer>
    <ol-print-dialog-control />
  </ol-map>
</template>

<script setup lang="ts">
import { ref } from "vue";
const center = ref([40, 40]);
const projection = ref("EPSG:4326");
const zoom = ref(8);
</script>

Properties ​

The properties are reflected 1:1 from ol-ext/control/PrintDialog.

lang ​

control language, default en

  • Type: String
  • Default: en

title ​

button title

  • Type: String

className ​

class of the control

  • Type: String

imageType ​

string indicating the image format, default image/jpeg

  • Type: String
  • Default: image/jpeg

quality ​

number between 0 and 1 indicating the image quality to use for image formats that use lossy compression such as image/jpeg and image/webp.

  • Type: Number

orientation ​

Page orientation ('landscape' / 'portrait'), default guest the best one

  • Type: String

immediate ​

force print even if render is not complete, default false

  • Type: Boolean
  • Default: false

openWindow ​

open the file in a new window on print

  • Type: Boolean
  • Default: false

copy ​

add a copy select option

  • Type: Boolean
  • Default: true

print ​

add a print select option

  • Type: Boolean
  • Default: true

pdf ​

add a pdf select option

  • Type: Boolean
  • Default: true

saveAs ​

a function to save the image as blob

  • Type: Function

jsPDF ​

jsPDF object to save map as pdf

  • Type: Object