openlayers6地圖全圖以及框選截圖導出功能(附源碼下載)

時間 2020-11-16

標籤 node git github canvas 數組 dom 異步工具 oop url 欄目 Git 简体版

原文原文鏈接

內容概覽

openlayers6地圖截圖導出功能
源代碼demo下載node

效果圖以下：
git

本篇主要參考截圖插件domtoimage:https://github.com/tsayen/dom-to-image
地圖全圖導出直接用上面的domtoimage插件，而後矩形框選截圖導出也是在domtoimage插件基礎上本身計算矩形範圍來實現的github

部分核心代碼，完整的見源碼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-image
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);
});
 
});
}