深入浅出 Javascript API（二）--地图显示与基本操作

======================================================

注：本文源代码点此下载

======================================================


body>


div id="mapdiv" class="tundra" style="width:900px; height:600px; border:1px solid #000;">div>


h4>work flow:h4>


ul>


li>create a map.li>


li>add an arcgistiledmapservicelayer.li>


ul>


body>
最终地图将在mapdiv区域绘出。
5.放大缩小平移
esri.map类包含地图放大缩小平移等基本功能的实现,可以将这些操作和业务应用绑定。通过esri.map构造方法生成的地图对象实际已经包含一些 基础操作的快捷方式,如键盘方向键上下左右完成地图上下左右的固定单位移动,鼠标滚轮实现地图放大缩小,"shift+单击"为居中,"shift+双 击"为居中放大,"+"放大一级,"-"缩小一级。
6.动态显示当前鼠标位置的经纬度坐标
动态显示鼠标经纬度 坐标大体上有两种方式,一是服务器端生成坐标,二是客户端生成坐标,孰优孰劣都很清楚了,服务器生成坐标值会消耗大量服务器资源,onmousemove 总是在不停向服务器发送请求,这种模式下经常会碰到鼠标移动已经停止了,但是状态栏上的坐标信息还在变化,这就是服务器计算造成的延时造成的,因此对于真 正上线的webgis网站更多使用客户端方式,通过获取屏幕坐标,在投影参考系下换算地理坐标,显示在页面。
javascript api提供了一套api获取地理坐标:




function
showcoordinates(evt)

{


var mp = evt.mappoint;


dojo.byid("info").innerhtml = mp.x + ", " + mp.y;


}
mappoint是地理坐标,screenpoint是屏幕坐标。
7.通过dojo.connect建立对鼠标事件的监听
dojo.connect(map, "onmousemove", showcoordinates);
dojo.connect(map, "onmousedrag", showcoordinates);
同时监听鼠标拖拽事件,添加到map.onload中就可以了,当然body区域中要加入显示坐标的div


div id="info" style="padding:5px; margin:5px; background-color:#eee;">div>
完工!显示效果,界面很简单,但包含了鼠标和键盘的快捷键操作:



======================================================

在最后，我邀请大家参加新浪APP，就是新浪免费送大家的一个空间，支持PHP+MySql，免费二级域名，免费域名绑定
这个是我邀请的地址，您通过这个链接注册即为我的好友，并获赠云豆500个，价值5元哦！短网址是http://t.cn/SXOiLh我创建的小站每天访客已经达到2000+了，每天挂广告赚50+元哦，呵呵，饭钱不愁了，\(^o^)/