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. canvas绘制星星和月亮

    用变量的方式绘制一个五角星,首先求五角星十个顶点的坐标. 可以把每个五角星看成外顶点用一个大圆绘制,内顶点用小圆绘制.在坐标系(0deg)下,根据每个顶点的角度和圆的半径求得x,y. 而每个大顶点相差 ...

  2. 【转】Kotlin的inline内联函数

    原文链接:https://blog.csdn.net/Jaden_hool/article/details/78437947 方法调用流程 调用一个方法是一个压栈和出栈的过程,调用方法时将栈针压入方法 ...

  3. Django用websocket实现聊天室之筑基篇

    最近闲来无事,无意发现一个聊天室的前端UI,看着挺好看的但是没有聊天室的通信代码,于是想给它安装电池(通信部分),先看UI: 开始通信部分的工作: 使用的组件: Django1.11.13 chann ...

  4. 最常见的 Git 问题和操作清单汇总

    最常见的 Git 问题和操作清单汇总 引言 本文整理自工作多年以来遇到的所有 Git 问题汇总,之前都是遗忘的时候去看一遍操作,这次重新整理了一下,发出来方便大家收藏以及需要的时候查找答案. 一.必备 ...

  5. Python 定义常量

    常量在编写程序的时候,一旦设定就不能再进行变动,常量一种约定俗成的方式,所有字母大写并用下划线分隔单词的方式(如MAX_VALUE, OUT_TIME等),但是python没有提供设置常量用法,需要自 ...

  6. 渗透测试学习 三十一、MSF

    术语 测试者利用系统程序或服务的漏洞进行攻击的一个过程——渗透攻击(exploit),攻击载荷(payload) 攻击者在目标系统上执行的一段代码,该代码具有反弹链接,创建用户.执行其他系统命令的功能 ...

  7. SPA项目开发之动态树以及数据表格和分页

    首先我们来看下数据库 t_vue_user t_vue_tree_node t_vue_articles 2. 动态生成NavMenu导航菜单(只支持2级菜单) <el-menu key=&qu ...

  8. Leetcode 216. 组合总和 III

    地址 https://leetcode-cn.com/problems/combination-sum-iii/ 找出所有相加之和为 n 的 k 个数的组合.组合中只允许含有 1 - 9 的正整数,并 ...

  9. angular6 multipart/form-data Post

    一般情况下用的都是 第三种  然后碰到后台要求的是这种格式的数据 这时候我们就要修改一下我们的post 请求头,话不多说 直接上代码. 这样子的话 就ok啦!

  10. JavaScript：ES6的新特性

    1.关键字 const:修饰常量.ES6之前只有变量的声明字段var,ES6开始引入常量关键字,被修饰的变量无法被修改. <script type="text/javascript&q ...