Arcgis Api for JavaScript4.x 打印地图

先打开你的arcgis service,点击Utilities。如果没有这个选项。去http://localhost:6080/arcgis/manager/ 里面把Utilities服务打开
如图所示。

点击Utilities/PrintingTools (GPServer)

如图：需要这个地址

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title><!-- 引用在线arcgis api --><link rel="stylesheet" href="https://js.arcgis.com/4.16/esri/themes/light/main.css" /><script src="https://js.arcgis.com/4.16/"></script><!-- 引用在线Jquery --><script src="http://libs.baidu.com/jquery/2.1.4/jquery.min.js"></script><style>html,body,#viewDiv {height: 100%;width: 100%;margin: 0;padding: 0;}</style><script>require(["esri/Map","esri/Basemap","esri/views/MapView","esri/geometry/Extent","dojo/dom","dojo/on","dojo/domReady!"], function(Map,Basemap,MapView,Extent,dom,on) {var startExtent = new Extent({xmin: 120.236368,ymin: 36.043567,xmax: 120.579018,ymax: 36.196569,spatialReference: {wkid: 4549}});var map = new Map({basemap: "hybrid"});var view = new MapView({container: "viewDiv",map: map,zoom: 11,Extent: startExtent,center: [120.369174, 36.097245]});$(".btn").click(function() {print();});});</script>
</head><body><div id="viewDiv"><button class="btn">点击打印</button></div>
</body></html>
<script>require(["esri/Map","esri/Basemap","esri/views/MapView","esri/tasks/PrintTask","esri/tasks/support/PrintTemplate","esri/tasks/support/PrintParameters","dojo/dom","dojo/on","dojo/domReady!"], function(Map,Basemap,MapView,PrintTask,PrintTemplate,PrintParameters,dom,on) {function print() {var printTask = new PrintTask({url: "http://localhost:6080/arcgis/rest/services/Utilities/PrintingTools/GPServer/Export%20Web%20Map%20Task"});var template = new PrintTemplate({format: "pdf",exportOptions: {dpi: 300},layout: "a4-portrait",layoutOptions: {titleText: "打印一张地图",authorText: "Sam"}});var params = new PrintParameters({view: view,template: template});printTask.execute(params).then(function(data) { //printResult printErrorwindow.open(data.url, "_blank");//console.log(data["url"]);}, function() {console.log(Error);});};});
</script>

tip:遇到一个坑，为什么打印不出来地图？？？？

打印出来：上面的图控制台的地址是打印图纸出来地图的地址，点进去。
没图，啥也没有，以为是代码写错了，但检查了几遍，发现代码没问题。后来我在想，是不是由于，地图还没完全加载出来，就执行了打印，导致打印一个空白的东西。后来我试了一下，把打开写在一个按钮click事件里面。等地图加载出来，再点击打印按钮。一试，果然是这样。确实是地图没加载完成，就执行打印，结果就是打印不出来地图。

粘贴上错误的代码：

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title><!-- 引用在线arcgis api --><link rel="stylesheet" href="https://js.arcgis.com/4.16/esri/themes/light/main.css" /><script src="https://js.arcgis.com/4.16/"></script><!-- 引用在线Jquery --><script src="http://libs.baidu.com/jquery/2.1.4/jquery.min.js"></script><style>html,body,#viewDiv {height: 100%;width: 100%;margin: 0;padding: 0;}</style><script>require(["esri/Map","esri/Basemap","esri/views/MapView","esri/geometry/Extent","esri/tasks/PrintTask","esri/tasks/support/PrintTemplate","esri/tasks/support/PrintParameters","dojo/dom","dojo/on","dojo/domReady!"], function(Map,Basemap,MapView,Extent,PrintTask,PrintTemplate,PrintParameters,dom,on) {var startExtent = new Extent({xmin: 120.236368,ymin: 36.043567,xmax: 120.579018,ymax: 36.196569,spatialReference: {wkid: 4549}});var map = new Map({ //属性：allLayers、ground、layersbasemap: "topo-vector"});var view = new MapView({container: "viewDiv",map: map,zoom: 11,Extent: startExtent,center: [120.369174, 36.097245] // longitude, latitude});var printTask = new PrintTask({url: "http://localhost:6080/arcgis/rest/services/Utilities/PrintingTools/GPServer/Export%20Web%20Map%20Task"});var template = new PrintTemplate({format: "pdf",exportOptions: {dpi: 300},showLabels: true,layout: "a4-portrait",layoutOptions: {titleText: "Warren Wilson College Trees",scalebarUnit: "Miles",authorText: "Sam"}});var params = new PrintParameters({view: view,template: template});printTask.execute(params).then(function(data) {console.log(data["url"]);}, function() {console.log(Error);});});</script>
</head><body><div id="viewDiv"></div>
</body></html>

对view添加on事件。
view.on(“mouse-wheel”, function(event) {
var num = view.scale;
console.log(num);
});
前提：事先在view初始化的时候，添加scale属性，不然获取不到比例尺，

var view = new MapView({
container: “viewDiv”,
map: map,
zoom: 4,
scale: 24000,
center: [15, 65]
});
随着鼠标滚轮滑动，比例尺也变动。

Arcgis Api for JavaScript4.x 打印地图相关推荐

arcgis api for javascript4.18加载天地图服务，并且加载自己的发布的动态地图服务
以arcgis api for javascript4.18 API为例: 遇到几个问题: 1.用户,特别是小白用户,不知道用什么API类来调用各种地图服务. 解决办法: 方法一:正向思考方法参考官 ...
ArcGIS API for Silverlight 实现修改地图上的工程点位置
ArcGIS API for Silverlight 实现修改地图上的工程点位置原文:ArcGIS API for Silverlight 实现修改地图上的工程点位置 #region 处理工程点点击 ...
ArcGIS API for Silverlight部署本地地图服务
ArcGIS API for Silverlight部署本地地图服务首先介绍下我们的开发和部署环境: 部署环境: Windows 7 旗舰版32位操作系统 IIS 6.0 开发环境: Visual ...
ArcGIS API for JavaScript4.x 之加载2D、3D地图
版权声明:本文为博主原创文章,未经博主允许不得转载. https://blog.csdn.net/gisdoer/article/details/81545607 ArcGIS API for Jav ...
ArcGIS API For Silverlight使用在线地图的多种方法总结
本人也正在学习ArcGIS API For Silverlight,希望通过博文和大家相互交流.学习,如有不对请及时指正~ 最近,主要在研究如何将在线地图叠加到Silverlight中,当然没有啥原创 ...
ArcGIS API for JavaScript创建 3D 地图
1.引用ArcGIS API for JavaScript <link rel="stylesheet" href="https://js.arcgis.com/4 ...
使用ArcGIS API for Silverlight + Visifire绘制地图统计图
转载地址:http://www.cnblogs.com/potential/archive/2013/03/19/2966866.html 本文示例用的版本为: Silverlight 5+Visif ...
ArcGIS API for javascript开发笔记 —— 地图打印
前段时间的一个项目用到了地图的打印功能.当时遇到了一个GraphicLayer中TextSymbol汉字打印乱码和文字在地图中过大的问题, 后来经过分析发现,汉字乱码是中文字体的原因,文字太大是由于D ...
arcgis api for js之设置地图范围extent
转自:https://blog.csdn.net/qq_35732147/article/details/79840892

Arcgis Api for JavaScript4.x 打印地图

Arcgis Api for JavaScript4.x 打印地图相关推荐

最新文章

热门文章