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>

　　

arcgis api for javascript 学习（六） 地图打印的更多相关文章

  1. arcgis api for javascript 学习（七） 调用发布地图信息，并将地图属性信息输出到Excel表格---进阶版

    我们在arcgis api for javascript 学习(三)已经学习到了关于调用地图信息进行属性输出的问题,不过通过代码我们实现后会发现还是有一些小瑕疵的,比如我们只能单个数据属性的输出,如果 ...

  2. ArcGis API for JavaScript学习——加载地图

    ArcGis API for JavaScript开发笔记——加载地图 在这个例子中使用的离线部署的API(请参见 http://note.youdao.com/noteshare?id=f42865 ...

  3. arcgis api for javascript 学习（三） 调用发布地图信息，并将地图属性信息输出到Excel表中

    吐血推荐:网上搜了很久关于webgis地图属性表输出到Excel表,并没能找到相关有价值的信息,在小白面前,这就是一脸懵x啊!网上要么是关于前端如何在页面上直接导出excel,和webgis半毛钱关系 ...

  4. arcgis api for javascript 学习（四） 地图的基本操作

    1.文章讲解的为地图的平移.放大.缩小.前视图.后视图以及全景视图的基本功能操作 2.主要用到的是arcgis api for javascript中Navigation的用法,代码如下: <! ...

  5. ArcGis API for JavaScript学习——离线部署API

    ArcGis API for JavaScript开发笔记——离线部署API 以3.18版API为例: 在加载图图前引用GIS服务是必须的.有两种方法,一是在线引用,而是离线部署引用. 在线引用: & ...

  6. Arcgis api for javascript学习笔记(4.5版本) - 获取FeatureLayer中的graphics集合

    在Arcgis api for javascript 3.x 版本中,我们可以直接通过某个FeatureLayer对象中的graphics属性获取要素集合. graphics属性 但是在4.x版本中, ...

  7. Arcgis api for javascript学习笔记(4.5版本) - 本地部署及代理配置

    在开发过程中,由于api的文件比较多,没必要每个项目都将api加入到解决方案中.况且在VS中如果将api加入解决方案,在编写css或js代码时,由于智能提示需要扫描脚本等文件,会导致VS很卡.所以个人 ...

  8. Arcgis api for javascript学习笔记(3.2X版本)-初步尝试

    Arcgis api for javascript(3.22版本)官方地址 :https://developers.arcgis.com/javascript/3/ 1. 根据官方示例实现一个简单地图 ...

  9. Arcgis api for javascript学习笔记 - 不改变默认端口(6080)情况下，外网访问Arcgis Server 发布的接口

    Arcgis Server发布的地图服务地址默认端口号是6080,假设本机上只对80端口做了外网映射,在IIS中部署了一个网站绑定了80端口,那么网站中某个页面通过arcgis api for js ...

随机推荐

  1. 网络协议 2 - IP 地址和 MAC 地址

    了解完网络协议,我们会发现,网络通信的五层模型里,有两个很重要的概念:IP 地址和 MAC 地址. 那么 IP 地址是怎么来的,又是怎么没的?MAC 地址与 IP 地址又有什么区别? 这回答上面问题前 ...

  2. ant 打包脚本

    现在很多人都用ant脚本来进行打包,下面就介绍一下这个打包工具常见的用法.以及脚本如何编写 <!-- 定义任务,清空任务:清空原有的classes目录,重新创建 --> <targe ...

  3. Python Web（一）

    Infi-chu: http://www.cnblogs.com/Infi-chu/ 一.Web框架 1.socket网络编程 架构:C/S 协议:TCP/UDP 传输层 2.Web应用 架构:B/S ...

  4. Cesium专栏-空间分析之坡向分析（附源码下载）

    Cesium Cesium 是一款面向三维地球和地图的,世界级的JavaScript开源产品.它提供了基于JavaScript语言的开发包,方便用户快速搭建一款零插件的虚拟地球Web应用,并在性能,精 ...

  5. ABP入门教程13 - 更新菜单

    点这里进入ABP入门教程目录 菜单更新 在展示层(即JD.CRS.Web.Mvc)的Startup下打开CRSNavigationProvider.cs //用以存放菜单相关信息 修改如下 using ...

  6. 【转】java中使用WebSocket

    传统的请求,都是从客服端到服务端,表现在web应用上就是,消息都只能由浏览器发起请求,调用客户端的方法. webSocket可以从服务器端推送消息给浏览器. 使用场景: 当客户端发起缴费请求时,由服务 ...

  7. 2019 DevOps 必备面试题——DevOps 理念篇

    原文地址:https://medium.com/edureka/devops-interview-questions-e91a4e6ecbf3 原文作者:Saurabh Kulshrestha 翻译君 ...

  8. php number_format金钱 价格 格式处理 由分单位转换成元（保留2为小数）

    /** * priceFormat * 价格格式处理 * * @access public * @param null * @since 1.0 * @return object */ if(!fun ...

  9. 关于xshell连接limux界面按上下左右方向键出现ABCD的问题

    这个问题有两种可能: 1.一种是由于当前用户使用的shell是/bin/sh的原因.在添加用户的时候没有添加用户的指定shell类型,因此默认为/bin/sh. 可以用如下命令查看当前用户的shell ...

  10. Ubuntu笔记本安装高级电源管理工具TLP

    Ubuntu系统下的笔记本电脑电量总是下降的很快,尽管目前系统对电源管理的优化已经进步了不少,但还是需要一些工具来辅助. TLP是一款Linux下的高级电源管理工具,相信很多Linux用户会用到它. ...