描述

本例展示了如何为平移地图包括自定义的按钮。地图被放置在一个宽3列和高3行的HTML表格的固定宽度中心单元。表格里剩余的单元放置标签为8个主要方向的缩写的按钮。每个按钮调用地图上不同的平移函数。例如，"NW"按钮调用map.panUpperLeft。

<button onclick="map.panUpperLeft();" ID="Button1">NW</button>

在自己的应用里，可以选择任意按钮的格式。甚至可以选择使用图片或者其他控件代替按钮。

 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

 <html>

   <head>

     <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

     <meta http-equiv="X-UA-Compatible" content="IE=7" />

     <title>定制导航箭头</title>

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

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

     <script type="text/javascript">

         dojo.require("esri.map");

         var map;

         function init() {

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

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

       }

       dojo.addOnLoad(init);

     </script>

   </head>

   <body >

     This application shows how to create custom navigation buttons.

     <table bgcolor="#eee">

         <tbody>

             <tr>

               <td><button onclick="map.panUpperLeft();">NW</button></td>

               <td align="center"><button onclick="map.panUp">N</button></td>

               <td><button onclick="map.panUpperRight();">NE</button></td>

             </tr>

             <tr>

               <td valign="middle"><button onclick="map.panLeft();">W</button></td>

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

               <td valign="middle"><button onclick="map.panRight();">E</button></td>

             </tr>

             <tr>

               <td><button onclick="map.panLowerLeft();">SW</button></td>

               <td align="center"><button onclick="map.panDown();">S</button></td>

               <td><button onclick="map.panLowerRight();">SE</button></td>

             </tr>

         </tbody>

     </table>

   </body>

 </html>

ArcGIS api for javascript——地图配置-定制导航箭头的更多相关文章

  1. ArcGIS api for javascript——地图配置-定制缩放动画，定制缩放框

    描述 本例展示了当用户放大或缩小地图时如何定义地图的动画.zoomDuration和zoomRate是Dojo动画属性,他们确定了动画的duration和帧刷新的rate .这些属性单位是毫秒,zoo ...

  2. ArcGIS api for javascript——地图配置-定制缩放动画

    描述 本例展示了当用户放大或缩小地图时如何定义地图的动画.zoomDuration和zoomRate是Dojo动画属性,他们确定了动画的duration和帧刷新的rate .这些属性单位是毫秒,zoo ...

  3. ArcGIS api for javascript——地图配置-定制平移动画

    描述 本例展示了当用户点击平移按钮时如何定制地图的动画.panDuration和panRate是Dojo动画属性,可以分别确定动画的duration和帧刷新的rate.这些属性的单位都是毫秒,panD ...

  4. ArcGIS api for javascript——地图配置-增加一个调试控制台<

    描述 该示例展示了在应用中如何包含一个Dojo调试控制台.可以写信息到控制台来记录发生的事件和应用运行时设置的属性.当调试Internet Explorer浏览器的错误时这是极为有帮助的.(对Fire ...

  5. ArcGIS api for javascript——地图配置-增加标注到滑动器

    描述 ArcGISTiledMapServiceLayer,这意味着图层有一个在明确的比例的预先渲染的地图切片的cache.能够从tileInfo属性获得图层的的缓存比例数组.这是本例中标注如何被得到 ...

  6. ArcGIS api for javascript——地图配置-滑动器的刻度线、方向、大小的改变

    描述 本例展示了如果删除缩放等级滑动器的刻度线.通过设置esriConfig里的sliderLabel为null来实现: esriConfig.defaults.map.sliderLabel = n ...

  7. ArcGIS api for javascript——地图配置-

    描述 本例展示了如果删除缩放等级滑动器的刻度线.通过设置esriConfig里的sliderLabel为null来实现: esriConfig.defaults.map.sliderLabel = n ...

  8. 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实现To ...

  9. ArcGIS api for javascript——图层-创建定制的切片图层类型的图层

    描述 本例展示了如何创建一个定制图层,该图层访问来自WEB服务器的地图切片.这种方式最通用的用途是检索ArcGIS Server 9.2切片缓存或web上的其他地图切片服务.尽管本例使用的是一个Arc ...

随机推荐

  1. hdu 1257/1800 - 贪心，dp

    1257题目链接 一个序列划分子序列,每个子序列都是非增序列,问最少分成几个子序列 1800题目链接 一堆数分组,每组内数据严格递减,问最少分几组 -------------------------- ...

  2. h5 input失去焦点软键盘把页面顶起

    var broswer=localStorage.getItem('temp') //浏览器环境 var u = navigator.userAgent var isiOS = !!u.match(/ ...

  3. HDU-2204- Eddy’s爱好 （容斥原理）

    题意 给出一个数n,问1-n中有多少个数可以表示为m^k,m,k均为正整数且k>1 (1<=n<=1^18) 题解 (一开始^以为是异或懵逼了好久....) 额,显然1这个数比较讨厌 ...

  4. 紫书 习题 11-16 UVa 1669（树形dp）

    想了很久, 以为是网络流最大流, 后来建模建不出来, 无奈. 后来看了 https://blog.csdn.net/hao_zong_yin/article/details/79441180 感觉思路 ...

  5. MySQL中锁详解（行锁、表锁、页锁、悲观锁、乐观锁等）

    原文地址:http://blog.csdn.net/mysteryhaohao/article/details/51669741 锁,在现实生活中是为我们想要隐藏于外界所使用的一种工具.在计算机中,是 ...

  6. 过Hard题目.周末

      # Title Editorial Acceptance Difficulty Frequency   . 65 Valid Number     12.6% Hard    . 126 Word ...

  7. 如何成为一个偷懒又高效的Android开发人员

    我敢肯定你对这个标题肯定心存疑惑,但事实就是如此,这个标题完全适合Android开发人员.据我所知, Android程序员不情愿写 findViewById().点击事件监听等重复率较高的代码.那我们 ...

  8. Android与设计模式——单例(Singleton)模式

    概念: java中单例模式是一种常见的设计模式.单例模式分三种:懒汉式单例.饿汉式单例.登记式单例三种. 单例模式有一下特点: 1.单例类仅仅能有一个实例. 2.单例类必须自己自己创建自己的唯一实例. ...

  9. FZOJ--2214--Knapsack problem(背包)

    Problem 2214 Knapsack problem Accept: 5    Submit: 8 Time Limit: 3000 mSec    Memory Limit : 32768 K ...

  10. react --- React中state和props分别是什么？

    props React的核心思想就是组件化思想,页面会被切分成一些独立的.可复用的组件. 组件从概念上看就是一个函数,可以接受一个参数作为输入值,这个参数就是props,所以可以把props理解为从外 ...