深入浅出 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^)/