<!doctype html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=7, IE=9, IE=10"> <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no"> <title></title> <link rel="stylesheet" href="http://js.arcgis.com/3.7/js/dojo/dijit/themes/nihilo/nihilo.css"> <link rel="stylesheet" href="http://js.arcgis.com/3.7/js/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; } #header, #subheader { text-shadow: 1px 1px 1px #cee1f0; filter: dropshadow(color=#cee1f0, offx=1, offy=1); } #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; } </style> <script src="http://js.arcgis.com/3.7/"></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/symbols/SimpleMarkerSymbol", "esri/symbols/SimpleLineSymbol", "esri/symbols/SimpleFillSymbol", "esri/graphic", "esri/config", "dojo/_base/array", "dojo/_base/Color", "dojo/parser", "dojo/query", "dojo/dom", "dojo/dom-construct", "dijit/form/CheckBox", "dijit/form/Button", "esri/virtualearth/VETiledLayer", "dijit/layout/BorderContainer", "dijit/layout/ContentPane", "dojo/domReady!" ], function( Map, Draw, Print, ArcGISTiledMapServiceLayer, ArcGISDynamicMapServiceLayer, SimpleMarkerSymbol, SimpleLineSymbol, SimpleFillSymbol, Graphic, esriConfig, arrayUtils, Color, parser, query, dom, domConstruct, CheckBox, Button,VETiledLayer ) { parser.parse(); esriConfig.defaults.io.proxyUrl = "/proxy"; app.map = new Map("map", { center: [-90.733, 30.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://sampleserver6.arcgisonline.com/arcgis/rest/services/Utilities/PrintingTools/GPServer/Export Web Map Task" }, dom.byId("printButton")); app.printer.startup(); veTileLayer = new VETiledLayer({ bingMapsKey: prompt("Please enter your bing maps key"), mapStyle: esri.virtualearth.VETiledLayer.MAP_STYLE_AERIAL }); app.map.addLayer(veTileLayer); // add census boundary dyn map svc var dynUrl = "http://sampleserver1.arcgisonline.com/ArcGIS/rest/services/Demographics/ESRI_Census_USA/MapServer"; var dynLayer = new ArcGISDynamicMapServiceLayer(dynUrl, { "id": "Boundaries" }); app.map.addLayer(dynLayer); // create a check box for each map layer arrayUtils.forEach(["Boundaries", "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'"> <!-- drop shadow divs --> <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> <!-- end drop shadow divs --> </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 /> <!-- checkbox and labels inserted programmatically --> </div> </div> </div> </body> </html>
Membros conectados podem postar, seguir atualizações e mais. Novo aqui? Registre uma conta gratuita.
Find useful guides, FAQs, and documents to help you navigate and make the most of Esri Community.
