地图打印4X 

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
    <title>地图打印</title>


    <link rel="stylesheet" href="https://localhost/arcgis_js_api/library/4.6/esri/css/main.css">
  <script src="https://localhost/arcgis_js_api/library/4.6/init.js"></script>
   <style>
    html, body, #viewDiv {
      padding: 0;
      margin: 0;
      height: 100%;
      width: 100%;
    }
    #button{
    position: fixed;
    top: 10px;
    right: 30px;
    border-radius: 4px;
    }
  </style>

    <script>
        require([
            "esri/layers/MapImageLayer",
            "esri/Map",
            "esri/views/MapView",
            "esri/config",
            "esri/tasks/PrintTask",  
            "esri/tasks/support/PrintTemplate",  
            "esri/tasks/support/PrintParameters",  
            "dojo/dom",
            "dojo/domReady!"
        ], function(MapImageLayer, Map, MapView, esriConfig, PrintTask, PrintTemplate, PrintParameters, dom){
         
            var lyr = new MapImageLayer("https://sms.esrichina.com/server/rest/services/feature/point/MapServer");  //该服务要共享everyone
            var mymap = new Map( {
                //basemap: "osm",
                layers: [lyr],
               
            });
            var view = new MapView({
                map: mymap,
                container: "viewDiv",
                zoom: 6,  
                center: [116.402544,39.915378]
            });
            var button = dom.byId("button");  
            button.onclick = function(){  
                    var printTask = new PrintTask({
                        url:"https://sms.esrichina.com:6443/arcgis/rest/services/Utilities/PrintingTools/GPServer/Export%20Web%20Map%20Task"
                    });  
                    var template = new PrintTemplate({
                        exportOptions: {
                            dpi: 96
                        },
                        format: "pdf",
                        layout: "a3-landscape",
                        layoutOptions: {
                            titleText: "The MAP",
                            authorText: "shaoms"
                        　　copyrightText: "My Company",
                        　　scalebarUnit: "Miles",
                        　　// the following text elements must
                        　　// exist in the print service to appear
                        　　customTextElements: [
                          　　{ "自定义元素": "My description" }
                        ]

                        },
                        preserveScale: false
                    });  
                    var params = new PrintParameters({
                        view: view,
                        template: template
                    });   
                    printTask.execute(params).then(result, errorResult);
                    function result(evt){  
                       console.log(evt);
                        window.open(evt.url,"_blank");  //在新的标签页打开打印连接
                    }
                   function errorResult(err){
                    console.log(err);
                   }
                }  
        });
    </script>

</head>
<body>
<div id="viewDiv"></div>
<button id="button" title="打印">打印</button>
</body>
</html>

 

posted @ 2020-01-02 17:19  恋上微笑的天使  阅读(152)  评论(0)  编辑  收藏  举报