我正在尝试使用openlayers和geoserver打印自定义 Map . 但是我无法找到它的实现 . 任何代码片段将不胜感激！
这是我目前为止显示的代码：
<!DOCTYPE html>
<html>
<head>
<title>Export PDF example</title>
<link rel="stylesheet" href="https://openlayers.org/en/v4.1.1/css/ol.css" type="text/css">
<script src="https://openlayers.org/en/v4.1.1/build/ol.js"></script>
</head>
<body>
<form class="form">
<i><label>Choose the layers</label><br></i>
<b><input type="checkbox" id="layer1" name="a">Boundaries<br>
<input type="checkbox" id="layer2" name="a">Roads<br>
<input type="checkbox" id="layer3" name="a">Water bodies<br>
<input type="button" onclick="showMap()" value="Display"></b>
<input type="button" onclick="printMap()" value="Print map">
<script>
function printMap(){
//needs to be completed!
}
function showMap(){
layer1_checked = document.getElementById('layer1').checked;
layer2_checked = document.getElementById('layer2').checked;
layer3_checked = document.getElementById('layer3').checked;
var layers_array = [];
if(layer1_checked){
layers_array.push('topp:tasmania_state_boundaries');
}
if(layer2_checked){
layers_array.push('topp:tasmania_roads');
}
if(layer3_checked){
layers_array.push('topp:tasmania_water_bodies');
}
layers_param = "";
for(var i=0;i<layers_array.length;i++){
layers_param = layers_param+layers_array[i]+",";
}
layers_param = layers_param.substring(0,layers_param.length-1);
document.getElementById('map').innerHTML="";
var format = 'image/png';
var bounds = [145.19754, -43.423512,148.27298000000002, -40.852802];
var mousePositionControl = new ol.control.MousePosition({
className: 'custom-mouse-position',
target: document.getElementById('location'),
coordinateFormat: ol.coordinate.createStringXY(5),
undefinedHTML: ' '
});
var tiled = new ol.layer.Tile({
visible: true,
source: new ol.source.TileWMS({
url: 'http://localhost:8080/geoserver/topp/wms',
params: {'FORMAT': format,
'VERSION': '1.1.1',
tiled: true,
STYLES: '',
LAYERS: layers_param,
tilesOrigin: 145.19754 + "," + -43.423512
}
})
});
var projection = new ol.proj.Projection({
code: 'EPSG:4326',
units: 'degrees',
axisOrientation: 'neu',
global: true
});
var map = new ol.Map({
controls: ol.control.defaults({
attribution: false
}).extend([mousePositionControl]),
target: 'map',
layers: [
tiled
],
view: new ol.View({
projection: projection
})
});
map.getView().on('change:resolution', function(evt) {
var resolution = evt.target.get('resolution');
var units = map.getView().getProjection().getUnits();
var dpi = 25.4 / 0.28;
var mpu = ol.proj.METERS_PER_UNIT[units];
var scale = resolution * mpu * 39.37 * dpi;
if (scale >= 9500 && scale <= 950000) {
scale = Math.round(scale / 1000) + "K";
} else if (scale >= 950000) {
scale = Math.round(scale / 1000000) + "M";
} else {
scale = Math.round(scale);
}
});
map.getView().fit(bounds, map.getSize());
map.on('singleclick', function(evt) {
var view = map.getView();
var viewResolution = view.getResolution();
var source = tiled.getSource();
var url = source.getGetFeatureInfoUrl(
evt.coordinate, viewResolution, view.getProjection(),
{'INFO_FORMAT': 'text/html', 'FEATURE_COUNT': 50});
});
}
</script>
</body>
</html>
到目前为止显示层似乎工作正常 . 我需要printMap函数的实现帮助 . 此外，它假设使用Mapfish插件进行打印！