<!DOCTYPE html> <html> <head> <title>...</title> <link rel="stylesheet" type="text/css" href="http://serverapi.arcgisonline.com/jsapi/arcgis/2.1/js/dojo/dijit/themes/claro/claro.css"> <style> html, body { height: 100%; width: 100%; margin: 0; padding: 0; } #map{ padding:0; } </style> <script type="text/javascript">var djConfig = {parseOnLoad: true};</script> <script type="text/javascript" src="http://serverapi.arcgisonline.com/jsapi/arcgis/?v=2.1"></script> <script type="text/javascript"> dojo.require("dijit.layout.BorderContainer"); dojo.require("dijit.layout.ContentPane"); dojo.require("esri.map"); var map; var drag = {}; function init() { var initExtent = new esri.geometry.Extent({"xmin":-13632648,"ymin":4542594,"xmax":-13621699,"ymax":4546875,"spatialReference":{"wkid":102100}}); map = new esri.Map("map",{extent:initExtent}); var basemap = new esri.layers.ArcGISTiledMapServiceLayer("http://server.arcgisonline.com/ArcGIS/rest/services/World_Topo_Map/MapServer"); map.addLayer(basemap); var resizeTimer; dojo.connect(map, 'onLoad', function(theMap) { map.addLayer(new esri.layers.GraphicsLayer({ id: 'ctrl_drag' })); dojo.connect(dijit.byId('map'), 'resize', function() { clearTimeout(resizeTimer); resizeTimer = setTimeout( function() { map.resize(); map.reposition(); }, 500); }); // listen to various events to draw a graphic when the ctrl key is held down dojo.connect(map, "onMouseDragStart", drag_start); dojo.connect(map, "onMouseDragEnd", drag_stop); dojo.connect(map, "onMouseDrag", dragging); // IE doesn't play nice attaching onkeyup/onkeydown to the window object... var key_event_handle = dojo.isIE ? dojo.query('body')[0] : window; dojo.connect(key_event_handle, "onkeydown", function(evt) { if (evt.ctrlKey || evt.keyCode == 17) { map.disablePan(); } }); dojo.connect(key_event_handle, "onkeyup", function(evt) { if (evt.ctrlKey || evt.keyCode == 17) { map.enablePan(); } }); }); } function drag_start(evt) { if (evt.ctrlKey) { map.getLayer('ctrl_drag').clear(); if (check_drag_graphic()) { delete drag.drag_graphic; } drag.start = evt.mapPoint; } } function drag_stop(evt) { if (evt.ctrlKey) { drag.stop = evt.mapPoint; build_rect(); } } function dragging(evt) { if (evt.ctrlKey || evt.keyCode == 17) { drag.stop = evt.mapPoint; build_rect(); } } function build_rect() { var xmin = drag.start.x < drag.stop.x ? drag.start.x : drag.stop.x; var ymin = drag.start.y < drag.stop.y ? drag.start.y : drag.stop.y; var xmax = drag.start.x > drag.stop.x ? drag.start.x : drag.stop.x; var ymax = drag.start.y > drag.stop.y ? drag.start.y : drag.stop.y; var box = new esri.geometry.Extent({ 'xmin': xmin, 'ymin': ymin, 'xmax': xmax, 'ymax': ymax, 'spatialReference': map.spatialReference }); if (check_drag_graphic()) { map.getLayer('ctrl_drag').graphics[0].setGeometry(box); } else { drag.drag_graphic = new esri.Graphic(box, new esri.symbol.SimpleFillSymbol()); map.getLayer('ctrl_drag').add(drag.drag_graphic); } } function check_drag_graphic() { if (drag.hasOwnProperty('drag_graphic')) { return true; } else { return false; } } dojo.addOnLoad(init); </script> </head> <body class="claro"> <div dojotype="dijit.layout.BorderContainer" design="headline" gutters="false" style="width: 100%; height: 100%; margin: 0;"> <div id="map" dojotype="dijit.layout.ContentPane" region="center" style="overflow:hidden;"> </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.
