已被阅读 1344 次 | 文章分类:OpenLayers | 2021-10-31 17:50
openlayers加载geoserver的wfs地图服务并实现打印地图；实现对底图以及地图上所有元素的打印操作；
1 注意事项
有两点需要注意:
第一 加载wfs地图服务，重点是wfs请求参数的设置，如下:
//参数字段
var wfsParams = {
service : 'WFS',
version : '1.0.0',
request : 'GetFeature',
typeName : 'HTYgc:bou1_4p',
outputFormat : 'text/javascript',
format_options : 'callback:loadFeatures' //回调函数声明
};
第二打印地图关键在于服务端和前端要同时设置跨域配置；因为截图的本质是操作canvas，所以会出发跨域策略；服务器端打开geoserver的跨域配置，可自行查询；前端配置jsonp方式配置跨域
//使用jsonp，可以解决跨域的问题，GeoServer中的web.xml文件关于jsonp的注释要去掉，就可以支持跨域了
var vectorSource = new ol.source.Vector({
format: new ol.format.GeoJSON(),
loader: function(extent, resolution, projection) { //加载函数
var url = 'http://localhost:8081/geoserver/wfs';
$.ajax({
url: url,
data : $.param(wfsParams), //传参
type : 'GET',
dataType: 'jsonp', //解决跨域的关键
jsonpCallback:'loadFeatures' //回调
});
},
strategy: ol.loadingstrategy.tile(new ol.tilegrid.createXYZ({
maxZoom: 25
})),
projection: 'EPSG:4326'
});
2 打印地图
通过postcompose事件，获取openlayers地图的canvas，然后将canvas转换为图片下载即可；
// 打印地图
document.getElementById('export-png').addEventListener('click', function () {
map.once('postcompose', function (event) {
var canvas = event.context.canvas;
if (navigator.msSaveBlob) {
navigator.msSaveBlob(canvas.msToBlob(), 'map.png');
} else {
canvas.toBlob(function (blob) {
saveAs(blob, 'map.png');
});
}
});
map.renderSync();
});
canvas转换图片这里引用直接调用saveAs(blob, 'map.png')方法即可，其实也可以通过canvas.toDataURL("image/png")实现
3 全部代码
全部代码可直接运行
<!DOCTYPE html>
<html>
<head>
<title>openlayers加载geoserver的wfs地图服务并打印地图</title>
<link rel="stylesheet" href="https://openlayers.org/en/v5.3.0/css/ol.css" type="text/css">
<script
src="https://cdn.polyfill.io/v2/polyfill.min.js?features=requestAnimationFrame,Element.prototype.classList,URL">
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/FileSaver.js/1.3.3/FileSaver.min.js"></script>
<script src="ol.js"></script>
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
</head>
<body>
<a id="export-png" class="btn btn-default"><i class="fa fa-download"></i> 打印当前地图</a>
<div id="map" class="map"></div>
<script>
var map = new ol.Map({
layers: [
new ol.layer.Tile({
source: new ol.source.OSM()
})
],
target: 'map',
view: new ol.View({
center: [0, 0],
zoom: 2
})
});
//参数字段
var wfsParams = {
service : 'WFS',
version : '1.0.0',
request : 'GetFeature',
typeName : 'HTYgc:bou1_4p',
outputFormat : 'text/javascript',
format_options : 'callback:loadFeatures' //回调函数声明
};
//使用jsonp，可以解决跨域的问题，GeoServer中的web.xml文件关于jsonp的注释要去掉，就可以支持跨域了
var vectorSource = new ol.source.Vector({
format: new ol.format.GeoJSON(),
loader: function(extent, resolution, projection) { //加载函数
var url = 'http://localhost:8081/geoserver/wfs';
$.ajax({
url: url,
data : $.param(wfsParams), //传参
type : 'GET',
dataType: 'jsonp', //解决跨域的关键
jsonpCallback:'loadFeatures' //回调
});
},
strategy: ol.loadingstrategy.tile(new ol.tilegrid.createXYZ({
maxZoom: 25
})),
projection: 'EPSG:4326'
});
//回调函数使用
window.loadFeatures = function(response) {
//坐标转换，将返回的数据的坐标转换到当前使用地图的坐标系，否则，无法正常显示
vectorSource.addFeatures((new ol.format.GeoJSON()).readFeatures(response,{
dataProjection: 'EPSG:4326', // 设定JSON数据使用的坐标系
// featureProjection: 'EPSG:3857' // 设定当前地图使用的feature的坐标系
})); //载入要素
};
var vectorLayer = new ol.layer.Vector({
source: vectorSource
});
map.addLayer(vectorLayer);
document.getElementById('export-png').addEventListener('click', function () {
map.once('postcompose', function (event) {
var canvas = event.context.canvas;
if (navigator.msSaveBlob) {
navigator.msSaveBlob(canvas.msToBlob(), 'map.png');
} else {
canvas.toBlob(function (blob) {
saveAs(blob, 'map.png');
});
}
});
map.renderSync();
});
</script>
</body>
</html>
QQ:3410192267 | 技术支持 微信:popstarqqsmall
Copyright ©2017 xiaobaigis.com . 版权所有 鲁ICP备17027716号