arcgis api for js 之 地图操作

1. 地图窗口操作

在 ArcGis Javascrippt API 中可以使用esri/toolbars/Navigation类来实现对窗口的操作，必须实例化一个该类的对象，然后调用该对象的方法即可，例如以下代码可以实现对地图的漫游操作：

 require(["esri/map", "esri/layers/ArcGISDynamicMapServiceLayer", "esri/toolbars/navigation","dojo/domReady!"],
            function (Map, ArcGISDynamicMapServiceLayer, Navigation) {
               var map = new Map("mapDiv");
               var navToolbar = new Navigation(map);
               navToolbar.activate(Navigation.PAN);
                }

实现放大、缩小操作的代码分别是：

navToolbar.activate(Navigation.ZOOM_IN);
navToolbar.activate(Navigation.ZOOM_OUT);

实例化的导航对象，它包含三个常量，分别为 PAN：地图平移。ZOOM_IN：地图放大。ZOOM_OUT： 地图缩小。其包含的方法有：

isFirstExtent（） 返回值为：Boolean ，当“真”时，地图处于第一程度。
isLastExtent（） 返回值为：Boolean ，当“真”时，地图在最后的程度。
zoomToFullExtent（）无返回值，实现地图放大到基础层的初始范围。
zoomToNextExtent（）无返回值，实现地图返回到下一视图。
zoomToPrevExtent（）无返回值， 实现地图返回到上一试图。

2. 实现代码

• 核心代码如下：

    var map, navToolbar;
        var navOption; // 当前选择的操作
        require(["dojo/parser", "esri/map", "esri/layers/ArcGISDynamicMapServiceLayer", "esri/toolbars/navigation",
                "dojo/query", "dojo/domReady!"],
            function (parser, Map, ArcGISDynamicMapServiceLayer, Navigation, query) {
                map = new Map("mapDiv");
                var agoServiceURL ="http://localhost:6080/arcgis/rest/services/nongda/农大/MapServer";
                var agoLayer = new ArcGISDynamicMapServiceLayer(agoServiceURL);
                map.addLayer(agoLayer);

                map.on('load', setupNavBar);

                function setupNavBar() {
                    navToolbar = new Navigation(map);
//                    获取到类名为aside的div，然后添加onclick事件，并获取父节点的id
                    query(".aside").onclick(function (evt) {
                        navEvent(evt.target.parentNode.id);
                    });
                    // 将漫游设置为默认操作
                    navEvent('deactivate');
                }

                function navEvent(id) {
                    switch (id) {
                        case 'pan':
                            map.enablePan();
                            navToolbar.activate(Navigation.PAN);
                            navOption = id;
                            break;
                        case 'zoomprev':
                            navToolbar.zoomToPrevExtent();
                            break;
                        case 'zoomnext':
                            navToolbar.zoomToNextExtent();
                            break;
                        case 'extent':
                            navToolbar.zoomToFullExtent();
                            break;
                        case 'zoomin':
                            navToolbar.activate(Navigation.ZOOM_IN);
                            navOption = id;
                            break;
                        case 'zoomout':
                            navToolbar.activate(Navigation.ZOOM_OUT);
                            navOption = id;
                            break;
                        case 'deactivate':
                            navToolbar.deactivate();
                            navOption = id;
                            break;
                    }
                }
            });

3. 代码解析

在上面的代码中，当地图加载时后调用 setupNavBar 函数，（map.on('load', setupNavBar);）该函数用于设置地图窗口操作按钮的 onclick 事件响应代码，然后通过 navEvent 函数，实现操作。

4 . 实现效果