1、本文应用arcgis api for javascript对发布的动态地图进行打印,打印的为PDF格式,打印出来如图:
2、需要特别注意的是:我们在运行代码前,需要打开PrintingTools,如图
3、并且在启动后,在URL中,需要修改一下,如图:
4、运行代码,点击打印如图:
5、代码部分:
<!DOCTYPE html>
<html>
<head>
<title>地图打印</title>
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<meta http-equiv="Access-Control-Allow-Origin" content="*">
<link rel="stylesheet" href="https://js.arcgis.com/3.29/esri/css/esri.css">
<script src="https://js.arcgis.com/3.29/"></script>
<style>
#map{
position:relative;
height:500px;
width:100%;
}
</style>
</head>
<body> <div id='map'>
</div>
<div>
<input id="Btn" type="button" value="打印地图PDF" />
</div>
<script>
var map,sr,bool = false,initextent,url;
require([
"esri/map",
"esri/layers/MapImage",
"esri/layers/MapImageLayer",
"esri/geometry/Extent",
"esri/SpatialReference",
"esri/tasks/PrintTask",
"esri/tasks/PrintTemplate",
"esri/tasks/PrintParameters",
"esri/layers/ArcGISDynamicMapServiceLayer",
"dojo/domReady!"],
function (
Map,
MapImage,
MapImageLayer,
Extent,
SpatialReference,
PrintTask,
PrintTemplate,
PrintParameters,
ArcGISDynamicMapServiceLayer) {
sr = new SpatialReference(4326)
map = new Map("map", {
basemap:"satellite"
});
//调用动态地图服务
var DyLayer=new ArcGISDynamicMapServiceLayer('http://localhost:6080/arcgis/rest/services/dtchina/MapServer');
map.addLayer(DyLayer);
var btn=document.getElementById("Btn");
btn.onclick=function(){
btn.setAttribute("disabled","true");
btn.value="正在输出...";
var printMap = new PrintTask("http://localhost:6080/arcgis/rest/services/Utilities/PrintingTools/GPServer/Export%20Web%20Map%20Task");
//创建地图打印模版
var template = new PrintTemplate();
var params = new PrintParameters();
//输出图片的空间参考
printMap.outSpatialReference = map.SpatialReference
//打印图片的各种参数
template.exportOptions = {
width: 850,
height: 650,
dpi: 96
};
template.format = "PDF";
template.layout = "MAP_ONLY";
params.map = map;
params.template = template;
printMap.execute(params, function(result){
console.log(result);
if (result != null) {
(function(){
btn.disabled=false;
btn.value="打印地图PDF";
})()
window.open(result.url);
}
})
}
});
</script>
</body>
</html>