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, ...
随机推荐
- jq随机生成数字加字母的字符串
html代码: <dl class="row"> <dt class="tit"> <label for="title& ...
- Vue学习笔记【18】——Vue中的动画（使用过渡类名）
为什么要有动画:动画能够提高用户的体验,帮助用户更好的理解页面中的功能: 使用过渡类名 步骤分析 需求: 点击按钮,让 h3 显示,再点击,让 h3 隐藏 1. 使用 transition 元素, ...
- 分布式项目pom
<dependencies> <dependency> <groupId>junit</groupId> <artifactId>junit ...
- 【原理】RabbitMQ概要图
使用流程 发布者(推送消息的一端): 创建一个tcp长连接connection,连接rabbitmq的监听端口5672: 在TCP长连接下创建一个信道channel,信道可以理解为connection ...
- 安全检测及分析神器—AppScan使用教程
最近项目准备验收,所以最近在做项目验收的准备工作:我们公司规定,项目的安全检测必须通过才能进行项目验收:公司的安全部门用的检测软件就是大名鼎鼎的IBM Rational Appscan;在教由安全部门 ...
- react 教程—核心概念
react 核心概念 : https://react.docschina.org/docs/getting-started.html(官网) 或 https://www.w3cschool.cn/ ...
- Java桌球小游戏1
版本三.使小球动起来package cn.xjion.game;/** * 水平滚动 * @author xjion * */import java.awt.*;import javax.swing. ...
- base64和Xxtea的加密和解密
base64和Xxtea的加密和解密 数据加密是web数据安全的一种方式,前几天拿到一个base64+xxtea加密的数据,现在在这里整理一下使用的过程.首先当然是全网站找解密方法,但是最后的结果不是 ...
- CSS：CSS 创建
ylbtech-CSS:CSS 创建 1.返回顶部 1. CSS 创建 当读到一个样式表时,浏览器会根据它来格式化 HTML 文档. 如何插入样式表 插入样式表的方法有三种: 外部样式表(Extern ...
- Mysql中设置默认时间为系统当前时间
Mysql中设置默认时间为系统当前时间 数据库设计时会遇到的一种情况:将系统当前时间设成默认值存储 数据库设计编码: CREATE TABLE `test` ( `name` varchar(50) ...