3.示例:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>书签</title> <link rel="stylesheet" type="text/css" href="http://localhost/arcgis_js_api/library/3.17/3.17/dijit/themes/tundra/tundra.css"/> <link rel="stylesheet" type="text/css" href="http://localhost/arcgis_js_api/library/3.17/3.17/esri/css/esri.css"/> <script type="text/javascript" src="http://localhost/arcgis_js_api/library/3.17/3.17/init.js"></script> <style type="text/css"> .MapClass { width: 100%; height: 600px; border: 1px solid #000; position: relative; } </style> <script type="text/Javascript"> require(["esri/map","esri/dijit/OverviewMap","esri/dijit/Scalebar"], function (Map, OverviewMap, Scalebar) { var MyMap = new Map("MyMapDiv",{ logo:false //取消esri的logo }); var layer = new esri.layers.ArcGISDynamicMapServiceLayer("http://localhost:6080/arcgis/rest/services/TestServer/MyMapService/MapServer"); MyMap.addLayer(layer); var MapViewer = new OverviewMap({ attachTo: "top-right",//鹰眼显示位置 maximizeButton: true,//显示最大化按钮 map: MyMap,//设置显示鹰眼图的基础图 visible: true,//显示鹰眼图可见按钮 width: 150,//设置鹰眼的div大小 height: 150 }); MapViewer.startup(); var scale = new Scalebar({ map: MyMap, attachTo: "bottom-left", scalebarUnits: "english" }); scale.show(); }); </script> </head> <body> <div id="MyMapDiv" class="MapClass"></div> </body> </html>结果图: