openlayers 截屏出图和框选范围出图
#map{
width:100%;
/* height:570px; */
height: 100%;
position: fixed;
}
#menu{
float:left;
position:absolute;
bottom:10px;
z-index:2;
}
#wrap2{
width: 100%;
height: 100%;
position: absolute;
left: 0;
top: 0;
background-color: lightgray;
opacity: 0.8;
display: none;
z-index: 9;
}
//实例化Map对象加载地图
var map = new ol.Map({
target: 'map', //地图容器div的ID
//地图容器中加载的图层
layers: [
//加载瓦片图层数据（OSM）
new ol.layer.Tile({
source: new ol.source.OSM()
})
],
//地图视图设置
view: new ol.View({
center: [12950000, 4860000], //地图初始中心点
zoom: 8, //地图初始显示级别
minZoom: 6, //最小级别
maxZoom: 12 //最大级别
})
});
var exportPNGElement = document.getElementById('export-png'); //导出图片功能项
var manypng = document.getElementById('manypng'); //导出图片功能项
if ('download' in exportPNGElement) {
exportPNGElement.addEventListener('click', function (e) {
map.once('postcompose', function (event) {debugger
var canvas = event.context.canvas; //地图渲染容器
exportPNGElement.href = canvas.toDataURL('image/png'); //导出图片
});
map.renderSync();
}, false);
} else {
alert("浏览器不支持此导出地图图片功能！");
}
if ('download' in manypng) {
manypng.addEventListener('click', function(e) {
// map.removeInteraction(draw);
addInteraction(); debugger
map.renderSync();
},false)
}
var draw; // global so we can remove it later
var source = new ol.source.Vector();
function addInteraction() {debugger
draw = new ol.interaction.Draw({
source: source,
type: 'LineString',
style: new ol.style.Style({
fill: new ol.style.Fill({
color: 'rgba(255, 255, 255, 0.2)'
}),
stroke: new ol.style.Stroke({
color: '#ffcc33',
width: 2
}),
image: new ol.style.Circle({
radius: 7,
fill: new ol.style.Fill({
color: '#ffcc33'
})
})
}),
maxPoints: 2,
geometryFunction: ol.interaction.Draw.createBox()//矩形框
})
map.addInteraction(draw);
// map.values_.target='map2';
function 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 extent = [];
draw.on('drawend',function(evt){
var feature = evt.feature;console.log(feature);
var ftarget = evt.target.a;
var geometry=feature.getGeometry();
var ext=geometry.getExtent();
map.removeInteraction(draw);
var r = map.getView().getResolutionForExtent(ext, map.getSize());//根据范围获取分辨率
map.getView().setResolution(r);
map.getView().setZoom(12);debugger
var centerone=ol.extent.getCenter(ext);
map.getView().setCenter(centerone);
var canvas;var imageData;var canvas2;
var coordinate=geometry.getCoordinates();
map.once("postrender", function (e) {
extent[0] = e.target.getPixelFromCoordinate(coordinate[0][0]);//转画布坐标
extent[1] = e.target.getPixelFromCoordinate(coordinate[0][1]);
extent[2] = e.target.getPixelFromCoordinate(coordinate[0][2]);
extent[3] = e.target.getPixelFromCoordinate(coordinate[0][3]);
var x_dx = getXDis(extent, 0);debugger
var y_dy = getXDis(extent, 1);
map.once("postcompose", function(event) {debugger
canvas = event.context.canvas;
var ctx2=canvas.getContext("2d");
imageData = ctx2.getImageData(x_dx[0], y_dy[0], x_dx[1], y_dy[1]); var c=document.getElementById("map");
c.style.width=imageData.width+'px';
c.style.height=imageData.height+'px';
map.updateSize();//容器改变重新加载地图
})
map.once('rendercomplete',function(){//渲染完成
canvas.toBlob(function (blob) {
saveAs(blob, 'map.png');debugger
$('#map').css({
width:"100%",
height:"100%"
})
map.updateSize();//容器改变重新加载地图
});
});
})
});
}