openlayers配合html2canvas通过屏幕坐标截取部分区域

最新推荐文章于 2024-01-31 00:41:08 发布

W登峰造极

最新推荐文章于 2024-01-31 00:41:08 发布

阅读量412

点赞数

文章标签： javascript 前端开发语言

本文链接：https://blog.csdn.net/qq_41806901/article/details/132105468

版权

//45度转为弧度为0.78539816339
draw = new Draw({
    source,
    type:"Circle",
    geometryFunction: createRegularPolygon(4,0.78539816339)
})
this.map.addInteraction(draw) ;
this.map.addLayer(this .polygonLayer);
draw.on( "drawend",(e) => {
//获取polygon实体
const polygon = e.feature.getGeometry();
//通过实体获取经纬度位置数组
const poly_positionArr = polygon.getCoordinates();
let pixelArr = [];
//转换为屏幕坐标
for (const item of poly positionArr[o]){
    pixelArr.push(this .map.getPixelFromCoordinate(item))
}
//局部截图，pixelArr从右下开始逆时针，因旋转45度 所以从右上开始
//获取正方形边长和左上xy坐标点
this.h2sidewidth = pixelArr[0][0] - pixelArr[1][0];
this.h2x = pixelArr[1][0];
this.h2y = pixelArr[1][1];
})

使用插件截图：

//canvas截屏
screenshot(type) {
let canvas = "";
if (type == "ol") {
html2canvas(document.getElementById("map"),{
useCORs: true
x: this.h2x,
y: this.h2y,
width: this.h2sidewidth,
height: this.h2sideheigth,
// dpi:window.devicePixelRatio * 2
}).then((canvas) => {
let image = canvas.toDataURL("image/png").replace("image/png","image/octet-stream");
let blob = this.dataURLtoBlob(image);
this.fastPositionform.url = URL.createObjectURL(blob);
})