arcgis JavaScript api 的打印功能
2016-07-19 17:44
405 查看
在html中给print按钮创建一个div
<div id="printBtnHide" style="display:none"></div>
在js中定义一个print
<pre name="code" class="javascript">require([
"esri/map", "esri/dijit/Print", "dojo/dom"...
], function(Map, Print, dom, ... ) {
var map = new Map( ... );
var printer = new Print({
map: map,
url: "http://sampleserver6.arcgisonline.com/arcgis/rest/services/Utilities/PrintingTools/GPServer/Export%20Web%20Map%20Task"
}, dom.byId("printBtnHide"));
printer.startup(); // 初始化print部件<span style="color: rgb(89, 89, 89); font-family: 'Lucida Grande', 'Segoe UI', Arial, sans-serif; line-height: 24.0001px; background-color: rgb(250, 250, 250);">Finalizes the creation of the print widget.</span>
});
在html中创建一个打印的按钮,可以随意更改样式、事件
<pre name="code" class="javascript"><input type = "button" id = "printBtnShow" value = "导出" >
打印的模板
<pre name="code" class="javascript">require(["esri/tasks/PrintTemplate","esri/tasks/LegendLayer"],function(PrintTemplate, LegendLayer){
var template = new PrintTemplate();
template.format = "PNG32"; // 导出的格式,图片或pdf
template.layout = dojo.query("#"+that.panelId+" select")[0].value || "MAP_ONLY"; // 导出的版式,A3 横向、A3纵向...
var width = dojo.query("#"+that.mapOnlySizeId+" input")[0].value; // 仅导出地图的宽度
var height = dojo.query("#"+that.mapOnlySizeId+" input")[1].value; // 仅导出地图的长度
var dpi = dojo.query("#"+that.mapOnlySizeId+" input")[2].value; // 仅导出地图的dpi
(template.layout == "MAP_ONLY") && (
// Require 'exportOptions' when the layoutTemplate is set to 'MAP_ONLY'.
template.exportOptions = {
width: parseInt(width)? parseInt(width) : 500,
height: parseInt(height)? parseInt(height) : 400,
dpi: parseInt(dpi)? parseInt(dpi) : 96,
}
)
var legendLayers = [];
var layerId=["图层1", "图层2", "图层3"]; // 业务图层的图例
layerId.forEach(function(id){
var layer=that.map.getLayer(id);
if(layer.visible && layer.visibleLayers[0]!=-1){
var legendLayer = new LegendLayer();
legendLayer.layerId = id;
legendLayer.subLayerIds = layer.visibleLayers;
legendLayers.push(legendLayer);
}
});
template.layoutOptions={
titleText:"标题",
authorText:"制图单位:",
copyrightText:"版权所有:",
scalebarUnit:"Kilometers",
legendLayers:legendLayers//,
// customTextElements:
}
// template.outScale
template.preserveScale = false;
// template.showAttribution
// template.showLabels
that.printer.printMap(template);
});
<div id="printBtnHide" style="display:none"></div>
在js中定义一个print
<pre name="code" class="javascript">require([
"esri/map", "esri/dijit/Print", "dojo/dom"...
], function(Map, Print, dom, ... ) {
var map = new Map( ... );
var printer = new Print({
map: map,
url: "http://sampleserver6.arcgisonline.com/arcgis/rest/services/Utilities/PrintingTools/GPServer/Export%20Web%20Map%20Task"
}, dom.byId("printBtnHide"));
printer.startup(); // 初始化print部件<span style="color: rgb(89, 89, 89); font-family: 'Lucida Grande', 'Segoe UI', Arial, sans-serif; line-height: 24.0001px; background-color: rgb(250, 250, 250);">Finalizes the creation of the print widget.</span>
});
在html中创建一个打印的按钮,可以随意更改样式、事件
<pre name="code" class="javascript"><input type = "button" id = "printBtnShow" value = "导出" >
打印的模板
<pre name="code" class="javascript">require(["esri/tasks/PrintTemplate","esri/tasks/LegendLayer"],function(PrintTemplate, LegendLayer){
var template = new PrintTemplate();
template.format = "PNG32"; // 导出的格式,图片或pdf
template.layout = dojo.query("#"+that.panelId+" select")[0].value || "MAP_ONLY"; // 导出的版式,A3 横向、A3纵向...
var width = dojo.query("#"+that.mapOnlySizeId+" input")[0].value; // 仅导出地图的宽度
var height = dojo.query("#"+that.mapOnlySizeId+" input")[1].value; // 仅导出地图的长度
var dpi = dojo.query("#"+that.mapOnlySizeId+" input")[2].value; // 仅导出地图的dpi
(template.layout == "MAP_ONLY") && (
// Require 'exportOptions' when the layoutTemplate is set to 'MAP_ONLY'.
template.exportOptions = {
width: parseInt(width)? parseInt(width) : 500,
height: parseInt(height)? parseInt(height) : 400,
dpi: parseInt(dpi)? parseInt(dpi) : 96,
}
)
var legendLayers = [];
var layerId=["图层1", "图层2", "图层3"]; // 业务图层的图例
layerId.forEach(function(id){
var layer=that.map.getLayer(id);
if(layer.visible && layer.visibleLayers[0]!=-1){
var legendLayer = new LegendLayer();
legendLayer.layerId = id;
legendLayer.subLayerIds = layer.visibleLayers;
legendLayers.push(legendLayer);
}
});
template.layoutOptions={
titleText:"标题",
authorText:"制图单位:",
copyrightText:"版权所有:",
scalebarUnit:"Kilometers",
legendLayers:legendLayers//,
// customTextElements:
}
// template.outScale
template.preserveScale = false;
// template.showAttribution
// template.showLabels
that.printer.printMap(template);
});
相关文章推荐
- [学习笔记]运算符的应用
- 《JavaScript高级程序设计》笔记系列1-- 在 HTML 中使用 JavaScript
- JS实现网页打印功能
- js方法不识别参数问题
- js 闭包方式封装
- JS动态显示时间
- Echarts地图合并提取
- Js获取当前时间
- javascript的settimeout
- JS脚本修改控件宽度
- JSON.parse()和JSON.stringify()
- 18.AJAX及JSON
- 重写js的replaceAll的方法
- JavaScript之对象学习
- ExtJs Grid 删除,编辑,查看详细等超链接处理
- 在你的 composer.json 中增加 doctrine/dbal 依赖
- javascript中的弹框
- 导入js出错
- BSON与JSON的区别
- js的正则表达式过滤非法字符