![353791258fb87cba670fdb4188b94051.png](https://i-blog.csdnimg.cn/blog_migrate/207fb9d2e9a8601f653e817085a2252d.jpeg)
内容概览
openlayers6地图截图导出功能
源代码demo下载
效果图如下:
![0ad062480e001c86e64a57787fc25e5b.png](https://i-blog.csdnimg.cn/blog_migrate/f378259ef8d83063b334d219d86b4ca6.jpeg)
![b71bc27d6a57c5c2e06178fab3382d2d.png](https://i-blog.csdnimg.cn/blog_migrate/c097ad50d84d341d9b7a1400231458a0.jpeg)
本篇主要参考截图插件domtoimage: https:// github.com/tsayen/dom-t o-image
地图全图导出直接用上面的domtoimage插件,然后矩形框选截图导出也是在domtoimage插件基础上自己计算矩形范围来实现的
部分核心代码,完整的见源码demo下载
var baseLayer = new ol.layer.Tile({
source: new ol.source.TileArcGISRest({
url: 'http://map.geoq.cn/ArcGIS/rest/services/ChinaOnlineStreetPurplishBlue/MapServer',
crossOrigin:'Anonymous'
})
});
//绘制工具图形
var draw = null;
var drawsource = new ol.source.Vector();
var drawlayer = new ol.layer.Vector({
source: drawsource,
style:new ol.style.Style({
stroke: new ol.style.Stroke({
color: '#fff',
width: 1
}),
fill: new ol.style.Fill({
color:[38,155,0,0] //使用了一个数组,[r,g,b,a]
})
}),
});
var view = new ol.View({
center: [113.90271877, 22.95186415],
zoom: 9,
projection: 'EPSG:4326',
});
var map = new ol.Map({
layers: [
baseLayer,
drawlayer
],
target: 'map',
view: view
});
var node = document.getElementById('map');
$("#mapexport_btn").click(function(){
domtoimage.toJpeg(node, { quality: 1.0 })
.then(function (dataUrl) {
var link = document.createElement('a');
link.download = '全图导出.jpeg';
link.href = dataUrl;
link.click();
});
});
$("#rctanglexport_btn").click(function(){
//绘制矩形
clearMap();
addInteraction("Box");
});
function addInteraction(value){
var geometryFunction;
switch (value) {
case "Box":
value = 'Circle';
geometryFunction = ol.interaction.Draw.createBox();
break;
case "Polygon":
value = 'Polygon';
break;
}
//map.addLayer(drawlayer);
draw = new ol.interaction.Draw({
source: drawsource,
type: value,
style:new ol.style.Style({
stroke: new ol.style.Stroke({
color: '#fff',
width: 1
}),
fill: new ol.style.Fill({
color:[38,155,0,0] //使用了一个数组,[r,g,b,a]
}),
image: new ol.style.Circle({
radius: 3,
fill: new ol.style.Fill({
color: '#ffcc33'
})
})
}),
geometryFunction: geometryFunction
});
map.addInteraction(draw);
draw.on('drawend',function(evt){
clearMap();
var feature = evt.feature;
var extent = feature.getGeometry().getExtent();
//地理坐标转换屏幕坐标
var coord = [extent[0], extent[3]];
var leftTopPosition = map.getPixelFromCoordinate(coord);
//地理坐标转换屏幕坐标
var coord1 = [extent[2], extent[1]];
var bottomRightPosition = map.getPixelFromCoordinate(coord1);
//计算框选矩形的宽度以及高度像素
var width = Math.abs(bottomRightPosition[0] - leftTopPosition[0]);
var height = Math.abs(bottomRightPosition[1] - leftTopPosition[1]);
//计算框选矩形的左上角屏幕坐标
var minx =
leftTopPosition[0]<= bottomRightPosition[0]
? leftTopPosition[0]
: bottomRightPosition[0];
var miny =
leftTopPosition[1] <= bottomRightPosition[1]
? leftTopPosition[1]
: bottomRightPosition[1];
domtoimage
.toPng(node)
.then(function(dataUrl) {
if (dataUrl.length <= 6) {
console.log("屏幕截图结果为空,建议放大地图,重新截图操作试试看");
return;
}
//过渡img图片,为了截取img指定位置的截图需要
var img = new Image();
img.src = dataUrl;
img.onload = function() {
//要先确保图片完整获取到,这是个异步事件
var canvas = document.createElement("canvas"); //创建canvas元素
canvas.width = width;
canvas.height = height;
canvas
.getContext("2d")
.drawImage(img, minx, miny, width, height, 0, 0, width, height); //将图片绘制到canvas中
dataUrl = canvas.toDataURL(); //转换图片为dataURL
var link = document.createElement('a');
link.download = '框选导出.jpeg';
link.href = dataUrl;
link.click();
console.log("截图数据获取成功");
};
})
.catch(function(error) {
console.error("oops, something went wrong!", error);
});
});
}
源码demo下载见下面链接:
openlayers6地图全图以及框选截图导出功能(附源码下载) - 小专栏xiaozhuanlan.com![747fb04e8ac6697cbc27ae166e598050.png](https://i-blog.csdnimg.cn/blog_migrate/cc38ddb90d75ffe9f44bbccbc41fea9b.png)
对本专栏感兴趣的话,可以关注一波
GIS之家作品店铺:GIS之家作品店铺
GIS之家源码咨询:GIS之家webgis入门开发系列demo源代码咨询