Javascript 向geoserver发出mapfish打印请求
我正在尝试使用openlayers和geoserver打印自定义地图。 然而，我无法找到它的实现。 任何代码片段都将不胜感激 以下是我迄今为止显示的代码：Javascript 向geoserver发出mapfish打印请求,javascript,dictionary,openlayers,geoserver,mapfish,Javascript,Dictionary,Openlayers,Geoserver,Mapfish,我正在尝试使用openlayers和geoserver打印自定义地图。 然而，我无法找到它的实现。 任何代码片段都将不胜感激 以下是我迄今为止显示的代码： <!DOCTYPE html> <html> <head> <title>Export PDF example</title> <link rel="stylesheet" href="https://openlayers.org/en/v4.1.1/css/o
<!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>
导出PDF示例
选择图层
边界
道路
水体
函数printMap（）{
//需要完成！
}
函数showMap（）{
layer1_checked=document.getElementById（'layer1'）。选中；
layer2_checked=document.getElementById（'layer2'）。选中；
layer3_checked=document.getElementById（'layer3'）。选中；
变量层数组=[]；
如果（第1层未选中）{
layers_array.push（'topp:tasmania_state_Bounders'）；
}
如果（第2层未选中）{
layers_array.push（'topp:tasmania_roads'）；
}
如果（第3层未选中）{
layers_array.push（'topp:tasmania_water_Body'）；
}
层_参数=”；
对于（变量i=0；i=9500&&scale=950000）{
比例=数学四舍五入（比例/1000000）+“M”；
}否则{
比例=数学圆（比例）；
}
});
map.getView（）.fit（bounds，map.getSize（））；
map.on（'singleclick'，函数（evt）{
var view=map.getView（）；
var viewsolution=view.getResolution（）；
var source=tiled.getSource（）；
var url=source.getFeatureInfoURL(
evt.coordinate、viewResolution、view.getProjection（），
{'INFO_FORMAT'：'text/html'，'FEATURE_COUNT'：50}）；
});
}