ArcGIS api for javascript——地图配置-定制导航箭头

Posted xiaotian_小天

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了ArcGIS api for javascript——地图配置-定制导航箭头相关的知识,希望对你有一定的参考价值。

描述

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

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

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

 1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
 2 <html>
 3   <head>
 4     <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
 5     <meta http-equiv="X-UA-Compatible" content="IE=7" />
 6     <title>定制导航箭头</title>
 7     <link rel="stylesheet" type="text/css" href="http://serverapi.arcgisonline.com/jsapi/arcgis/1.5/js/dojo/dijit/themes/tundra/tundra.css">
 8     <script type="text/javascript" src="http://serverapi.arcgisonline.com/jsapi/arcgis/?v=1.5"></script>
 9     <script type="text/javascript">
10         dojo.require("esri.map");
11 
12         var map;
13         function init() {
14           map = new esri.Map("map");
15           map.addLayer(new esri.layers.ArcGISTiledMapServiceLayer("http://server.arcgisonline.com/ArcGIS/rest/services/ESRI_Imagery_World_2D/MapServer"));
16       }
17 
18       dojo.addOnLoad(init);
19     </script>
20   </head>
21   <body >
22     This application shows how to create custom navigation buttons.
23     <table bgcolor="#eee">
24         <tbody>
25             <tr>
26               <td><button onclick="map.panUpperLeft();">NW</button></td>
27               <td align="center"><button onclick="map.panUp">N</button></td>
28               <td><button onclick="map.panUpperRight();">NE</button></td>            
29             </tr>
30             <tr>
31               <td valign="middle"><button onclick="map.panLeft();">W</button></td>
32               <td><div id="map" class="soria" style="width: 1024px;height: 512px;border: 1px solid #000"></div></td>
33               <td valign="middle"><button onclick="map.panRight();">E</button></td>
34             </tr>
35             <tr>
36               <td><button onclick="map.panLowerLeft();">SW</button></td>
37               <td align="center"><button onclick="map.panDown();">S</button></td>
38               <td><button onclick="map.panLowerRight();">SE</button></td>
39             </tr>            
40         </tbody> 
41     </table>
42   </body>
43 </html>

 

以上是关于ArcGIS api for javascript——地图配置-定制导航箭头的主要内容,如果未能解决你的问题,请参考以下文章

arcgis api for javascript 4.10版本的本地部署

Map学习(arcgis api for javascript3.18)

ArcGIS API for JavaScript学习:第一个地图

ArcGIS API for JavaScript

arcgis api for javascript怎么加载天地图的影像图

如何利用arcgis api for javascript在graphicslayer绘制点线面