InkMap - Frontend-Lösung für Karten-Druck

Renata Müller

Playlists: 'fossgis2021' videos starting here / audio

Das Drucken von Web-Karten ist eine Herausforderung bezüglich Performanz, Genauigkeit und Flexibilität. Basierend auf Open-Source-Technologien wurde eine neue, ebenfalls quelloffene, Javascript-Library für hochauflösendes Front-End-seitiges Drucken entwickelt, die massgeschneiderte Anpassungen einfach macht und die Performanz des Browsers nicht einschränkt.

Backend-Lösungen für das Drucken von Karten sind zwar stabil und gut skalierbar aber, durch vordefinierte Vorlagen, unflexibel und auch das Styling ist eingeschränkt. Front-End-Lösungen hingegen sind einfach zu installieren und bieten eine bessere Übereinstimmung zwischen der Webkarte und dem Druckprodukt, aber sie kommen meist mit grösseren Datenvolumen nicht zurecht und haben eine schlechte Performanz. InkMap soll hier, durch die Nutzung moderner Webtechnologien, eine Verbesserung bringen.

InkMap benutzt OpenLayers für die Darstellung der Karte. Das Druckerzeugnis wird daher genauso aussehen, wie auf der Webkarte und es können die gleichen Styling-Möglichkeiten ausgeschöpft werden. Dem Print-Prozess wird eine JSON-Konfiguration mit Angabe von Layer, Auflösung, Layout, usw. übergeben. Damit wird eine Karte im PNG-Format generiert, die auch in ein PDF eingefügt werden kann.

Der Druckprozess wird an einen asynchron laufenden Prozess, einen Service-Worker delegiert, so dass die Webseite weiter zur Verfügung steht. Damit dieser den Canvas ausserhalb der Webseite darstellen kann, wird die OffscreenCanvas-Technologie benutzt. Für Browser, die diese noch nicht unterstützen gibt es eine Alternativlösung. Durch die Kombination dieser beiden Technologien wird eine ausgezeichnete Performanz möglich. Es können mehrere Druckaufträge gleichzeitig gestartet werden und es ist auch möglich deren jeweiligen Fortschritt anzuzeigen.

Die Präsentation gibt einen Überblick über die angewendeten Technologien und zeigt, wie die Software integriert und der Druck konfiguriert werden kann.

Download

Embed

Share:

Tags