（十三）ArcGIS JS 地图的打印输出

逃离我推掉我的手 2021-09-14 23:24 508阅读 0赞

在WebGIS中地图输出是一个比较常用的功能，操作的结果往往要将我们的地图打印成一张图片保存起来。在ArcGIS JS中，PrintingTools工具可以帮助我们事先地图打印，此工具实质上是一个GP工具，因为是GP工具，所以地图的生成是在服务器端生成的，也可以叫做服务器端打印. 服务器端打印的执行对象是`PrintTask`（esri/tasks/PrintTask），打印的参数是 `PrintParameters`（esri/tasks/PrintParameters），通过设置打印模板对象`PrintTemplate`（esri/tasks/PrintTemplate）。

### 准备： ###

#### **启用PrintingTools 工具** ####

PrintingTools 和几何服务一样，默认情况下是关闭的，我们应当开启此工具  
默认情况下关闭  
![这里写图片描述][SouthEast]

![这里写图片描述][SouthEast 1]

![这里写图片描述][SouthEast 2]  
打印输出服务地址：

http://localhost:6080/arcgis/rest/services/Utilities/PrintingTools/GPServer/Export%20Web%20Map%20Task

### 思路： ###

*  实例化PrintTask，PrintTemplate，PrintParameters
 *  设置PrintTemplate，PrintParameters（注意template的format和layout参数）
 *  PrintTask实例执行通铺方法excute()完成同步调用

代码

<!DOCTYPE html>
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
        <title>地图打印</title>
        <link rel="stylesheet" type="text/css" href="http://localhost:8080/arcgis_js_api/library/3.20/3.20/dijit/themes/tundra/tundra.css"/>
        <link rel="stylesheet" type="text/css" href="http://localhost:8080/arcgis_js_api/library/3.20/3.20/esri/css/esri.css" />
        <script type="text/javascript" src="http://localhost:8080/arcgis_js_api/library/3.20/3.20/init.js"></script>
        <style type="text/css"> .MapClass{ width:100%; height:500px; border:1px solid #000; } </style>
        <script type="text/javascript"> require(["esri/map", "dojo/dom","dojo/on","dojo/query", "esri/layers/ArcGISDynamicMapServiceLayer", "esri/symbols/SimpleMarkerSymbol", "esri/symbols/SimpleLineSymbol", "esri/symbols/SimpleFillSymbol", "esri/toolbars/draw", "esri/graphic", "esri/tasks/PrintTask", "esri/tasks/PrintTemplate", "esri/tasks/PrintParameters", "dojo/colors", "dojo/domReady!"], function (Map,dom,on,query, ArcGISDynamicMapServiceLayer, SimpleMarkerSymbol, SimpleLineSymbol, SimpleFillSymbol, Draw, Graphic, PrintTask,PrintTemplate,PrintParameters, Color) { var map = new esri.Map("mapDiv"); var layer = new esri.layers.ArcGISDynamicMapServiceLayer ("http://localhost:6080/arcgis/rest/services/firstTest/cityService/MapServer"); map.addLayer(layer); //创建绘图对象 var toolBar = new Draw(map); //线符号 lineSymbol = new SimpleLineSymbol(SimpleLineSymbol.STYLE_DASH, new Color([255, 0, 0]), 3); //面符号 polygonSymbol = new SimpleFillSymbol(SimpleFillSymbol.STYLE_SOLID, lineSymbol, new Color([255, 0, 0, 0.25])); //给绘制polygon的按钮绑定事件 query(".pbtn").on("click",function(event){ //激活绘制多边形 toolBar.activate(Draw.POLYGON, { showTooltips:true }) }); //绘图结束绑定事件 on(toolBar,"draw-end",function(result){ //获得面形状 var geometry=result.geometry; //创建Graphic var graphicpoint= new Graphic(geometry, polygonSymbol); map.graphics.add(graphicpoint); //关闭绘图工具 toolBar.deactivate(); }); //给地图打印按钮绑定事件 on(dom.byId("Btn"),"click",function(){ //创建地图打印对象 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: 1200, height: 1200, dpi: 96 }; //打印输出的格式 template.format = "PDF"; //输出地图的布局 template.layout = "MAP_ONLY"; // PrintTemplate //设置参数地图 params.map = map; //设置参数模版 params.template = template; //运行结果 printMap.execute(params, function(result){ if (result != null) { //网页打开生成的地图 window.open(result.url); } }) }) }); </script>
    </head>
    <body>
    <div id="mapDiv" class="MapClass"></div>
    <button class="pbtn" >画多边形</button>
    <input id="Btn" type="button" value="地图打印" />
    </body>
    </html>

### 结果 ###

![这里写图片描述][SouthEast 3]

### 注意： ###

参考：[http://blog.csdn.net/lovecarpenter/article/details/53023231][http_blog.csdn.net_lovecarpenter_article_details_53023231]

[SouthEast]: /images/20210726/942b9d7dbc214de8a081bacd78353f63.png
[SouthEast 1]: /images/20210726/3a939768707c4a77887b4ba1fa39860d.png
[SouthEast 2]: /images/20210726/e45b9d613b2442fc902243875f2fcdee.png
[SouthEast 3]: /images/20210726/07bcbec83d604e94859c7591b6d705fc.png
[http_blog.csdn.net_lovecarpenter_article_details_53023231]: http://blog.csdn.net/lovecarpenter/article/details/53023231