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, ...
随机推荐
- PHP ftp_nb_continue() 函数
定义和用法 ftp_nb_continue() 函数连续获取/发送文件.(无阻塞) 该函数返回下列值之一: FTP_FAILED(发送/获取失败) FTP_FINISHED(发送/获取成功) FTP_ ...
- Android中如何搭建一个WebServer
今天终于把老大交代的任务搞完了,感觉收获挺多的,所以就写一篇来记录一下吧,首先还是来看一下,老大们的需求 需求: 希望移动端的用户标识(IMEI)和HTML页面的用户标识(Cookie)连接起来,其中 ...
- RMQ区间求最值
RMQ用于区间快速查找最值,适用于期间数值无更改的情况.其预处理的复杂度为O(nlogn),查询的时间复杂度为O(1),对比于线段树的预处理O(nlogn),查询O(logn)来说,在某些情况下有着其 ...
- Less 和 Sass
LESS SASS sass 与 less 的区别与学习 : https://www.cnblogs.com/roashley/p/7731865.html 或 https://www.c ...
- docker核心技术(2)
鸟瞰容器生态系统 一谈到容器,大家都会想到 Docker. Docker 现在几乎是容器的代名词.确实,是 Docker 将容器技术发扬光大.同时,大家也需要知道围绕 Docker 还有一个生态系统. ...
- 组合数学（math）
组合数学(math) 题目描述 为了提高智商,zjy开始学习组合数学.某一天她解决了这样一个问题:“给一个网格图,其中某些格子有财宝.每次从左上角出发,只能往右或下走.问至少要走几次才能把财宝全部捡完 ...
- CSS：CSS Positioning(定位)
ylbtech-CSS:CSS Positioning(定位) 1.返回顶部 1. CSS Positioning(定位) position 属性指定了元素的定位类型. position 属性的四个值 ...
- Dubbo入门到精通学习笔记（二）：Dubbo管理控制台、使用Maven构建Dubbo的jar包、在Linux上部署Dubbo privider服务（shell脚本）、部署consumer服务
文章目录 Dubbo管理控制台 1.Dubbo管理控制台的主要作用: 2.管理控制台主要包含: 3.管理控制台版本: 安装 Dubbo 管理控制台 使用Maven构建Dubbo服务的可执行jar包 D ...
- C++——数据类型选择
1.数据类型选择推荐 2.数据类型相关代码注意 2.1 循环的int型注意是int 还是unsigned unsigned a=-1;(a=4294967295)
- ollydbg调试PE文件
ollydbg项目地址:http://www.ollydbg.de/ 将exe文件打开到ollydbg项目中,就会直接停到"入口点"地址处,通过View->Memory Ma ...