完整代码如下：
<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title>地图-Test </title> <link href="arcgis_js_v39_api/arcgis_js_api/library/3.9/3.9compact/js/dojo/dijit/themes/tundra/tundra.css" rel="stylesheet" type="text/css" /> <link href="arcgis_js_v39_api/arcgis_js_api/library/3.9/3.9compact/js/esri/css/esri.css" rel="stylesheet" type="text/css" /> <script type="text/javascript"> var dojoConfig = { parseOnLoad: true };</script> <script src="arcgis_js_v39_api/arcgis_js_api/library/3.9/3.9compact/init.js" type="text/javascript"></script> <style type="text/css"> .MapClass { width:900px; height:600px; border:1px solid #000;} </style> <style> html, body { height: 100%; width: 100%; margin: 0; padding: 0; } body{ background-color: #fff; overflow:hidden; font-family: sans-serif; } #header { padding-top: 4px; padding-right: 15px; background-color:#444; color:#fff; font-size:16pt; text-align:right;font-weight:bold; height:55px; } #subheader { font-size:small; color: #cfcfcf; text-align:right; } #leftPane{ margin: 0; padding: 5px; width: 250px; color: #3C1700; background-color: #fff; } .ds { background: #000; overflow: hidden; position: absolute; z-index: 2; } #ds-h div { width: 100%; } #ds-l div { height: 100%; } #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; } </style> <style> html, body { height: 97%; width: 98%; margin: 1%; } #rightPane { width: 20%; } #legendPane { border: solid #97DCF2 1px; } </style> <script type="text/javascript"> dojo.require("dijit.layout.BorderContainer"); dojo.require("dijit.layout.ContentPane"); dojo.require("esri.map"); dojo.require("esri.layers.FeatureLayer"); dojo.require("esri.dijit.Bookmarks"); dojo.require("esri.dijit.OverviewMap"); dojo.require("esri.dijit.Scalebar"); dojo.require("esri.dijit.Legend"); var map; var editorWidget; dojo.addOnLoad(function () { map = new esri.Map("map"); var layer = new esri.layers.ArcGISTiledMapServiceLayer("http://localhost:6080/arcgis/rest/services/test/MapServer"); map.addLayer(layer); // Create the bookmark widget // specify "editable" as true to enable editing var bookmark = new esri.dijit.Bookmarks({ map: map, bookmarks: [], editable: true }, dojo.byId('bookmark')); var scalebar = new esri.dijit.Scalebar({ map: map, // "dual" displays both miles and kilmometers // "english" is the default, which displays miles // use "metric" for kilometers scalebarUnit: "dual" }); var overviewMapDijit = new esri.dijit.OverviewMap({ map: map, visible: true }); overviewMapDijit.startup(); var legendLayers = []; legendLayers.push({ layer: layer, title: 'test' }); map.on('layers-add-result', function () { var legend = new Legend({ map: map, layerInfos: legendLayers }, "legendDiv"); legend.startup(); }); </script> </head> <body class="claro"> <div id="mainWindow" data-dojo-type="dijit.layout.BorderContainer" data-dojo-props="design:'headline',gutters:false" style=" 1200px; height: 800px; margin: 0;"> <div id="leftPane" data-dojo-type="dijit.layout.ContentPane" data-dojo-props="region:'left'"> <div id="bookmark"></div> </div> <div id="rightPane" data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'right'"> <div data-dojo-type="dijit/layout/AccordionContainer"> <div data-dojo-type="dijit/layout/ContentPane" id="legendPane" data-dojo-props="title:'图例', selected:true"> <div id="legendDiv"></div> </div> </div> </div> <div id="map" class="shadow" data-dojo-type="dijit.layout.ContentPane" data-dojo-props="region:'center'"> <div id="ds"> <!-- drop shadow divs --> <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-l"> <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> </body> </html>