arcgis地图窗口操作
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>地图窗口操作</title> <link rel="stylesheet" href="http://js.arcgis.com/3.9/js/dojo/dijit/themes/tundra/tundra.css" /> <link rel="stylesheet" href="http://js.arcgis.com/3.9/js/esri/css/esri.css"> <style type="text/css"> html, body, #main { padding: 0; margin: 0; width: 100%; height: 100%; } </style> <script src="http://js.arcgis.com/3.9/"></script> <script type="text/javascript"> var map, navToolbar; var navOption; // 当前选择的操作 require(["dojo/parser", "esri/map", "esri/layers/ArcGISTiledMapServiceLayer", "esri/toolbars/navigation", "dojo/query", 'dojo/_base/fx', "dojo/fx/easing", "dijit/layout/BorderContainer", "dijit/layout/ContentPane", "dojo/domReady!"], function (parser, Map, ArcGISTiledMapServiceLayer, Navigation, query, fx, easing) { parser.parse(); map = new Map("mapDiv", { logo: false, sliderStyle: "large" }); var agoServiceURL = "http://server.arcgisonline.com/ArcGIS/rest/services/ESRI_StreetMap_World_2D/MapServer"; var agoLayer = new ArcGISTiledMapServiceLayer(agoServiceURL); map.addLayer(agoLayer); map.on('load', setupNavBar); function setupNavBar() { navToolbar = new Navigation(map); query(".navItem img").onmouseover(function (evt) { fx.anim(evt.target.parentNode, { backgroundColor: '#CCCCCC' }, 200, easing.bounceOut); }).onmouseout(function (evt) { if (evt.target.parentNode.id != navOption) { fx.anim(evt.target.parentNode, { backgroundColor: '#FFFFFF' }); } else { fx.anim(evt.target.parentNode, { backgroundColor: '#DADADA' }); } }).onclick(function (evt) { fx.anim(evt.target.parentNode, { backgroundColor: '#999999' }, 200, easing.linear, function () { dojo.anim(evt.target.parentNode, { backgroundColor: '#CCCCCC' }, 0); }); navEvent(evt.target.parentNode.id); }); // 将漫游设置为默认操作 navEvent('deactivate'); } function navEvent(id) { switch (id) { case 'pan': map.enablePan(); navToolbar.activate(Navigation.PAN); if (navOption) { fx.anim(document.getElementById(navOption), { backgroundColor: '#FFFFFF' }); } navOption = id; break; case 'zoomprev': navToolbar.zoomToPrevExtent(); break; case 'zoomnext': navToolbar.zoomToNextExtent(); break; case 'extent': navToolbar.zoomToFullExtent(); break; case 'zoomin': navToolbar.activate(Navigation.ZOOM_IN); if (navOption) { fx.anim(document.getElementById(navOption), { backgroundColor: '#FFFFFF' }); } navOption = id; break; case 'zoomout': navToolbar.activate(Navigation.ZOOM_OUT); if (navOption) { fx.anim(document.getElementById(navOption), { backgroundColor: '#FFFFFF' }); } navOption = id; break; case 'deactivate': navToolbar.deactivate(); if (navOption) { fx.anim(document.getElementById(navOption), { backgroundColor: '#FFFFFF' }); } navOption = id; break; } } }); </script> </head> <body class="tundra"> <div data-dojo-type="dijit/layout/BorderContainer" data-dojo-props="design:'headline'" id="main"> <div id="navDiv1" data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'left', splitter:'false'" style="width: 44px; overflow: hidden; padding: 0px; border: 0px; "> <div id="zoomin" data-dojo-type="dijit/layout/ContentPane" class="navItem" data-dojo-props="splitter:'false'" style="height: 30px; border: 1px solid #DADADA; padding: 5px; margin-bottom: 3px; vertical-align : middle; overflow: hidden;"> <img class="navItem" src="images/zoomin.gif" title="Zoom In: Drag a zoom rectangle on-map to zoom in" /> </div> <div id="zoomout" data-dojo-type="dijit/layout/ContentPane" class="navItem" data-dojo-props="splitter:'false'" style="height: 30px; border: 1px solid #DADADA; padding: 5px; margin-bottom: 3px; vertical-align : middle; overflow: hidden;"> <img class="navItem" src="images/zoomout.gif" title="Zoom Out: Drag a zoom rectangle on-map to zoom out and center" /> </div> <div id="extent" data-dojo-type="dijit/layout/ContentPane" class="navItem" data-dojo-props="splitter:'false'" style="height: 30px; border: 1px solid #DADADA; padding: 5px; margin-bottom: 3px; vertical-align : middle; overflow: hidden;"> <img class="navItem" src="images/web.gif" title="Full Extent: Zoom out to Full Extent" /> </div> <div id="zoomprev" data-dojo-type="dijit/layout/ContentPane" class="navItem" data-dojo-props="splitter:'false'" style="height: 30px; border: 1px solid #DADADA; padding: 5px; margin-bottom: 3px; vertical-align : middle; overflow: hidden;"> <img class="navItem" src="images/left.gif" title="前一视图" /> </div> <div id="zoomnext" data-dojo-type="dijit/layout/ContentPane" class="navItem" data-dojo-props="splitter:'false'" style="height: 30px; border: 1px solid #DADADA; padding: 5px; margin-bottom: 3px; vertical-align : middle; overflow: hidden;"> <img class="navItem" src="images/right.gif" title="后一视图" /> </div> <div id="pan" data-dojo-type="dijit/layout/ContentPane" class="navItem" data-dojo-props="splitter:'false'" style="height: 30px; border: 1px solid #DADADA; padding: 5px; margin-bottom: 3px; vertical-align : middle; overflow: hidden;"> <img class="navItem" title="漫游" src="images/hand.gif" /> </div> <div id="deactivate" data-dojo-type="dijit/layout/ContentPane" class="navItem" data-dojo-props="splitter:'false'" style="height: 30px; border: 1px solid #DADADA; padding: 5px; margin-bottom: 3px; background-color:#DADADA; vertical-align : middle; overflow: hidden;"> <img class="navItem" src="images/minus.gif" title="返回标准控制" /> </div> </div> <div id="mapDiv" data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'center'" style="background-color: #f5ffbf; padding: 10px;"> </div> </div> </body> </html>
<!DOCTYPE html><html><head> <meta charset="utf-8"> <title>地图窗口操作</title> <link rel="stylesheet" href="http://js.arcgis.com/3.9/js/dojo/dijit/themes/tundra/tundra.css" /> <link rel="stylesheet" href="http://js.arcgis.com/3.9/js/esri/css/esri.css"> <style type="text/css"> html, body, #main { padding: 0; margin: 0; width: 100%; height: 100%; } </style> <script src="http://js.arcgis.com/3.9/"></script> <script type="text/javascript"> var map, navToolbar; var navOption; // 当前选择的操作 require(["dojo/parser", "esri/map", "esri/layers/ArcGISTiledMapServiceLayer", "esri/toolbars/navigation", "dojo/query", 'dojo/_base/fx', "dojo/fx/easing", "dijit/layout/BorderContainer", "dijit/layout/ContentPane", "dojo/domReady!"], function (parser, Map, ArcGISTiledMapServiceLayer, Navigation, query, fx, easing) { parser.parse();
map = new Map("mapDiv", { logo: false, sliderStyle: "large" }); var agoServiceURL = "http://server.arcgisonline.com/ArcGIS/rest/services/ESRI_StreetMap_World_2D/MapServer"; var agoLayer = new ArcGISTiledMapServiceLayer(agoServiceURL); map.addLayer(agoLayer);
map.on('load', setupNavBar);
function setupNavBar() { navToolbar = new Navigation(map);
query(".navItem img").onmouseover(function (evt) { fx.anim(evt.target.parentNode, { backgroundColor: '#CCCCCC' }, 200, easing.bounceOut); }).onmouseout(function (evt) { if (evt.target.parentNode.id != navOption) { fx.anim(evt.target.parentNode, { backgroundColor: '#FFFFFF' }); } else { fx.anim(evt.target.parentNode, { backgroundColor: '#DADADA' }); } }).onclick(function (evt) {
fx.anim(evt.target.parentNode, { backgroundColor: '#999999' }, 200, easing.linear, function () { dojo.anim(evt.target.parentNode, { backgroundColor: '#CCCCCC' }, 0); }); navEvent(evt.target.parentNode.id); });
// 将漫游设置为默认操作 navEvent('deactivate'); }
function navEvent(id) { switch (id) { case 'pan': map.enablePan(); navToolbar.activate(Navigation.PAN);
if (navOption) { fx.anim(document.getElementById(navOption), { backgroundColor: '#FFFFFF' }); } navOption = id; break; case 'zoomprev': navToolbar.zoomToPrevExtent(); break; case 'zoomnext': navToolbar.zoomToNextExtent(); break; case 'extent': navToolbar.zoomToFullExtent(); break; case 'zoomin': navToolbar.activate(Navigation.ZOOM_IN); if (navOption) { fx.anim(document.getElementById(navOption), { backgroundColor: '#FFFFFF' }); } navOption = id; break; case 'zoomout': navToolbar.activate(Navigation.ZOOM_OUT); if (navOption) { fx.anim(document.getElementById(navOption), { backgroundColor: '#FFFFFF' }); } navOption = id; break; case 'deactivate': navToolbar.deactivate(); if (navOption) { fx.anim(document.getElementById(navOption), { backgroundColor: '#FFFFFF' }); } navOption = id; break; } } }); </script></head><body class="tundra"> <div data-dojo-type="dijit/layout/BorderContainer" data-dojo-props="design:'headline'" id="main"> <div id="navDiv1" data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'left', splitter:'false'" style="width: 44px; overflow: hidden; padding: 0px; border: 0px; "> <div id="zoomin" data-dojo-type="dijit/layout/ContentPane" class="navItem" data-dojo-props="splitter:'false'" style="height: 30px; border: 1px solid #DADADA; padding: 5px; margin-bottom: 3px; vertical-align : middle; overflow: hidden;"> <img class="navItem" src="images/zoomin.gif" title="Zoom In: Drag a zoom rectangle on-map to zoom in" /> </div> <div id="zoomout" data-dojo-type="dijit/layout/ContentPane" class="navItem" data-dojo-props="splitter:'false'" style="height: 30px; border: 1px solid #DADADA; padding: 5px; margin-bottom: 3px; vertical-align : middle; overflow: hidden;"> <img class="navItem" src="images/zoomout.gif" title="Zoom Out: Drag a zoom rectangle on-map to zoom out and center" /> </div> <div id="extent" data-dojo-type="dijit/layout/ContentPane" class="navItem" data-dojo-props="splitter:'false'" style="height: 30px; border: 1px solid #DADADA; padding: 5px; margin-bottom: 3px; vertical-align : middle; overflow: hidden;"> <img class="navItem" src="images/web.gif" title="Full Extent: Zoom out to Full Extent" /> </div> <div id="zoomprev" data-dojo-type="dijit/layout/ContentPane" class="navItem" data-dojo-props="splitter:'false'" style="height: 30px; border: 1px solid #DADADA; padding: 5px; margin-bottom: 3px; vertical-align : middle; overflow: hidden;"> <img class="navItem" src="images/left.gif" title="前一视图" /> </div> <div id="zoomnext" data-dojo-type="dijit/layout/ContentPane" class="navItem" data-dojo-props="splitter:'false'" style="height: 30px; border: 1px solid #DADADA; padding: 5px; margin-bottom: 3px; vertical-align : middle; overflow: hidden;"> <img class="navItem" src="images/right.gif" title="后一视图" /> </div> <div id="pan" data-dojo-type="dijit/layout/ContentPane" class="navItem" data-dojo-props="splitter:'false'" style="height: 30px; border: 1px solid #DADADA; padding: 5px; margin-bottom: 3px; vertical-align : middle; overflow: hidden;"> <img class="navItem" title="漫游" src="images/hand.gif" /> </div> <div id="deactivate" data-dojo-type="dijit/layout/ContentPane" class="navItem" data-dojo-props="splitter:'false'" style="height: 30px; border: 1px solid #DADADA; padding: 5px; margin-bottom: 3px; background-color:#DADADA; vertical-align : middle; overflow: hidden;"> <img class="navItem" src="images/minus.gif" title="返回标准控制" /> </div> </div> <div id="mapDiv" data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'center'" style="background-color: #f5ffbf; padding: 10px;"> </div> </div></body></html>
