3、Server API for JavaScript使用地图工具条
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;
}
}
}
效果截图：
