<!DOCTYPE html>
|
<html>
|
<head>
|
<meta charset="utf-8">
|
<meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no">
|
<title>Print Dijit: Out of the Box Printing for the ArcGIS API for JavaScript</title>
|
<link rel="stylesheet" href="https://js.arcgis.com/3.22/dijit/themes/nihilo/nihilo.css">
|
<link rel="stylesheet" href="https://js.arcgis.com/3.22/esri/css/esri.css">
|
<style>
|
html, body {
|
height: 100%; width: 100%;
|
margin: 0; padding: 0;
|
}
|
body{
|
background-color: #fff; overflow:hidden;
|
font-family: sans-serif;
|
}
|
label {
|
display: inline-block;
|
padding: 5px 5px 0 5px;
|
font-weight: 400;
|
font-size: 12pt;
|
}
|
.button {
|
width: 100%;
|
margin: 3px auto;
|
text-align: center;
|
}
|
#header {
|
padding-top: 4px;
|
padding-right: 15px;
|
color: #444;
|
font-size:16pt; text-align:right;font-weight:bold;
|
height:55px;
|
background: #fff;
|
border-bottom: 1px solid #444;
|
}
|
#subheader {
|
font-size:small;
|
color: #444;
|
text-align:right;
|
padding-right:20px;
|
}
|
#rightPane{
|
margin: 0;
|
padding: 10px;
|
background-color: #fff;
|
color: #421b14;
|
width: 180px;
|
}
|
|
.ds { background: #000; overflow: hidden; position: absolute; z-index: 2; }
|
#ds-h div { width: 100%; }
|
#ds-l div, #ds-r div { height: 100%; }
|
#ds-r div { right: 0; }
|
#ds .o1 { filter: alpha(opacity=10); opacity: .1; }
|
#ds .o2 { filter: alpha(opacity=8); opacity: .08; }
|
#ds .o3 { filter: alpha(opacity=6); opacity: .06; }
|
#ds .o4 { filter: alpha(opacity=4); opacity: .04; }
|
#ds .o5 { filter: alpha(opacity=2); opacity: .02; }
|
#ds .h1 { height: 1px; }
|
#ds .h2 { height: 2px; }
|
#ds .h3 { height: 3px; }
|
#ds .h4 { height: 4px; }
|
#ds .h5 { height: 5px; }
|
#ds .v1 { width: 1px; }
|
#ds .v2 { width: 2px; }
|
#ds .v3 { width: 3px; }
|
#ds .v4 { width: 4px; }
|
#ds .v5 { width: 5px; }
|
|
/* make all dijit buttons the same width */
|
.dijitButton .dijitButtonNode, #drawingWrapper, #printButton {
|
width: 160px;
|
}
|
.esriPrint {
|
padding: 0;
|
}
|
</style>
|
|
<script src="https://js.arcgis.com/3.22/"></script>
|
<script>
|
var app = {};
|
app.map = null; app.toolbar = null; app.tool = null; app.symbols = null; app.printer = null;
|
require([
|
"esri/map", "esri/toolbars/draw", "esri/dijit/Print",
|
"esri/layers/ArcGISTiledMapServiceLayer", "esri/layers/ArcGISDynamicMapServiceLayer",
|
"esri/layers/LayerDrawingOptions",
|
"esri/symbols/SimpleMarkerSymbol", "esri/symbols/SimpleLineSymbol",
|
"esri/symbols/SimpleFillSymbol", "esri/graphic",
|
"esri/renderers/ClassBreaksRenderer",
|
"esri/config",
|
"dojo/_base/array", "esri/Color", "dojo/parser",
|
"dojo/query", "dojo/dom", "dojo/dom-construct",
|
"dijit/form/CheckBox", "dijit/form/Button",
|
|
"dijit/layout/BorderContainer", "dijit/layout/ContentPane", "dojo/domReady!"
|
], function(
|
Map, Draw, Print,
|
ArcGISTiledMapServiceLayer, ArcGISDynamicMapServiceLayer,
|
LayerDrawingOptions,
|
SimpleMarkerSymbol, SimpleLineSymbol,
|
SimpleFillSymbol, Graphic,
|
ClassBreaksRenderer,
|
esriConfig,
|
arrayUtils, Color, parser,
|
query, dom, domConstruct,
|
CheckBox, Button
|
) {
|
parser.parse();
|
|
esriConfig.defaults.io.proxyUrl = "/proxy/";
|
|
app.map = new Map("map", {
|
center: [116, 28.541],
|
zoom: 8
|
});
|
app.map.on("load", function() {
|
app.toolbar = new Draw(app.map);
|
app.toolbar.on("draw-end", addToMap);
|
});
|
|
// print dijit
|
app.printer = new Print({
|
map: app.map,
|
url: "http://180.76.128.241:6080/arcgis/rest/services/Utilities/PrintingTools/GPServer/Export%20Web%20Map%20Task"
|
}, dom.byId("printButton"));
|
app.printer.startup();
|
|
// var url = "https://services.arcgisonline.com/ArcGIS/rest/services/Ocean_Basemap/MapServer";
|
// var tiledLayer = new ArcGISTiledMapServiceLayer(url, { "id": "Ocean" });
|
// app.map.addLayer(tiledLayer);
|
|
var layer = new ArcGISDynamicMapServiceLayer("http://111.75.208.214:6080/arcgis/rest/services/JIANGXI_BORDER/MapServer", {
|
id: "County Population",
|
// opacity: 0.5
|
});
|
layer.setVisibleLayers([0,1,2]);
|
// var layerDefs = [];
|
// layerDefs[3] = "state_name = 'Louisiana'";
|
// layer.setLayerDefinitions(layerDefs);
|
|
// var renderer = new ClassBreaksRenderer(null, "pop2000");
|
// var outline = new SimpleLineSymbol("solid", new Color([0,0,0,0.5]), 1);
|
// var colors = [
|
// new Color([255,255,178,0.5]),
|
// new Color([254,204,92,0.5]),
|
// new Color([253,141,60,0.5]),
|
// new Color([240,59,32,0.5]),
|
// new Color([189,0,38,0.5])
|
// ];
|
// renderer.addBreak(0, 20000, new SimpleFillSymbol("solid", outline, colors[0]));
|
// renderer.addBreak(20000, 50000, new SimpleFillSymbol("solid", outline, colors[1]));
|
// renderer.addBreak(50000, 100000, new SimpleFillSymbol("solid", outline, colors[2]));
|
// renderer.addBreak(10000, 1000000, new SimpleFillSymbol("solid", outline, colors[3]));
|
// renderer.addBreak(1000000, 10000000, new SimpleFillSymbol("solid", outline, colors[4]));
|
// var drawingOptions = new LayerDrawingOptions();
|
// drawingOptions.renderer = renderer;
|
// // set the drawing options for the relevant layer
|
// // optionsArray index corresponds to layer index in the map service
|
// var optionsArray = [];
|
// optionsArray[3] = drawingOptions;
|
// layer.setLayerDrawingOptions(optionsArray);
|
app.map.addLayer(layer);
|
|
// create a check box for each map layer
|
arrayUtils.forEach(["County Population", "Ocean"], function(id) {
|
new CheckBox({
|
id: "cb_" + id,
|
name: "cb_" + id,
|
checked: true,
|
onChange: function(bool) {
|
bool ?
|
app.map.getLayer(this.id.split("_")[1]).show() :
|
app.map.getLayer(this.id.split("_")[1]).hide();
|
}
|
}, domConstruct.create("input", {
|
id: "lyr_" + id
|
})).placeAt(dom.byId("layerToggle"));
|
|
// create a label for the check box
|
var label = domConstruct.create('label', {
|
"for": "cb_" + id,
|
"innerHTML": id
|
});
|
domConstruct.place(label, dom.byId("layerToggle"));
|
domConstruct.place(domConstruct.create("br"), dom.byId("layerToggle"));
|
});
|
|
// set up symbols for the various geometry types
|
app.symbols = {};
|
app.symbols.point = new SimpleMarkerSymbol("square", 10, new SimpleLineSymbol(), new Color([0, 255, 0, 0.75]));
|
app.symbols.polyline = new SimpleLineSymbol("solid", new Color([255, 128, 0]), 2);
|
app.symbols.polygon = new SimpleFillSymbol().setColor(new Color([255,255,0,0.25]));
|
app.symbols.circle = new SimpleFillSymbol().setColor(new Color([0, 0, 180, 0.25]));
|
|
// find the divs for buttons
|
query(".drawing").forEach(function(btn) {
|
var button = new Button({
|
label: btn.innerHTML,
|
onClick: function() {
|
activateTool(this.id);
|
}
|
}, btn);
|
});
|
|
function activateTool(type) {
|
app.tool = type.replace("freehand", "");
|
app.toolbar.activate(type);
|
app.map.hideZoomSlider();
|
}
|
|
function addToMap(evt) {
|
app.toolbar.deactivate();
|
app.map.showZoomSlider();
|
|
var graphic = new Graphic(evt.geometry, app.symbols[app.tool]);
|
app.map.graphics.add(graphic);
|
}
|
});
|
</script>
|
</head>
|
<body class="nihilo">
|
<div id="mainWindow"
|
data-dojo-type="dijit/layout/BorderContainer"
|
data-dojo-props="design:'headline',gutters:false"
|
style="width: 100%; height: 100%; margin: 0;">
|
<div id="header"
|
data-dojo-type="dijit/layout/ContentPane"
|
data-dojo-props="region:'top'">
|
Print Dijit: Out of the Box Printing for the ArcGIS API for JavaScript
|
<div id="subheader">Requires ArcGIS Server 10.1</div>
|
</div>
|
<div id="map" class="shadow"
|
data-dojo-type="dijit/layout/ContentPane"
|
data-dojo-props="region:'center'">
|
|
|
<div id="ds">
|
<div id="ds-h">
|
<div class="ds h1 o1"></div>
|
<div class="ds h2 o2"></div>
|
<div class="ds h3 o3"></div>
|
<div class="ds h4 o4"></div>
|
<div class="ds h5 o5"></div>
|
</div>
|
<div id="ds-r">
|
<div class="ds v1 o1"></div>
|
<div class="ds v2 o2"></div>
|
<div class="ds v3 o3"></div>
|
<div class="ds v4 o4"></div>
|
<div class="ds v5 o5"></div>
|
</div>
|
</div>
|
|
</div>
|
<div id="rightPane"
|
data-dojo-type="dijit/layout/ContentPane"
|
data-dojo-props="region:'right'">
|
|
<div id="printButton"></div>
|
<hr />
|
|
<div id="drawingWrapper">
|
Add some graphics:
|
<div id="point" class="drawing">Point</div>
|
<div id="freehandpolyline" class="drawing">Freehand Polyline</div>
|
<div id="freehandpolygon" class="drawing">Freehand Polygon</div>
|
<div id="circle" class="drawing">Circle</div>
|
</div>
|
<hr />
|
<div id="layerToggle">
|
Toggle Layers: <br />
|
|
</div>
|
</div>
|
</div>
|
</body>
|
</html>
|
