ArcGIS.Server.9.3和ArcGIS API for JavaScript地图实现Toorbar功能（四）

转自：http://www.cnblogs.com/hll2008/archive/2008/11/22/1338630.html

目的：
1.ArcGIS API for JavaScript实现Toorbar功能，包括zoomin、zoomout、zoomfullext、zoomToPrevExtent、zoomToNextExtent、pan等。
准备工作：
1.在使用在线的http://server.arcgisonline.com/ArcGIS/rest/services/ESRI_StreetMap_World_2D/MapServer地图数据和jsapi。
完成后的效果图：

开始
1.启动vs新建名为MapToolbar的ASP.NET Web应用程序。其实jsapi是纯客户端的开发了不需要vs也不需要.net了，纯html页面就可以了用记事本都可以开发了。我这里为了方便了就用vs2008了，毕竟可以调试js脚本了。
2.然后在Default.aspx页面里添加对js库和css文件的引用了，这里的引用地址指向在线的jsapi服务了，包括css和js两部分的引用，具体的说明和代码如下：

<link rel="stylesheet" type="text/css" href="http://serverapi.arcgisonline.com/jsapi/arcgis/1.1/js/dojo/dijit/themes/tundra/tundra.css">

    <script type="text/javascript" src="http://serverapi.arcgisonline.com/jsapi/arcgis/?v=1.1"></script>

3.接着在工程中添加名为javascript的文件夹并且在这个文件夹里新建mapApp.js的文件，这里用来编写我们自己的js代码了，在页面里添加对这个js文件的引用，同时在Default.aspx页面里添加一个id为map的div标签作为地图控件的载体，同时在添加7个小图并且让小图漂浮在map的div之上用来作为toolbar的功能按钮，在map空的4个边以及4个顶点添加8个小图片用来作为地图8个方向的移动按钮，添加完成后的html代码如下：


<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="MapToolbar._Default" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" >

<head runat="server">

    <title>Untitled Page</title>

    <link rel="stylesheet" type="text/css" href="http://serverapi.arcgisonline.com/jsapi/arcgis/1.1/js/dojo/dijit/themes/tundra/tundra.css">

    <script type="text/javascript" src="http://serverapi.arcgisonline.com/jsapi/arcgis/?v=1.1"></script>

    <script type="text/javascript" src="javascript/MapApp.js"></script>

    <style type="text/css">

<!--

.mapbtn {

    border: 1px solid #666666;

    background-color: #FFFFFF;

}

-->

    </style>

</head>

<body class="tundra">

    <form id="form1" runat="server"><table border="0" cellspacing="0" cellpadding="0">

  <tr>

    <td><img src="data:images/ul.png" width="15" height="15"  onclick="map.panUpperLeft()" /></td>

    <td align="center"><img src="data:images/u.png" width="15" height="15" onclick="map.panUp()" /></td>

    <td><img src="data:images/ur.png" width="15" height="15"  onclick="map.panUpperRight()" /></td>

  </tr>

  <tr>

    <td><img src="data:images/l.png" width="15" height="15" onclick="map.panLeft()"/></td>

    <td>

    <div id="map" style="width:600px; height:512px; border:1px solid #000;"></div>

    <img style="Z-INDEX: 151; LEFT: 292px; CURSOR: hand; POSITION: absolute; TOP: 57px; right: 642px;" 

            alt="" src="data:images/nav_zoomin.png" name="zoomin" id="zoomin" class="mapbtn" 

            onClick="navToolbar.activate(esri.toolbars.Navigation.ZOOM_IN);">

    <img style="Z-INDEX: 151; LEFT: 330px; CURSOR: hand; POSITION: absolute; TOP: 57px" 

            alt="" src="data:images/nav_zoomout.png"  name="zoomout" id="zoomout"  

            class="mapbtn" 

            onClick="navToolbar.activate(esri.toolbars.Navigation.ZOOM_OUT);">

    <img style="Z-INDEX: 151; LEFT: 368px; CURSOR: hand; POSITION: absolute; TOP: 57px" 

            alt="" src="data:images/nav_fullextent.png" name="zoomfullext" id="zoomfullext" 

            class="mapbtn" onClick="navToolbar.zoomToFullExtent();"> 

    <img style="Z-INDEX: 151; LEFT: 412px; CURSOR: hand; POSITION: absolute; TOP: 56px" 

            alt="" src="data:images/d-nav_previous.png" name="zoomprev" id="zoomprev" 

            class="mapbtn" onClick="navToolbar.zoomToPrevExtent();">

    <img style="Z-INDEX: 151; LEFT: 458px; CURSOR: hand; POSITION: absolute; TOP: 55px" 

            alt="" src="data:images/d-nav_next.png" name="zoomnext" id="zoomnext" class="mapbtn" 

            onClick="navToolbar.zoomToNextExtent();">

    <img style="Z-INDEX: 151; LEFT: 502px; CURSOR: hand; POSITION: absolute; TOP: 55px" 

            alt="" src="data:images/nav_pan.png" name="pan" id="pan" class="mapbtn" 

            onClick="navToolbar.activate(esri.toolbars.Navigation.PAN);">

    <img style="Z-INDEX: 151; LEFT: 544px; CURSOR: hand; POSITION: absolute; TOP: 55px; right: 390px;" 

            alt="" src="data:images/nav_decline.png" name="deactivate" id="deactivate" 

            class="mapbtn" onClick="navToolbar.deactivate()">   </td>

    <td><img src="data:images/r.png" width="15" height="15" onclick="map.panRight()"/></td>

  </tr>

  <tr>

    <td><img src="data:images/dl.png" width="15" height="15" onclick="map.panLowerLeft()"/></td>

    <td align="center"><img src="data:images/d.png" width="15" height="15"  onclick="map.panDown()"/></td>

    <td><img src="data:images/dr.png" width="15" height="15"  onclick="map.panLowerRight()" /></td>

  </tr>

</table>

    </form>

</body>

</html>

4.上面的html中使图片漂浮在map上面是通过样式实现的，map上的7个图片按钮都有这样的样式设置：style="Z-INDEX: 151; LEFT: 292px; CURSOR: hand; POSITION: absolute; TOP: 57px; right: 642px;"这样就能让图片按钮漂浮在map控件上了。
5.还有上面的7个功能按钮以及8个方向的移动按钮都添加的onclick事件了，这些事件就是调用esri.toolbars.Navigation控件的方法或esri.Map控件的方法实现的，具体的看代码了。
6.完成页面后切换到wabapp.js文件开始编写js的功能代码，这里的js代码要完成载入地图进行显示的功能和地图前一视图后一视图的功能按钮的状态控制了，具体的看如下代码：


dojo.require("esri.map");

dojo.require("esri.toolbars.navigation");

var map, navToolbar;

function init()

{

   map = new esri.Map("map");

   map.addLayer(new esri.layers.ArcGISTiledMapServiceLayer("http://server.arcgisonline.com/ArcGIS/rest/services/ESRI_StreetMap_World_2D/MapServer"));

   navToolbar = new esri.toolbars.Navigation(map);

   dojo.connect(navToolbar, "onExtentHistoryChange", extentHistoryChangeHandler);

 }

 

//当地图视图发生变化时后判定前一视图和后一视图的状态

function extentHistoryChangeHandler()

{

   if(!navToolbar.isFirstExtent())

   {

      dojo.byId("zoomprev").disabled=false;

      dojo.byId("zoomprev").src="data:images/nav_previous.png";

   }

   else

   {

      dojo.byId("zoomprev").disabled=true;

      dojo.byId("zoomprev").src="data:images/d-nav_previous.png";

   }

   

   if(!navToolbar.isLastExtent())

   {

      dojo.byId("zoomnext").disabled=false;

      dojo.byId("zoomnext").src="data:images/nav_next.png";

   }

   else

   {

      dojo.byId("zoomnext").disabled=true;

      dojo.byId("zoomnext").src="data:images/d-nav_next.png";

   }

}

dojo.addOnLoad(init);

7.这样很简单的就实现了toolbar的一系列功能按钮。

ArcGIS.Server.9.3和ArcGIS API for JavaScript地图实现Toorbar功能（四）的更多相关文章

ArcGIS Server Java 9.3 REST API的中文查询问题的解决方案
[2009.2.18补注]这个问题在SP1 for Linux中修复,SP1 for Windows下问题更加严重,如果打了SP1 for Windows,还想使用REST服务,就必须使用Linux或 ...
ArcGIS api for javascript——地图配置-增加一个调试控制台<
描述该示例展示了在应用中如何包含一个Dojo调试控制台.可以写信息到控制台来记录发生的事件和应用运行时设置的属性.当调试Internet Explorer浏览器的错误时这是极为有帮助的.(对Fire ...
ArcGIS api for javascript——地图配置-定制缩放动画，定制缩放框
描述本例展示了当用户放大或缩小地图时如何定义地图的动画.zoomDuration和zoomRate是Dojo动画属性,他们确定了动画的duration和帧刷新的rate .这些属性单位是毫秒,zoo ...
ArcGIS api for javascript——地图配置-定制缩放动画
描述本例展示了当用户放大或缩小地图时如何定义地图的动画.zoomDuration和zoomRate是Dojo动画属性,他们确定了动画的duration和帧刷新的rate .这些属性单位是毫秒,zoo ...
ArcGIS api for javascript——地图配置-滑动器的刻度线、方向、大小的改变
描述本例展示了如果删除缩放等级滑动器的刻度线.通过设置esriConfig里的sliderLabel为null来实现: esriConfig.defaults.map.sliderLabel = n ...
ArcGIS api for javascript——地图配置-
描述本例展示了如果删除缩放等级滑动器的刻度线.通过设置esriConfig里的sliderLabel为null来实现: esriConfig.defaults.map.sliderLabel = n ...
ArcGIS api for javascript——地图配置-增加标注到滑动器
描述 ArcGISTiledMapServiceLayer,这意味着图层有一个在明确的比例的预先渲染的地图切片的cache.能够从tileInfo属性获得图层的的缓存比例数组.这是本例中标注如何被得到 ...
ArcGIS api for javascript——地图配置-定制平移动画
描述本例展示了当用户点击平移按钮时如何定制地图的动画.panDuration和panRate是Dojo动画属性,可以分别确定动画的duration和帧刷新的rate.这些属性的单位都是毫秒,panD ...
ArcGIS api for javascript——地图配置-定制导航箭头
描述本例展示了如何为平移地图包括自定义的按钮.地图被放置在一个宽3列和高3行的HTML表格的固定宽度中心单元.表格里剩余的单元放置标签为8个主要方向的缩写的按钮.每个按钮调用地图上不同的平移函数.例 ...

随机推荐

懒惰的JY--关于遍历
先上题: [问题描述] 众所周知,JY的百度搜索算法已经练的炉火纯青,任何搜索题都能0.000ms出解. 不幸的是,JY遇到了一道百度搜索算法解决不了的题目,题目是这样的: 给定N个数A[1] A[2 ...
vs2010 使用SignalR 提高B2C商城用户体验（二）
vs2010 使用SignalR 提高B2C商城用户体验(二) 上一节,已经实现了,当前域内的通信,这一节中,介绍一下跨域的即时通信,既然要做,我们肯定要把这个推送及聊天服务器做为一个单独的服务器,以 ...
springmvc 数据对象回绑
springmvc中,由页面 post到 controller,对象可以在form里面设置modelAttribute达到回绑的目的. 但是如果对象里面有复杂的非String,int的对象,则要在co ...
window.location.hash属性介绍
location是javascript里边管理地址栏的内置对象,比如location.href就管理页面的url,用location.href=url就可以直接将页面重定向url.而location. ...
zTree -- jQuery 树插件
http://www.ztree.me/v3/main.php#_zTreeInfo http://plugins.jquery.com/zTree.v3/ 例子:http://www.ztree.m ...
BZOJ 1593: [Usaco2008 Feb]Hotel 旅馆
Description 奶牛们最近的旅游计划,是到苏必利尔湖畔,享受那里的湖光山色,以及明媚的阳光.作为整个旅游的策划者和负责人,贝茜选择在湖边的一家著名的旅馆住宿.这个巨大的旅馆一共有N (1 &l ...
自助Linux之问题诊断工具strace
转 http://www.cnblogs.com/bangerlee/archive/2012/02/20/2356818.html 引言 “Oops,系统挂死了..." “Oops,程序 ...
Jmeter 使用实践 - 接口 diff 测试
大多数人都使用 Jmeter 做过性能测试,但是在使用的过程中你会发现,它不仅可以做性能测试和功能测试,还能够满足基本的接口测试需求. 相比其他工具,Jmeter 入门门槛较低,安装也比较方便,根据自 ...
VS2005(vs2008,vs2010)使用map文件查找程序崩溃原因
VS 2005使用map文件查找程序崩溃原因一般程序崩溃可以通过debug,找到程序在那一行代码崩溃了,最近编一个多线程的程序,都不知道在那发生错误,多线程并发,又不好单行调试,终于找到一个比较好的 ...
【leetcode】Divide Two Integers （middle）☆
Divide two integers without using multiplication, division and mod operator. If it is overflow, retu ...

ArcGIS.Server.9.3和ArcGIS API for JavaScript地图实现Toorbar功能（四）

ArcGIS.Server.9.3和ArcGIS API for JavaScript地图实现Toorbar功能（四）的更多相关文章

随机推荐

热门专题