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

最新推荐文章于 2025-06-16 10:43:01 发布

idomyway

最新推荐文章于 2025-06-16 10:43:01 发布

阅读量5.3k

点赞数

CC 4.0 BY-SA版权

分类专栏： ArcGIS JS 学习笔记文章标签： ArcGIS javascript 地图打印输出

本文链接：https://blog.youkuaiyun.com/idomyway/article/details/79475377

ArcGIS JS 学习笔记专栏收录该内容

26 篇文章

订阅专栏

本文介绍如何使用ArcGIS JavaScript API实现地图打印功能。通过创建PrintTask、PrintTemplate及PrintParameters对象，并设置相应的打印参数，最终实现地图的服务器端打印。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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

准备：

启用PrintingTools 工具

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

这里写图片描述

这里写图片描述
打印输出服务地址：

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>