您的位置:首页 > Web前端 > JavaScript

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);
});

                                            
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: