前面我寫(xiě)過(guò)關(guān)于利用arcgis api for js打印地圖的，但是打印地圖服務(wù)都是基于arcgis server發(fā)布的，arcgis api加載在線地圖，比如天地圖、百度地圖、高德地圖等，底圖都是打印不出來(lái)的；這個(gè)在GIS之家群里也有很多giser問(wèn)過(guò)，我一直也沒(méi)抽出時(shí)間好好整理研究，碰巧一個(gè)師妹遇到這種打印問(wèn)題并且解決了，于是我向她邀稿，才有這里的這篇文章。本文是‘猴妹‘師妹授權(quán)給我來(lái)發(fā)表的，介紹都是師妹的研究成果，在此，非常感謝‘猴妹‘師妹。
記錄了通過(guò)ArcGIS的PringTask進(jìn)行地圖打印，以及借助html2canvas實(shí)現(xiàn)屏幕截圖的方法。兩個(gè)方法各有適用的情景。過(guò)程中涉及的相關(guān)資源和問(wèn)題給出鏈接，自行查看。
1.需求背景
地圖打印，這是地圖應(yīng)用系統(tǒng)的基本工具了。多數(shù)使用者都希望能夠?qū)⒌貓D，連帶著查詢結(jié)果、統(tǒng)計(jì)結(jié)果以及自己繪制的各種圖形輸出，將其保存到本地，以供他用。本文描述兩類情況：一類是通過(guò)ArcGIS Server發(fā)布的地圖服務(wù)，一類是調(diào)用其他數(shù)據(jù)源的地圖切片形成的地圖。
2.通過(guò)ArcGIS Server發(fā)布的地圖服務(wù)
這個(gè)網(wǎng)上很多例子啦，官方API也有詳細(xì)例子。上個(gè)鏈接：https://developers.arcgis.com/javascript/3/jssamples/#search/PrintTask
這個(gè)的思路就是通過(guò)printTask執(zhí)行一個(gè)打印任務(wù)。截一段代碼給大伙看看：
arcgisPrint=function(){
var printTask = new PrintTask("http://172.28.1.131:6080/arcgis/rest/services/Utilities/PrintingTools/GPServer/Export%20Web%20Map%20Task");
var template = new PrintTemplate();
template.layoutOptions = {
"authorText": "paq",
"copyrightText": "copyright info here",
"legendLayers": [],
"titleText": "Pool Permits",
"scalebarUnit": "Miles"
};
template.exportOptions = {
width: 800,
height: 600,
dpi: Number(90)
};
template.format = "png32";
template.layout = "MAP_ONLY";
template.preserveScale = false;
var params = new PrintParameters();
params.map = map;
params.template = template;
printTask.execute(params, function (evt) {
window.open(evt.url, "_blank");
});
};
這種方法的打印對(duì)于ArcGIS Server發(fā)布的服務(wù)來(lái)講方便好用，但是如果是調(diào)用其他地方的切片（比如通過(guò)繼承WebTiledLayer調(diào)用天地圖、百度地圖），那么輸出的會(huì)是空白。如圖，底圖是天地圖，中國(guó)范圍內(nèi)疊加了一個(gè)MapServer方便區(qū)別：
用PrintTask打印出來(lái)是這個(gè)樣子，底圖天地圖是空白的：
/* *題外話：
*如何通過(guò)ArcGIS JS API調(diào)用百度地圖和天地圖自行百度，提供幾個(gè)鏈接：
*[http://www.cnblogs.com/angelapaq/p/7595831.html](http://www.cnblogs.com/angelapaq/p/7595831.html)
*[https://blog.csdn.net/oldmonkeyyu_s/article/details/53710779](https://blog.csdn.net/oldmonkeyyu_s/article/details/53710779)
*總結(jié)調(diào)用切片三點(diǎn)：確定好級(jí)別、分辨率、比例尺；調(diào)整好圖片大小、切圖原點(diǎn)；把行列號(hào)和層級(jí)號(hào)拼成能夠訪問(wèn)的URL，這些做好了，不管百度谷歌還是高德超圖都是一個(gè)道理。
**/
3.借助html2canvas實(shí)現(xiàn)屏幕截圖
思考之后，決定換方法，不用ArcGIS提供的方法，轉(zhuǎn)向通用的屏幕輸出，網(wǎng)上有很多關(guān)于html2canvas截圖插件的使用，我們也拿來(lái)一用。
html2canvas官方網(wǎng)站: http://html2canvas.hertzen.com/
這個(gè)插件的使用詳情可自行百度，我這里貼出自己的代碼，大致流程是：確定截圖區(qū)域，克隆一份，把不需要截圖的dom移除，調(diào)用插件把html片段轉(zhuǎn)成canvas，輸出。
canvasPrint=function () {
var targetDom = $("#map");
//克隆截圖區(qū)域
var copyDom = targetDom.clone();
copyDom.width(targetDom.width() + "px");
copyDom.height(targetDom.height() + "px");
copyDom.attr("id", "copyDom");
$("body").append(copyDom);
//移除不需要截圖的區(qū)域
$(".base-map").remove();
var pathName = document.location.pathname;
var ctxPath = pathName.substring(1, pathName.substr(1).indexOf('/') + 1);
html2canvas(copyDom[0], {
useCORS: true,
imageTimeout:0
//, proxy: "/" + ctxPath + "/proxy/proxyScreenShot"
}).then(function (canvas) {
var url = canvas.toDataURL();
//創(chuàng)建下載a標(biāo)簽
var a = document.createElement("a");
a.setAttribute("id", "download");
document.body.appendChild(a);
//以下代碼為下載此圖片功能
var triggerDownload = $("#download").attr("href", url).attr("download", "img.png");
triggerDownload[0].click();
//移除下載a標(biāo)簽
document.body.removeChild(a);
//克隆DOM刪除
copyDom.remove();
});
}
按理說(shuō)，這樣就可以輸出了，奈何我們的那些個(gè)小切片，不在一個(gè)域，跨域了，跨域了。找了各種方法，發(fā)現(xiàn)通過(guò)代理訪問(wèn)比較靠譜。以下是操作步驟：
① 跨域，首先想到ArcGIS提供的跨域解決方法，詳情戳鏈接，參照這個(gè)方法進(jìn)行配置即可：
https://blog.csdn.net/wpz0713/article/details/50245041
② 在繼承WebTiledLayer的getTileUrl方法時(shí)，返回圖片URL前加上代理地址，例如：
<pre style="margin: 0px; padding: 0px; white-space: pre-wrap; word-wrap: break-word; font-family: "Courier New" !important; font-size: 12px !important;">getTileUrl: function (level, row, col) { return "http://192.168.0.117:8080/Java/proxy.jsp?"+"http://t" + row % 8 + ".tianditu.cn/cva_c/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=cva&STYLE=default&TILEMATRIXSET=c&TILEMATRIX=" + level + "&TILEROW=" + row + "&TILECOL=" + col + "&FORMAT=tiles";
}</pre>
現(xiàn)在來(lái)看看結(jié)果是什么：
看來(lái)，這個(gè)跨域方法并沒(méi)有達(dá)到我們想要的效果，那么就改造吧，仔細(xì)看跨域的那個(gè)proxy.jsp，在fetchAndPassBackToClient方法內(nèi)190行添加以下一行代碼，允許跨域。
clientResponse.setHeader("Access-Control-Allow-Origin","")*
好了，大功告成，下圖是截屏輸出的圖片：
另外，在簡(jiǎn)單補(bǔ)一補(bǔ)跨域和代理的問(wèn)題：https://www.cnblogs.com/fanyx/p/5775939.html
'猴妹'師妹技術(shù)交流QQ：446412700
GIS之家新博客系列發(fā)布更新在GIS之家網(wǎng)站，歡迎關(guān)注收藏：GIS之家網(wǎng)站
GIS之家作品：GIS之家
GIS之家交流咨詢：咨詢模式
