ArcGIS API For JS 打印地图

网上有不少示例就不再详细赘述了。

可以参考:

官方示例:https://developers.arcgis.com/javascript/3/jssamples/#printing

博主示例:https://www.cnblogs.com/giserhome/p/6972438.html


开发环境:ArcMap10.3,ArcGIS Server10.3,Java后台(proxy.jsp),API3.18

proxy文件下载地址:https://github.com/Esri/resource-proxy/releases,下载解压后能分别看到适用.NET、Java、PHP的文件。(有的博主说V1.0支持10.1,V1.1.0支持10.2和10.3,我下的1.0在Server10.3上也能用。。。)



首先启动本地Server提供的打印工具

登录ArcGIS Server站点,找到“服务”-“Utilities”文件夹下PrintingTools工具,这是Server自带的,一般是停止状态,点击启动。


启动后,与平常服务类似,进入REST URL,可以看到如下


点击获得本地打印地图的服务URL:

http://localhost:6080/arcgis/rest/services/Utilities/PrintingTools/GPServer/Export%20Web%20Map%20Task


功能主要引用PrintTask,PrintTemplate,PrintParameters(Print的例子官网已经提供)

主要代码如下:

var printUrl ="http://localhost:6080/arcgis/rest/services/Utilities/PrintingTools/GPServer/Export%20Web%20Map%20Task";
var printTask = new PrintTask(printUrl);

var layout = "A4 Landscape";
var label = "Landscape (PDF)";
var format =  "gif"; 
var options = { 
		legendLayers: [],
		scalebarUnit: "Miles",
		titleText:  "The map"
		//authorText:"zyy ",
		//copyrightText:"copyrightText"
		};
var templates = new PrintTemplate();
templates.layout = layout;
templates.label = label;                    
templates.format = format;
templates.layoutOptions = options;
var params = new PrintParameters();  
params.map = map;  
params.template = templates;
printTask.execute(params, function(evt){  
	var printWindow = window.open();
	printWindow.document.write(
	"<html>"+
	"<head><meta chartset='utf-8'></head>"+
	"<body style='margin:0;width:100%;height:100%;'>"+
		"<div id='printbtn' style='position:absolute;top:10px;left:60px;'>"+
			"<input type='button' οnclick='wprint()' value='打印'/></div>"+
		"<div>"+
		"<img id='img1' src=''></div>"+
	"<script>"+
	"function wprint(){"+
		"document.getElementById('printbtn').style.display='none';"+
		"window.print();"+//连接打印机打印
		"document.getElementById('printbtn').style.display='block';}\n"+
	"document.getElementById('img1').οnlοad=function(e){e.stopPropagation();wprint();window.close();}\n"+
	"document.getElementById('img1').src='"+evt.url+"';"+
	"</script></body></html>");
	printWindow.document.close();
	printWindow.focus();



运行一下如果提示“ esri.config.defaults.io.proxyUrl 尚未进行设置。如果向启用了 CORS 的服务器发出请求,请将域推送到 esri.config.defaults.io.corsEnabledServers。”则需要设置代理。

出现该问题的原因可以参考:

http://blog.csdn.net/wpz0713/article/details/50245041

http://blog.csdn.net/qingyimengwu/article/details/42982057

个人理解是打印功能需要向Server发送请求,图形较复杂或较大同样需要传递的字符串较多,收到普通传输上限限制无法传递。

解决方法:

  这里就用到了上面所说的proxy文件,在当前js代码中引用"esri/config"类,

在创建Map前先引用proxy.jsp文件,如下

esriConfig.defaults.io.proxyUrl = contextPath+"/map/proxy.jsp";
esriConfig.defaults.io.alwaysUseProxy = false;

这样就解决了,看上面的博客还得设置HashMap<String,String>、ServerUrl什么的,我也没设置,也可能凑巧能运行了。


之前看官网和博客的Demo,有用到官方提供的打印Url如下:

“https://sampleserver6.arcgisonline.com/arcgis/rest/services/Utilities/PrintingTools/GPServer/Export%20Web%20Map%20Task”

实际运行起来会出现如下错误:


如果出错就用本地的打印服务吧。


实际运行效果:


上图中底层的地图就是通常看到的Map,触发打印事件后,可以看到PrintTask.execute回调参数evt.url就是一张打印的效果图。

打断点查看:


由此我们可以推测,API向Server的PrintingTools服务发送请求,服务将处理结果即图片(文件格式参考PrintTemplate.format)。

发布了27 篇原创文章 · 获赞 29 · 访问量 13万+

猜你喜欢

转载自blog.csdn.net/rrrrroy_Ha/article/details/79303904