(十三)ArcGIS JS 地图的打印输出

本文介绍如何使用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>

结果

这里写图片描述

注意:

参考:http://blog.youkuaiyun.com/lovecarpenter/article/details/53023231

评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值