小部件---绑定小部件

鼠标滚轮的放大缩小是地图的加载就有的操作方法，绑定的是拉框放大，缩小，全图等方法。

先看看效果图（拉框放大为例）

放大前：

拉框放大：

放大后：

"dojo/query"绑定点击事件，注意：该点击事件凡是操作地图的要用query不能用on绑定
例如：query("button").on("click",function(event){}✔
on(dom.byId("button"),"click",function(event){}❌
"esri/toolbars/navigation"实现对地图的操作
首先创建地图操作对象，给but等绑定该对象的方法。例如放大、缩小等。

步骤：

加载地图

var map = new Map("mapDiv");
var layer = new ArcGISDynamicMapServiceLayer
            ("http://localhost:6080/arcgis/rest/services/ecology/beijing_2012_3/MapServer");
map.addLayer(layer);

创建地图操作对象
```
var navToolbar = new Navigation(map);
```
为btn绑定事件

query("button").on("click",function(event){

获取btn的识别信息

var value=this.innerHTML;

switch选择合适的操作方法

switch(value){
    case "平移":
        navToolbar.activate(Navigation.PAN);
        break;                            
    case "拉框缩小":
        navToolbar.activate(Navigation.ZOOM_OUT);
        break;
    case "拉框放大":
        navToolbar.activate(Navigation.ZOOM_IN);
        break;
}

贴代码：

<!DOCTYPE html>
<html>

<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <link rel="stylesheet" href="https://js.arcgis.com/3.28/esri/css/esri.css"/>
    <script src="https://js.arcgis.com/3.28/"></script>
    <style type="text/css">
        .MapClass{
            width:100%;
            height:600px;
            border:1px solid #000;
        }
    </style>
    <script type="text/javascript">

        require(["esri/map",
            "esri/layers/ArcGISDynamicMapServiceLayer",
            "dojo/query","esri/toolbars/navigation",
            "dojo/domReady!"],
            function (Map,ArcGISDynamicMapServiceLayer,query,Navigation) {
                var map = new Map("mapDiv");
                var layer = new ArcGISDynamicMapServiceLayer
                ("http://localhost:6080/arcgis/rest/services/ecology/beijing_2012_3/MapServer");
                map.addLayer(layer);
                //创建地图操作对象
                var navToolbar = new Navigation(map);
                //为btn绑定事件
                query("button").on("click",function(event){
                    //获得btn的识别信息
                    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 class="tundra">
    <div id="mapDiv" class="MapClass"></div>
    <button>拉框放大</button>
    <button>拉框缩小</button>
    <button>平移</button>
    <button>全图</button> 
    <button>漫游</button>
</body>
</html>

小部件---绑定小部件

小部件---绑定小部件

先看看效果图（拉框放大为例）

放大前：

拉框放大：

放大后：

新添加模块：”dojo/query” “esri/toolbars/navigation”

步骤：

贴代码：

结果图