ArcGIS API for JavaScript 打印

時間 2019-11-16

標籤 arcgis api javascript 打印欄目 JavaScript 简体版

原文原文鏈接

1、環境
ArcGIS Server 10.2
ArcGIS API for JavaScript 3.21
2、問題目標描述
瞭解：ArcGIS API for JavaScript的打印，及相關屬性設置詳情
3、過程css

ArcMap中按需求新增Template（搜索和查看help），保存在Server安裝目錄下html

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>

4、待驗證web

複雜符號是否能顯示、打印範圍是否能框選；完成後增長代碼

5、遇到的一些問題及解決過程json

一、打印不響應
(1) 多是複雜符號，我未找到方法，目前是修改爲簡單符號。找到後補上
(2) Symbol以下設置時不響應windows

var circleSymb1 =new SimpleFillSymbol().setColor(null).outline.setColor("red");

修改成以下可行：app

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])
  );

6、參考網址dom

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。