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;

      }

      }

     }

效果截图：