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" onclick="clickTestPrint()"></div>
</div>
<div id="map" data-dojo-type="dijit/layout/ContentPane"
data-dojo-props="region:'center'"></div>
</div>
</body>
</html>
arcgis api for javascipt 输出图片的更多相关文章
- arcgis api for javascipt 加载天地图、百度地图
写在前面的话: 1.百度地图是自己定义的坐标系统,wkid=102100.百度地图数据是加密的产物.下文将附上百度坐标与WGS84,谷歌等坐标系统转换方法(地理-地理),此方法并未亲测,据说准 2.百 ...
- ArcGIS API for Silverlight之配准JPG图片地图文字倾斜解决方案
原文:ArcGIS API for Silverlight之配准JPG图片地图文字倾斜解决方案 根据实际JPG图片进行配准后,发布的地图,利用ArcGIS API for Silverlight在网页 ...
- arcgis api for javascript 学习（七） 调用发布地图信息，并将地图属性信息输出到Excel表格---进阶版
我们在arcgis api for javascript 学习(三)已经学习到了关于调用地图信息进行属性输出的问题,不过通过代码我们实现后会发现还是有一些小瑕疵的,比如我们只能单个数据属性的输出,如果 ...
- arcgis api 4.x for js 自定义叠加图片图层实现地图叠加图片展示（附源码下载）
前言 关于本篇功能实现用到的 api 涉及类看不懂的,请参照 esri 官网的 arcgis api 4.x for js:esri 官网 api,里面详细的介绍 arcgis api 4.x 各个类 ...
- arcgis api for javascript 学习（三） 调用发布地图信息，并将地图属性信息输出到Excel表中
吐血推荐:网上搜了很久关于webgis地图属性表输出到Excel表,并没能找到相关有价值的信息,在小白面前,这就是一脸懵x啊!网上要么是关于前端如何在页面上直接导出excel,和webgis半毛钱关系 ...
- ArcGIS API for Silverlight 点沿着线流动
原文:ArcGIS API for Silverlight 点沿着线流动 概述 前段时间做了一个项目,要求是有一些电力输送线,电力输送线或者石油管道都是有流动方向的,用户想做一个动态效果来模拟电力的输 ...
- ArcGIS API for Silverlight开发入门
你用上3G手机了吗?你可能会说,我就是喜欢用nokia1100,ABCDEFG跟我 都没关系.但你不能否认3G是一种趋势,最终我们每个人都会被包裹在3G网络中.1100也不是一成不变,没准哪天为了打击 ...
- arcgis api for js入门开发系列二十打印地图的那些事
前面我写过关于利用arcgis api for js打印地图的,但是打印地图服务都是基于arcgis server发布的,arcgis api加载在线地图,比如天地图.百度地图.高德地图等,底图都是打 ...
- arcgis api for javascript 学习（六） 地图打印
1.本文应用arcgis api for javascript对发布的动态地图进行打印,打印的为PDF格式,打印出来如图: 2.需要特别注意的是:我们在运行代码前,需要打开PrintingTools, ...
随机推荐
- 【leetcode】959. Regions Cut By Slashes
题目如下: In a N x N grid composed of 1 x 1 squares, each 1 x 1 square consists of a /, \, or blank spac ...
- 数组对象用map修改键名
用vue组件需要使用的数据格式和后台返回的不一样 console.log(res); this.optionsEp = res.map(item => { return { value: ite ...
- XCode升级之后（7-->8），控制打印问题（打印一些烂七八糟的东西）解决办法
1. 2. 3. 搞定!
- TxtUtil
/** *包名:cn.yufu.utils *描述:package cn.yufu.utils; */ package cn.yufu.utils; import java.io.BufferedRe ...
- 在delphi中执行javascript代码
有时做项目难免用到代码交叉调用,delphi中执行js就是一种,两种方法可用: 一.使用webbrower,比较麻烦 二.使用ScriptControl,简单方便: 1.首先 uses ComObj; ...
- homebrew -- mac os 系统下的 apt-get、yum
linux下有很方便的包管理器如:apt-get.yum,mac下也有类似的工具:Homebrew 和 Fink.MacPort.Flink是直接编译好的二进制包,MacPorts是下载所有依赖库的源 ...
- 学 Win32 汇编[21] - 传送指令: MOV、LEA、XCHG、XLATB、XLAT、MOVZX、MOVSX
汇编指令的一般性要求: 1.两个操作数的尺寸必须一致; 2.操作数不能同为内存. MOV(Move): 最常用的数据传送指令 ;该指令不影响 EFlags ;指令格式: (其中的 r.m.i 分别表示 ...
- [bzoj2729][HNOI2012]排队 题解 (排列组合 高精)
Description 某中学有 n 名男同学,m 名女同学和两名老师要排队参加体检.他们排成一条直线,并且任意两名女同学不能相邻,两名老师也不能相邻,那么一共有多少种排法呢?(注意:任意两个人都是不 ...
- php开发面试题---游戏面向对象设计与分析实例
php开发面试题---游戏面向对象设计与分析实例 一.总结 一句话总结: 不要光空想,多看几个实例就知道自己的游戏该怎么设计了 根据实例去理解面向对象编程的的六大原则 1.英雄种类分别有:战士.法师. ...
- yang文件语法格式
前言 NETCONF(Network Configuration Protocol),该协议的配置功能非常强大,同时兼顾监控和故障管理,安全验证和访问控制,得到业界的一致认可,被广泛用来配置网络 NE ...