openlayers6地圖截圖導出功能
源代碼demo下載
效果圖如下：
本篇主要參考截圖插件domtoimage:https://github.com/tsayen/dom-to-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
});
//參考截圖插件:https://github.com/tsayen/dom-to-imagevar 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(); //轉換圖片為dataURLvar link = document.createElement('a');
link.download = '框選導出.jpeg';
link.href = dataUrl;
link.click();
console.log("截圖數據獲取成功");
};
})
.catch(function(error) {
console.error("oops, something went wrong!", error);
});
});
}