一、环境
ArcGIS Server 10.2
ArcGIS API for JavaScript 3.21
二、问题目标描述
了解:ArcGIS API for JavaScript的打印,及相关属性设置详情
三、过程
-
ArcMap中按需求新增Template(搜索和查看help),保存在Server安装目录下
D:\Program Files\ArcGIS\Server\Templates\ExportWebMapTemplates
- 发布为GP,详见:发布打印服务官网Help。建议将上面的ExportWebMapTemplates注册为ArcGIS Server 托管的文件夹,以实现通过更新模板MXD,更新打印布局
- 前端调用,传参数,代码如下
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no">
<title>Print templates with esri.request</title>
<link rel="stylesheet" href="https://js.arcgis.com/3.21/dijit/themes/tundra/tundra.css">
<link rel="stylesheet" href="https://js.arcgis.com/3.21/esri/css/esri.css">
<style>
html, body { height: 100%; width: 100%; margin: 0; padding: 0; }
#map{ margin: 0; padding: 0; }
#feedback {
background: #fff;
color: #000;
position: absolute;
font-family: arial;
height: auto;
right: 20px;
margin: 5px;
padding: 10px;
top: 20px;
width: 300px;
z-index: 40;
}
#feedback a {
border-bottom: 1px solid #888;
color: #444;
text-decoration: none;
}
#feedback a:hover, #feedback a:active, #feedback a:visited {
border: none;
color: #444;
text-decoration: none;
}
</style>
<script src="https://js.arcgis.com/3.21/"></script>
<script>
var app = {};
require([
"esri/map", "esri/layers/FeatureLayer",
"esri/renderers/SimpleRenderer","esri/symbols/SimpleLineSymbol",
"esri/Color",
"esri/dijit/Print", "esri/tasks/PrintTemplate",
"esri/request", "esri/config",
"dojo/_base/array", "dojo/dom", "dojo/parser",
"dijit/layout/BorderContainer", "dijit/layout/ContentPane", "dojo/domReady!"
], function(
Map, FeatureLayer,
SimpleRenderer,SimpleLineSymbol,
Color,
Print, PrintTemplate,
esriRequest, esriConfig,
arrayUtils, dom, parser
) {
parser.parse();
app.printUrl = "http://localhost:6080/arcgis/rest/services/ISOA3MapPrint/GPServer/Export%20Web%20Map";//自己发布的GP
//app.printUrl ="http://localhost:6080/arcgis/rest/services/Utilities/PrintingTools/GPServer/Export%20Web%20Map%20Task";//系统自带的
app.map = new esri.Map("map", {
});
var permitUrl = "http://localhost:6080/arcgis/rest/services/%E6%B5%8B%E8%AF%95%E6%95%B0%E6%8D%AE_%E6%9E%84%E9%80%A0%E5%9B%BE/MapServer/";
//测试是否能控制图层符号的打印
var lineSymbol = new SimpleLineSymbol().setColor(new Color([0,0,0,0.5])).setWidth(2);
// add graphics for pools with permits
for (var i = 0; i < 3; i++) {
var poolFeatureLayer = new FeatureLayer(permitUrl+i, {
"mode": FeatureLayer.MODE_SNAPSHOT
});
poolFeatureLayer.id=["构造线","断层线","含油范围"][i];//测试能否控制Lengend中的图层名
if(i===0){
poolFeatureLayer.setRenderer(new SimpleRenderer(lineSymbol));//测试控制图层符号
}
app.map.addLayer(poolFeatureLayer);
}
// get print templates from the export web map task
var printInfo = esriRequest({
"url": app.printUrl,
"content": { "f": "json" }
});
printInfo.then(handlePrintInfo, handleError);
function handlePrintInfo(resp) {
var layoutTemplate, templateNames, mapOnlyIndex, templates;
layoutTemplate = arrayUtils.filter(resp.parameters, function(param, idx) {
return param.name === "Layout_Template";
});
if ( layoutTemplate.length === 0 ) {
console.log("print service parameters name for templates must be \"Layout_Template\"");
return;
}
templateNames = layoutTemplate[0].choiceList;
// remove the MAP_ONLY template then add it to the end of the list of templates
mapOnlyIndex = arrayUtils.indexOf(templateNames, "MAP_ONLY");
if ( mapOnlyIndex > -1 ) {
var mapOnly = templateNames.splice(mapOnlyIndex, mapOnlyIndex + 1)[0];
templateNames.push(mapOnly);
}
// create a print template for each choice
templates = arrayUtils.map(templateNames, function(ch) {
var plate = new PrintTemplate();
plate.layout = plate.label = ch;
plate.format = "PDF";
plate.layoutOptions = {
"titleText": "**油田J<SUB>2</SUB>x油藏顶面构造井位图",//标题<SUB>2</SUB>下标,SUP上标
"scalebarUnit": "Kilometers",//比例尺单位
"authorText":"**石油勘探开发研究院",//作者信息
"date saved":"二零一七年九月",//自定义Dynamic Text,不起效果
"RQ": "二零一七年九月",//自定义日期,不起效果
//"legendLayers": [], //默认所有图层都添加
"customTextElements":[//自定义的文本
{"RQ": "二\n零\n一\n七\n年\n九\n月"},//换行
{"KTKFYJY": "**\n勘\n探\n开\n发\n研\n究\n院"},
{"ZZXX":"**石油勘探开发研究院 绘图:Higer 审核:Hige 技术负责:Hige 单位负责:Hige "}]
};
return plate;
});
// create the print dijit
app.printer = new Print({
"map": app.map,
"templates": templates,
url: app.printUrl
}, dom.byId("print_button"));
app.printer.startup();
}
function handleError(err) {
console.log("Something broke: ", err);
}
});
</script>
</head>
<body class="tundra">
<div data-dojo-type="dijit/layout/BorderContainer"
data-dojo-props="design:'headline',gutters:false"
style="width: 100%; height: 100%; margin: 0;">
<div id="map"
data-dojo-type="dijit/layout/ContentPane"
data-dojo-props="region:'center'">
<div id="feedback" class="shadow">
<div id="print_button"></div>
</div>
</div>
</div>
</body>
</html>
四、待验证
复杂符号是否能显示、打印范围是否能框选;完成后增加代码
五、遇到的一些问题及解决过程
1、打印不响应
(1) 可能是复杂符号,我未找到方法,目前是修改成简单符号。找到后补上
(2) Symbol如下设置时不响应
var circleSymb1 =new SimpleFillSymbol().setColor(null).outline.setColor("red");
修改为如下可行:
var circleSymb1 = new SimpleFillSymbol(SimpleFillSymbol.STYLE_NULL,
new SimpleLineSymbol(SimpleLineSymbol.STYLE_SOLID,
new Color([255,0,0]), 2),new Color([255,0,0,0.25])
);
六、参考网址