• arcgis api for javascript 学习(六) 地图打印


    1、本文应用arcgis api for javascript对发布的动态地图进行打印,打印的为PDF格式,打印出来如图:

    2、需要特别注意的是:我们在运行代码前,需要打开PrintingTools,如图

    3、并且在启动后,在URL中,需要修改一下,如图:

    4、运行代码,点击打印如图:

    5、代码部分:

    <!DOCTYPE html>
    <html>
    <head>
        <title>地图打印</title>
        <meta http-equiv="content-type" content="text/html;charset=utf-8">
        <meta http-equiv="Access-Control-Allow-Origin" content="*">
        <link rel="stylesheet" href="https://js.arcgis.com/3.29/esri/css/esri.css">
        <script src="https://js.arcgis.com/3.29/"></script>
        <style>
            #map{
                position:relative;
                height:500px;
                100%;
            }
        </style>
    </head>
    <body>
    
    <div id='map'>
    </div>
    <div>
        <input id="Btn" type="button" value="打印地图PDF" />
    </div>
    <script>
        var map,sr,bool = false,initextent,url;
        require([
                    "esri/map",
                    "esri/layers/MapImage",
                    "esri/layers/MapImageLayer",
                    "esri/geometry/Extent",
                    "esri/SpatialReference",
                    "esri/tasks/PrintTask",
                    "esri/tasks/PrintTemplate",
                    "esri/tasks/PrintParameters",
                    "esri/layers/ArcGISDynamicMapServiceLayer",
                    "dojo/domReady!"],
                function (
                        Map,
                        MapImage,
                        MapImageLayer,
                        Extent,
                        SpatialReference,
                        PrintTask,
                        PrintTemplate,
                        PrintParameters,
                        ArcGISDynamicMapServiceLayer) {
                    sr = new SpatialReference(4326)
                    map = new Map("map", {
                        basemap:"satellite"
                    });
                    //调用动态地图服务
                    var DyLayer=new ArcGISDynamicMapServiceLayer('http://localhost:6080/arcgis/rest/services/dtchina/MapServer');
                    map.addLayer(DyLayer);
                    var btn=document.getElementById("Btn");
                    btn.onclick=function(){
                        btn.setAttribute("disabled","true");
                        btn.value="正在输出...";
                        var printMap = new PrintTask("http://localhost:6080/arcgis/rest/services/Utilities/PrintingTools/GPServer/Export%20Web%20Map%20Task");
                        //创建地图打印模版
                        var template = new PrintTemplate();
                        var params = new PrintParameters();
                        //输出图片的空间参考
                        printMap.outSpatialReference = map.SpatialReference
                        //打印图片的各种参数
                        template.exportOptions = {
                             850,
                            height: 650,
                            dpi: 96
                        };
                        template.format = "PDF";
                        template.layout = "MAP_ONLY";
                        params.map = map;
                        params.template = template;
                        printMap.execute(params, function(result){
                            console.log(result);
                            if (result != null) {
                                (function(){
                                    btn.disabled=false;
                                    btn.value="打印地图PDF";
                                })()
                                window.open(result.url);
                            }
                        })
                    }
                });
    </script>
    </body>
    </html>
    

      

  • 相关阅读:
    centos崩溃后如何修复
    乘法是啥
    接上篇—用spring注入DBbean,并使用maven管理
    技术产生价值
    技术?
    世界的本质是啥呢
    java-web 登陆功能
    对java的理解
    数学的历史
    使用jmeter测试接口
  • 原文地址:https://www.cnblogs.com/yxd000/p/11251056.html
Copyright © 2020-2023  润新知