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, ...
随机推荐
- 基于SpringBoot的花里胡哨配置
花里胡哨的配置 记录一下流行框架的一些常用配置 lomback配置文件 <?xml version="1.0" encoding="UTF-8"?> ...
- Yii2的一些问题
Yii2中删除能不能串着用 Yii2中find.findAll有什么区别 Yii2中User::findOne($id)和User::find->where(['id'=>1])-> ...
- 「NOI2018」屠龙勇士 解题报告
「NOI2018」屠龙勇士 首先对于每个龙用哪个剑砍,我们可以用set随便模拟一下得到. 然后求出拿这个剑砍这条龙的答案 \[ atk_ix-p_iy=a_i \] 其中\(atk_i\)是砍第\(i ...
- python之-sqlite3
在这些 URL 中,hostname 表示 MySQL 服务所在的主机,可以是本地主机(localhost),也可以是远程服务器.数据库服务器上可以托管多个数据库,因此 database 表示要使用的 ...
- Guava EventBus集成spring
EventBus 不是通用的消息系统,也不是用来做进程间的通信的,而是在进程内,用于解耦两段直接调用的业务逻辑: 1.代码结构 event:eventbus中流转的事件(消息),包结构按照业务模块在细 ...
- Java方法中形参能否改变实参
前几天学习了java中的参数传递机制,总结了一些知识点: 1·参数类型为基本数据类型:整型:byte,short,int,long ,浮点型:float,double ,字符型:char ,布尔型:b ...
- PAT_A1055#The World's Richest
Source: PAT A1055 The World's Richest (25 分) Description: Forbes magazine publishes every year its l ...
- mysql优化1：建表原则
建表三大原则: 定长和变长分离 常用字段和不常用字段分离 使用冗余字段或冗余表 1.定长与变长分离 如 id int,占4个字节,char(4)占4个字符长度,也是定长,time 即每一个单元值占的字 ...
- XStream环境设置
为Windows 2000/XP设置路径: 假设安装在c:Program Filesjavajdk目录: 在“我的电脑”右键单击并选择“属性”. 在“高级”选项卡下单击“环境变量”按钮. 现在,改变“ ...
- 高级UI晋升之常用View（三）下篇
更多Android高级架构进阶视频学习请点击:https://space.bilibili.com/474380680本篇文章将从WebView来介绍常用View: 一.WebView介绍 Andro ...