Server API for JavaScript使用地图工具条
1、 首先完成简单地图发布，具体方法见（2、Server API for JavaScript简单地图发布）；
2、 准备按钮，在网页中添加按钮，分别用来处理地图基本操作。
将按钮加入层中，设置层的Z_index值为较大的数，可以是toolbar浮动在地图上面
效果为：
3、 本例的代码放置于专门的文件中名字为：mapApp.js。
在js文件中增加地图控制库的引用，使用
dojo.require("esri.toolbars.navigation");引用Navigation库，其中封装了对地图浏览的常见应用。
实例化Navigation对象：
toolbarNav=new esri.toolbars.Navigation(map);//实例化Navigation并绑定操作的map控件
其中的map为地图实例，这样就将Navigation绑定到了特定的地图上
4、 为按钮加入代码，在js文件中定义函数Navigation（tool），其中tool用来判断传入的是什么操作。具体代码为：
//地图浏览控制函数，按钮相应事件 function Navigation(tool) { switch(tool) { case "zoomin"://放大 { navToolbar.activate(esri.toolbars.Navigation.ZOOM_IN); break; } case "zoomout"://缩小 { navToolbar.activate(esri.toolbars.Navigation.ZOOM_OUT); break; } case "pan"://平移 { navToolbar.activate(esri.toolbars.Navigation.PAN); break; } case "preview"://上一视图 { navToolbar.zoomToPrevExtent(); break; } case "nextview"://下一视图 { navToolbar.zoomToNextExtent(); break; } case "fullextent"://全图显示 { navToolbar.zoomToFullExtent(); break; } } }
5、 在按钮中加入onclick事件，调用Navigation函数，完成地图浏览基本操作，代码为：
<input id="zoomin" type="button" value="放大" onclick="Navigation(this.id)"/> <input id="zoomout" type="button" value="缩小" onclick="Navigation(this.id)"/> <input id="pan" type="button" value="平移" onclick="Navigation(this.id)"/> <input id="preview" type="button" value="上一视图" onclick="Navigation(this.id)"/> <input id="nextview" type="button" value="下一视图" onclick="Navigation(this.id)"/> <input id="fullextent" type="button" value="全图" onclick="Navigation(this.id)"/>
至此完成地图的简单操作功能！下面做完善。
6、 完善“上一视图”“下一视图”按钮可用状态。
判断是否存在上下视图的函数为Navigation的isFirstExtent()和isLastExtent()，关键这个判断在什么时候执行，也就是写在什么事件里面。我们可以想到，每次地图范围更新时都要判断这个状态。ESRI提供了一个事件监听："onExtentHistoryChange"，用来判断范围是否有变化，可以使用他来实现判断，本例使用ExtentHistoryChangeHandler()函数来执行监听后的事件。实现方法如下：
在程序中将“onExtentHistoryChange”事件监听绑定到Navigation控件和监听事件：
dojo.connect(navToolbar, "onExtentHistoryChange", extentHistoryChangeHandler);
监听事件按定义为：
//地图范围变化的事件 function extentHistoryChangeHandler() { document.getElementById("preview").disabled=navToolbar.isFirstExtent();//前一视图按钮不可用 document.getElementById("nextview").disabled=navToolbar.isLastExtent();//后一视图按钮不可用 }
但是此方法有个问题：
第一次放大或缩小后他不会做判断，第二次地图范围变化才会判断
至此完成所有操作！
程序代码：mapApp.js：
//地图浏览代码 dojo.require("esri.map");//注册引用map控件 dojo.require("esri.toolbars.navigation")//注册引用Navigation对象 var map, navToolbar; function init() { map = new esri.Map("map");//实例化map控件 var dynamicMapServiceLayer = new esri.layers.ArcGISDynamicMapServiceLayer("http://localhost/ArcGIS/rest/services/China/MapServer"); map.addLayer(dynamicMapServiceLayer);//加载图层 navToolbar=new esri.toolbars.Navigation(map);//实例化Navigation并绑定操作的map控件 dojo.connect(navToolbar, "onExtentHistoryChange", extentHistoryChangeHandler);//为Navigation绑定事件监听 } dojo.addOnLoad(init);//加载是调用init初始化地图 //地图范围变化的事件 function extentHistoryChangeHandler() { document.getElementById("preview").disabled=navToolbar.isFirstExtent();//前一视图按钮不可用 document.getElementById("nextview").disabled=navToolbar.isLastExtent();//后一视图按钮不可用 } //地图浏览控制函数，按钮相应事件 function Navigation(tool) { switch(tool) { case "zoomin"://放大 { navToolbar.activate(esri.toolbars.Navigation.ZOOM_IN); break; } case "zoomout"://缩小 { navToolbar.activate(esri.toolbars.Navigation.ZOOM_OUT); break; } case "pan"://平移 { navToolbar.activate(esri.toolbars.Navigation.PAN); break; } case "preview"://上一视图 { navToolbar.zoomToPrevExtent(); break; } case "nextview"://下一视图 { navToolbar.zoomToNextExtent(); break; } case "fullextent"://全图显示 { navToolbar.zoomToFullExtent(); break; } } }
效果截图：
