gitea-enwelo-jba
/
Standortplaner
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: Adjust PDF export (margins, dynamic legend, scale bar)
Deploy Standortplaner / deploy (push) Successful in 17s Details

This commit is contained in:
Johannes Baumeister 2026-07-03 21:18:18 +02:00
parent 6361f0a1ed
commit cc1a6545a3
1 changed files with 38 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

51
app.js
View File

@ -2971,34 +2971,54 @@ async function resolveLayerConfig(isLocalFile, statusEl) {
exportOverlay.style.fontFamily = 'Arial, sans-serif';
exportOverlay.style.boxShadow = '0 0 10px rgba(0,0,0,0.3)';
const projName = document.getElementById('projectSelector')?.options[document.getElementById('projectSelector')?.selectedIndex]?.text || 'Unbekannt';
const projName = document.getElementById('projectSelector')?.options[document.getElementById('projectSelector')?.selectedIndex]?.text || '';
const projHtml = projName ? `<div style="font-size: 1rem; margin-bottom: 12px; font-weight: bold;">Projekt: ${projName}</div>` : `<div style="margin-bottom: 12px;"></div>`;
const showAux = document.getElementById('checkShowAux')?.checked;
const showProx = document.getElementById('checkShowProximity')?.checked;
exportOverlay.innerHTML = `
<div style="font-weight: bold; font-size: 1.4rem; margin-bottom: 8px; color: #004a99;">ENWELO Standortplanung</div>
<div style="font-size: 1rem; margin-bottom: 12px; font-weight: bold;">Projekt: ${projName}</div>
${projHtml}
<div style="display: flex; flex-direction: column; gap: 6px; font-size: 0.9rem;">
<div style="display: flex; align-items: center; gap: 8px;"><div style="width: 16px; height: 16px; background: #00c8ff; border: 1px dashed #00c8ff; opacity: 0.5;"></div> Rotorüberstreichfläche</div>
<div style="display: flex; align-items: center; gap: 8px;"><div style="width: 16px; height: 16px; background: #00aaff; border: 1px dashed #00aaff; opacity: 0.5;"></div> Gebietsumring</div>
<div style="display: flex; align-items: center; gap: 8px;"><div style="width: 16px; height: 3px; background: #ff0000;"></div> Abstandslinien</div>
${showAux ? `<div style="display: flex; align-items: center; gap: 8px;"><div style="width: 16px; height: 16px; background: #00aaff; border: 1px dashed #00aaff; opacity: 0.5;"></div> Gebietsumring</div>` : ''}
${showProx ? `<div style="display: flex; align-items: center; gap: 8px;"><div style="width: 16px; height: 3px; background: #ff0000;"></div> Abstandslinien</div>` : ''}
<div style="display: flex; align-items: center; gap: 8px;"><div style="width: 16px; height: 16px; border-radius: 50%; background: #00c8ff;"></div> WEA Standort</div>
</div>
`;
mapContainer.appendChild(exportOverlay);
// Temporarily increase scale bar size
const scaleControl = document.querySelector('.leaflet-control-scale-line');
let oldScaleStyle = '';
if (scaleControl) {
oldScaleStyle = scaleControl.style.cssText;
scaleControl.style.transform = 'scale(1.5)';
scaleControl.style.transformOrigin = 'bottom left';
scaleControl.style.borderWidth = '2px';
scaleControl.style.fontSize = '14px';
}
// Wait a tiny bit for DOM to render overlay
await new Promise(r => setTimeout(r, 100));
const canvas = await html2canvas(mapContainer, {
useCORS: true,
allowTaint: true,
scale: 2, // better resolution
ignoreElements: (element) => {
return element.classList.contains('leaflet-control-zoom');
}
});
// Restore scale bar
if (scaleControl) {
scaleControl.style.cssText = oldScaleStyle;
}
mapContainer.removeChild(exportOverlay);
const imgData = canvas.toDataURL('image/png');
const imgData = canvas.toDataURL('image/jpeg', 0.9);
const pdf = new jspdf.jsPDF({
orientation: 'landscape',
unit: 'mm',
@ -3007,23 +3027,28 @@ async function resolveLayerConfig(isLocalFile, statusEl) {
const pdfWidth = pdf.internal.pageSize.getWidth();
const pdfHeight = pdf.internal.pageSize.getHeight();
// Set margins (20mm on each side)
const margin = 20;
const maxRenderWidth = pdfWidth - (margin * 2);
const maxRenderHeight = pdfHeight - (margin * 2);
const imgProps = pdf.getImageProperties(imgData);
const ratio = imgProps.width / imgProps.height;
let renderWidth = pdfWidth;
let renderHeight = pdfWidth / ratio;
let renderWidth = maxRenderWidth;
let renderHeight = maxRenderWidth / ratio;
if (renderHeight > pdfHeight) {
renderHeight = pdfHeight;
renderWidth = pdfHeight * ratio;
if (renderHeight > maxRenderHeight) {
renderHeight = maxRenderHeight;
renderWidth = maxRenderHeight * ratio;
}
// Center image in PDF
const xOffset = (pdfWidth - renderWidth) / 2;
const yOffset = (pdfHeight - renderHeight) / 2;
const xOffset = margin + (maxRenderWidth - renderWidth) / 2;
const yOffset = margin + (maxRenderHeight - renderHeight) / 2;
pdf.addImage(imgData, 'PNG', xOffset, yOffset, renderWidth, renderHeight);
pdf.addImage(imgData, 'JPEG', xOffset, yOffset, renderWidth, renderHeight);
pdf.save('Karte_Enwelo.pdf');
} catch (err) {