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学习：第一个地图