1. 效果图
2. 引用模块
鹰眼图"esri/dijit/OverviewMap",
3. 增加了一个鹰眼图，div的布局会不会有什么变化？
<body>
<div id="map" style="height: 800px;"></div>
<button>拉框放大</button>
<button>拉框缩小</button>
<button>平移</button>
<button>全图</button>
<button>漫游</button>
</body>
嗯，，，似乎是没有任何变化
这样看来。鹰眼图就像是map的属性一样，本身便存在，需要设置它的setVisibleXX来控制它的可见性。我猜是这样
4. 看一下JS代码证实一下猜想
var overviewMapDijit = new OverviewMap({
map: map,
//LOOK LOOK
visible: true
});
overviewMapDijit.startup();
OverviewMap就是创建鹰眼图的类。
创建参数中第一个绑定地图。第二个就是设置鹰眼图的可见性。
并且它的可见性默认是false（亲测）
5. 试试在上一篇中的绑定小部件上加上鹰眼图，贴代码
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no">
<title>Overview Map</title>
<link rel="stylesheet" href="https://js.arcgis.com/3.28/esri/css/esri.css"/>
<style>
html, body { height: 100%; width: 100%; margin: 0; padding: 0; }
</style>
<script src="https://js.arcgis.com/3.29/"></script>
<script>
var map;
require([
"esri/map", "esri/dijit/OverviewMap",
"dojo/parser",
"esri/layers/ArcGISDynamicMapServiceLayer",
"dojo/query","esri/toolbars/navigation",
"dijit/layout/BorderContainer", "dijit/layout/ContentPane", "dojo/domReady!"
], function (
Map, OverviewMap, parser,ArcGISDynamicMapServiceLayer,query,Navigation) {
parser.parse();
map = new Map("map");
var layer = new ArcGISDynamicMapServiceLayer
("http://localhost:6080/arcgis/rest/services/ecology/beijing_2012_3/MapServer");
map.addLayer(layer);
var overviewMapDijit = new OverviewMap({
map: map,
visible: true
});
overviewMapDijit.startup();
//创建地图操作对象
var navToolbar = new Navigation(map);
//给按钮添加绑定事件
query("button").on("click",function(event){
//获得按钮的文本信息
var value=this.innerHTML;
switch(value){
case "平移":
navToolbar.activate(Navigation.PAN);
break;
case "拉框缩小":
navToolbar.activate(Navigation.ZOOM_OUT);
break;
case "拉框放大":
navToolbar.activate(Navigation.ZOOM_IN);
break;
case "全图":
navToolbar.zoomToFullExtent();
break;
case "漫游":
//默认是漫游操作
navToolbar.deactivate();
break;
}
});
});
</script>
</head>
<body>
<div id="map" style="height: 800px;"></div>
<button>拉框放大</button>
<button>拉框缩小</button>
<button>平移</button>
<button>全图</button>
<button>漫游</button>
</body>
</html>