最近遇到了在Openlayers上开发地图打印的功能,官网给了两个全图打印的demo。其核心思想是将canvas里的像素提取出来。
- 全图输出,保存为本地图片
map.once("postcompose", function(event) { var canvas = event.context.canvas; if (navigator.msSaveBlob) { navigator.msSaveBlob(canvas.msToBlob(), "map.png"); } else { canvas.toBlob(function(blob) { FileSaverJS.saveAs(blob, "map.png"); }); } }); map.renderSync();
利用上面代码,可以直接将canvas里图像输出,保存为本地图片;
- 截取范围,进行打印输出
1屏幕上画矩形,然后获取矩形经纬度坐标;
2将矩形经纬度坐标转为canvas坐标
this._map.once("postrender", function (e) { var extent = []; extent[0] = e.target.getPixelFromCoordinate(that.bounds[0]); extent[1] = e.target.getPixelFromCoordinate(that.bounds[1]); extent[2] = e.target.getPixelFromCoordinate(that.bounds[2]); extent[3] = e.target.getPixelFromCoordinate(that.bounds[3]); });
3从canvas中提取相应的像素信息
//向内修改范围 getXDis(e, number) { var min = undefined; var max = undefined; e.forEach(element => { if (min == undefined || element[number] < min) { min = element[number]; } if (max == undefined || element[number] > max) { max = element[number]; } }); return [min+2, max - min-4]; }
var x_dx = that.getXDis(extent, 0); var y_dy = that.getXDis(extent, 1); console.log(x_dx); console.log(y_dy); let map = that.$store.state.map2d; map.once("postcompose", function(event) { var canvas = event.context.canvas; var ctx = canvas.getContext("2d"); var image = ctx.getImageData(x_dx[0], y_dy[0], x_dx[1], y_dy[1]); that.imageData = image; }); map.renderSync();
最后将提取出来的像素信息,付给其他的canvas,结果如下图所示:
手机拍的不清楚,这是选取范围
下面是提取出来的结果
如果你觉得可以的话,可以打赏一下