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, ...
随机推荐
- 练习 |跟着Python达人
[学习Python都是用来干嘛的?] 朱卫军 数据分析师 NEV行业 python那些事儿众号主 网址 https://www.zhihu.com/question/34098079/answer/8 ...
- 操作系统之IO管理
IO系统结构 设备的分类 按数据组织分 块设备: 信息的存取总是以数据块为单位. 它属于有结构设备,如磁盘等. 磁盘设备的基本特征是传输速率较高,以及可寻址,即对它可随机地读/写任一块. 字符设备: ...
- fastDFS配置文件 fdfs_client.conf
# connect timeout in seconds# default value is 30sconnect_timeout=30 # network timeout in seconds# d ...
- 首次公开！单日600PB的计算力--阿里巴巴EB级大数据平台的进击
MaxCompute作为阿里巴巴的主力计算平台,在2018年的双11中,再次不负众望,经受住了双11期间海量数据和高并发量的考验.为集团的各条业务线提供了强劲的计算力,不愧是为阿里巴巴历年双11输送超 ...
- bzoj 2561
传送门:http://www.lydsy.com/JudgeOnline/problem.php?id=2561 考虑做mst的时候,什么时候这条边不在这棵mst上呢? 就是比他小的权值的边讲这条边的 ...
- Python100天打卡-Day10
实现动画效果要实现动画效果,本身的原理也非常简单,就是将不连续的图片连续的播放,只要每秒钟达到了一定的帧数,那么就可以做出比较流畅的动画效果.import pygame def main(): # 初 ...
- tomcat 相关异常
端口没有被占用却提示Several ports (8005, 8080, 8009) required by Tomcat??? 解决办法:1.运行cmd进入命令行界面:2.运行命令: netsh w ...
- js基础关系运算符
js基础关系运算符 == 是否相等(只检查值) x=5,y='-5';x==y true === 是否全等(检查值和数据类型) x=5,y='-5';x===y false != 是否不等于 5!=8 ...
- 剑指offer——73股票的最大利润
题目: 假设把某股票的价格按照时间先后顺序存储在数组中,请问买卖该股票一次可能获得的最大利润是多少?例如,一只股票在某些时间节点的价格为{9,11,8,5,7,12,16,14}.如果我们能在价格为5 ...
- 并发新构件之Exchanger:交换器
Exchanger:JDK描述:可以在对中对元素进行配对和交换的线程的同步点.每个线程将条目上的某个方法呈现给 exchange 方法,与伙伴线程进行匹配,并且在返回时接收其伙伴的对象.Exchang ...