arcgis api for javascipt 输出图片

地图模板制作-发布-gpurl调用

window.open可以直接打开url链接。

saveas可以另存,仅支持ie浏览器

 

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width,user-scalable=no">

<meta name="viewport"
    content="initial-scale=1, maximum-scale=1,user-scalable=no">
<title>Maps Toolbar</title>

<link rel="stylesheet"
    href="https://js.arcgis.com/3.16/dijit/themes/nihilo/nihilo.css">
<link rel="stylesheet"
    href="https://js.arcgis.com/3.16/esri/css/esri.css">
<style>
html,body,#mainWindow {
    font-family: sans-serif;
    height: 100%;
    width: 100%;
}

html,body {
    margin: 0;
    padding: 0;
}

#header {
    height: 80px;
    overflow: auto;
    padding: 0.5em;
}
</style>
<script type="text/javascript" src="../js/jquery.min.js"></script>
<script src="https://js.arcgis.com/3.16/"></script>
<script>
    
      var map, toolbar, symbol, geomTask;
      var app = {};
      require([
        "esri/map",
        "esri/tasks/LegendLayer",
        "esri/layers/ArcGISDynamicMapServiceLayer",
        "esri/tasks/PrintTask",
        "esri/layers/FeatureLayer",
        "esri/tasks/PrintParameters",
         "esri/tasks/PrintTemplate",
             "esri/config",
         "esri/dijit/Print",
        "esri/toolbars/draw",
        "esri/graphic",
        "dojo/dom",
        "esri/symbols/SimpleMarkerSymbol",
        "esri/symbols/SimpleLineSymbol",
        "esri/symbols/SimpleFillSymbol",

        "dojo/parser", "dijit/registry",

        "dijit/layout/BorderContainer", "dijit/layout/ContentPane",
        "dijit/form/Button", "dijit/WidgetSet", "dojo/domReady!"
      ], function(
        Map,LegendLayer, ArcGISDynamicMapServiceLayer,PrintTask,FeatureLayer,PrintParameters,PrintTemplate,esriConfig,Print, Draw, Graphic,dom,
        SimpleMarkerSymbol, SimpleLineSymbol, SimpleFillSymbol,
        parser, registry
      ) {
        parser.parse();
        //esriConfig.defaults.io.proxyUrl = "/proxy/";
         

    esriConfig.defaults.io.proxyUrl = "http://localhost/java/proxy.jsp" ;
    esriConfig.defaults.io.alwaysUseProxy = true;
        map = new Map("map", {
          basemap: "streets",    
          center: [-15.469, 36.428],
          zoom: 3
        });
        app.map=map;

       var layerFeatureAdd=new ArcGISDynamicMapServiceLayer("http://10.12.12.24:6080/arcgis/rest/services/tjszyMap/LouDou/MapServer");
       layerFeatureAdd.id="testlegend";
        map.addLayer(layerFeatureAdd);
        var fbt=new ArcGISDynamicMapServiceLayer("http://10.12.12.24:6080/arcgis/rest/services/tjszyMap/YinHuangShuiLiang/MapServer");
        fbt.id="fbttest";
        map.addLayer(fbt);
        console.log(layerFeatureAdd);
        map.on("load", createToolbar);
         app.printer = new Print({
          map: map,
          url: "http://localhost:6080/arcgis/rest/services/Utilities/PrintingTools/GPServer/Export%20Web%20Map%20Task"
        }, dom.byId("printButton"));
        app.printer.startup();
        var legendtest=new Array();
        var lelayer=new LegendLayer();
        lelayer.layerId="testlegend";
        lelayer.subLayerIds =[1];
         var lelayer2=new LegendLayer();
        lelayer2.layerId="fbttest";
    legendtest.push(lelayer);
    legendtest.push(lelayer2);
     console.log(legendtest);
        var template=new PrintTemplate();
             template.exportOptions={
                  width: 1920,
                  height: 1080,
                  dpi: 96
                };
           template.format="jpg";
           var OtherInfo={};
           OtherInfo.authormm="徐茂景";
           OtherInfo.ttt="122221";
         template.label="label+testLAble";  
             template.layout="A4 Landscape_copy";
               template.layoutOptions={titleText:"titleText测试",legendLayers:legendtest,authorText:"authorText测试",copyrightText:"copyrightText测试",scalebarUnit:"Kilometers",customTextElements:OtherInfo};  
             template.preserveScale =false;
             template.showAttribution =false;
       var printpara=new PrintParameters();
       printpara.map=map;
       printpara.template=template;
       var printTask=new PrintTask("http://localhost:6080/arcgis/rest/services/GP/ExportWebMap/GPServer/Export%20Web%20Map",printpara);
        // loop through all dijits, connect onClick event
        // listeners for buttons to activate drawing tools
        registry.forEach(function(d) {
          // d is a reference to a dijit
          // could be a layout container or a button
          if ( d.declaredClass === "dijit.form.Button" ) {
            d.on("click", activateTool);
          }
        });
       document.getElementById('testPrint').onclick = function(e){
         printTask.execute(printpara, printResult);
         function printResult(e){
         
        // window.open(e.url)
        SaveAs5(e.url);
         console.log(e.url);
         }
       
       }
       
       function SaveAs5(imgURL)
{
var oPop = window.open(imgURL,"","width=1, height=1, top=5000, left=5000");
for(; oPop.document.readyState != "complete"; )
{
if (oPop.document.readyState == "complete")break;
}
oPop.document.execCommand("SaveAs");
oPop.close();
}
        function activateTool() {
        alert("tesr");
          var tool = this.label.toUpperCase().replace(/ /g, "_");
          console.log(tool);
          toolbar.activate(Draw[tool]);
        //  map.hideZoomSlider();
        }
        
        function createToolbar(themap) {
          toolbar = new Draw(map);
          toolbar.on("draw-end", addToMap);
        }

        function addToMap(evt) {
          var symbol;
          toolbar.deactivate();
          map.showZoomSlider();
          switch (evt.geometry.type) {
            case "point":
            case "multipoint":
              symbol = new SimpleMarkerSymbol();
              break;
            case "polyline":
              symbol = new SimpleLineSymbol();
              break;
            default:
              symbol = new SimpleFillSymbol();
              break;
          }
          var graphic = new Graphic(evt.geometry, symbol);
          map.graphics.add(graphic);
        }
      });
    </script>
</head>
<body class="nihilo">

    <div id="mainWindow" data-dojo-type="dijit/layout/BorderContainer"
        data-dojo-props="design:'headline'">
        <div id="header" data-dojo-type="dijit/layout/ContentPane"
            data-dojo-props="region:'top'">
            <span>Draw:<br /> </span>
            <button data-dojo-type="dijit/form/Button">Point</button>
            <button data-dojo-type="dijit/form/Button">Multi Point</button>
            <button data-dojo-type="dijit/form/Button">Line</button>
            <button data-dojo-type="dijit/form/Button">Polyline</button>
            <button data-dojo-type="dijit/form/Button">Polygon</button>
            <button data-dojo-type="dijit/form/Button">Freehand Polyline</button>
            <button data-dojo-type="dijit/form/Button">Freehand Polygon</button>

            <button data-dojo-type="dijit/form/Button">Arrow</button>
            <button data-dojo-type="dijit/form/Button">Triangle</button>
            <button data-dojo-type="dijit/form/Button">Circle</button>
            <button data-dojo-type="dijit/form/Button">Ellipse</button>
            <button id="testPrint">打印</button>
            <div id="printButton" οnclick="clickTestPrint()"></div>
        </div>
        <div id="map" data-dojo-type="dijit/layout/ContentPane"
            data-dojo-props="region:'center'"></div>
    </div>

</body>
</html>

转载于:https://www.cnblogs.com/gison/p/5477667.html

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值