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; 

} 

} 

} 

效果截图：