Openlayers根据分辨率和纸张尺寸下载地图为JPG和PDF

import jsPDF from 'jspdf';
const dims = {a0: [1189, 841],a1: [841, 594],a2: [594, 420],a3: [420, 297],a4: [297, 210],a5: [210, 148],
};
/*** 设置标题* @param format 纸张尺寸* @param resolution resolution* @param map 地图对象*/
export default function downLoadPDF(format, resolution, map) {const dim = dims[format]; //纸张尺寸console.log(dim);const width = Math.round((dim[0] * resolution) / 25.4); //DOM宽const height = Math.round((dim[1] * resolution) / 25.4); //DOM高const size = map.getSize(); //地图大小const viewResolution = map.getView().getResolution();console.log(map.getView());console.log(viewResolution); //目标分辨率console.log(map);map.once('rendercomplete', function () {//地图加载完成console.log(111);console.log('34324234');const mapCanvas = document.createElement('canvas');mapCanvas.width = width;mapCanvas.height = height;const mapContext = mapCanvas.getContext('2d');Array.prototype.forEach.call(document.querySelectorAll('.ol-layer canvas'), //遍历.ol-layer canvasfunction (canvas) {if (canvas.width > 0) {const opacity = canvas.parentNode.style.opacity; //透明度mapContext.globalAlpha = opacity === '' ? 1 : Number(opacity); //设置透明度const transform = canvas.style.transform; //装换// Get the transform parameters from the style's transform matrixconst matrix = transform.match(/^matrix\(([^(]*)\)$/)[1].split(',').map(Number);// Apply the transform to the export map contextCanvasRenderingContext2D.prototype.setTransform.apply(mapContext,matrix);mapContext.drawImage(canvas, 0, 0); //绘制}});mapContext.globalAlpha = 1;mapContext.setTransform(1, 0, 0, 1, 0, 0);const pdf = new jsPDF('landscape', undefined, format);console.log(mapCanvas);mapCanvas.toBlob((blob) => {downloadBlob(blob, 'test.png');});pdf.addImage(mapCanvas.toDataURL('image/jpeg'),'JPEG',0,0,dim[0],dim[1]);pdf.save('map.pdf');// Reset original map sizemap.setSize(size);map.getView().setResolution(viewResolution);document.body.style.cursor = 'auto';});// Set print sizeconst printSize = [width, height];map.setSize(printSize);const scaling = Math.min(width / size[0], height / size[1]);console.log(scaling);map.getView().setResolution(viewResolution / scaling);console.log('222');
}
/*** 下载* @param blob* @param fileName*/
function downloadBlob(blob, fileName) {const eleLink = document.createElement('a');eleLink.download = fileName;eleLink.style.display = 'none';eleLink.href = URL.createObjectURL(blob);// 自动触发点击document.body.appendChild(eleLink);eleLink.click();// 然后移除document.body.removeChild(eleLink);
}

Openlayers根据分辨率和纸张尺寸下载地图为JPG和PDF相关推荐

Android中使用WebChromeClient显示Openlayers加载本地GeoJson文件显示地图(跨域问题解决)
场景 Openlayers中加载GeoJson文件显示地图: Openlayers中加载GeoJson文件显示地图_BADAO_LIUMANG_QIZHI的博客-CSDN博客上面加载显示GeoJso ...
如何根据行政边界下载地图
特别BIGEMAP地图下载器提供了多种选择的下载方式,方便用户得到不同的应用当中: 1.矩形框选择区域下载 2.多边形选择区域下载 3.根据行政区(省市县区)域边界选择下载 4.导入外部边界文件下载( ...
云南省行政村谷歌图层_如何根据行政边界（省市区县乡镇）下载地图
特别BIGEMAP地图下载器提供了多种选择的下载方式,方便用户得到不同的应用当中: 本文主要介绍通过选择下载区域如何下载地图第一步:选择行政区域打开BIGEMAP软件,在软件的右上角选择你的下载区 ...
A1.0.1 如何下载地图瓦片？记录我的实现过程
前端时间根据经理对GIS的介绍,使我有了一些初步了解,上周试图搞一下Openlayers这玩意,联网情况下地图加载正常,在断网情况下,然并卵. 那么,断网怎么办? 所以,今天无意间打开了Openlay ...
Word控件Spire.Doc 【打印】教程(3)：如何在自定义纸张尺寸上打印 Word—C#/VB.NET
Spire.Doc for .NET是一款专门对 Word 文档进行操作的 .NET 类库.在于帮助开发人员无需安装 Microsoft Word情况下,轻松快捷高效地创建.编辑.转换和打印 Micr ...
elxel表格纸张尺寸_纸张知识｜克重厚薄多少，正度大度纸开本尺寸规格是什么大小，和A4有啥区别？...
什么是大度纸,正度纸? 大度正度是印刷业定义纸张尺寸的规格名称."度"即为纸张的度量."正"即为标准正规之意.纸张有国际标准和国内标准.国内标准的全开尺寸为10 ...
打印纸张尺寸换算_纸张尺寸与开（K）数换算
开本按照尺寸的大小,通常分三种类型:大型开本.中型开本和小型开本.以787×1092的纸来说,12开以上为大型开本,16-36开为中型开本,40开以下为小型开本,但以文字为主的书籍一般为中型开本.开本 ...
通过js批量下载地图TopoJson数据
导言 TopoJson 是 GeoJson 按拓扑学编码后的扩展形式.使用点.弧(有向线)来表示图形. TopoJson结构如下下面通过js脚本来批量下载地图TopoJson数据文件 1.获取地图t ...
Revit出图问题：打印机中新建纸张尺寸？批量导出图纸？
一.Revit中在打印机中新建纸张尺寸 Revit导出PDF图纸,如何在打印机中新建纸张的尺寸? 在导出PDF的时候,我们需要将图纸放在合适的纸张页面上,而这个时候系统又没有提供所需的页面尺寸,如图1 ...

Openlayers根据分辨率和纸张尺寸下载地图为JPG和PDF

Openlayers根据分辨率和纸张尺寸下载地图为JPG和PDF相关推荐

最新文章

热门文章