小部件---鹰眼图 | 易学教程

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>

6. 结果

来源：https://blog.csdn.net/DanBo_C/article/details/98978096

标签

鹰眼