ArcGIS API for JavaScript 打印

一、环境
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])
  );

六、参考网址

ArcGIS API for JavaScript 打印

相关推荐