描述

本例展示了如何为平移地图包括自定义的按钮。地图被放置在一个宽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. ActiveMQ学习笔记（10）----ActiveMQ容错的连接

    1. Failover Protocol 前面讲述的都是Client配置连接到指定的broker上,但是,如果Broker的连接失败怎么办呢?此时,Client有两个选项:要么立刻死掉,要么连接到其他 ...

  2. 利用SignalR来同步更新Winfrom

    之前写了个用Socket来更新多个Winfrom的试例,这两天看了下SignalR,也用这个来试一下 SignalR 地址:https://www.asp.net/signalr 我这个也是基于 ht ...

  3. [ZJOI2015]诸神眷顾的幻想乡 广义后缀自动机_DFS_语文题

    才知道题目中是只有20个叶子节点的意思QAQ.... 这次的广义后缀自动机只是将 last 设为 1, 并重新插入. 相比于正统的写法,比较浪费空间. Code: #include <cstdi ...

  4. python对比图片

    通过python的PIL模块可以对比两张图片是否相同,具体源码如下 from PIL import Image from PIL import ImageChops def compare_image ...

  5. Node_进阶_3

    Express框架: 一.   Express框架 Express框架是后台的Node框架,类似于JS中的jquery. #原生Node开发会有很多问题: 1呈递静态页面很不方便,需要处理每个HTTP ...

  6. SASS 使用(安装)

    一.安装SASS 1.sass基于Ruby语言开发而成,因此安装sass前需要安装Ruby.(注:mac下自带Ruby无需在安装Ruby!) 2.安装过程中请注意勾选Add Ruby executab ...

  7. Camera Calibration 相机标定：Opencv应用方法

    本系列文章由 @YhL_Leo 出品,转载请注明出处. 文章链接: http://blog.csdn.net/yhl_leo/article/details/49427383 Opencv中Camer ...

  8. Camera Calibration 相机标定：原理简介（五）

    5 基于2D标定物的标定方法 基于2D标定物的标定方法,原理与基于3D标定物相同,只是通过相机对一个平面进行成像,就可得到相机的标定参数,由于标定物为平面,本身所具有的约束条机,相对后者标定更为简单. ...

  9. 面试题——ArrayList和LinkedList的区别

    List概括 先回顾一下List在Collection的框架图: 从图中可以看出: List是一个接口,他继承Collection接口,代表有序的队列. AbstractList是一个抽象类, ,它继 ...

  10. hdu 4288 线段树+离线+离散化

    http://acm.hdu.edu.cn/showproblem.php?pid=4288 開始的时候,果断TLE,做的方法是,线段树上只维护%5==3的坐标,比方1 2 3 4 5 6 7  假设 ...