深入浅出ArcGIS 9.3 Javascript API（二）

最新推荐文章于 2024-04-24 09:22:16 发布

restart1

最新推荐文章于 2024-04-24 09:22:16 发布

阅读量1k

点赞数

分类专栏： GIS 文章标签： javascript api dojo 服务器 rest 脚本

本文链接：https://blog.csdn.net/restart1/article/details/6137785

版权

GIS 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

第二章地图显示与基本操作

一个WebGIS应用的基本内容包括地图显示与放大、缩小、移动、坐标显示等基本操作，那么在JavaScript API中是如何实现的？实际上JavaScript API在这些基本操作方面提供了非常便捷的开发方法。一般的WebGIS需要ArcGIS Server服务器支持，即使系统没有配置Server服务，也可以使用ArcGIS Online在线服务。

基于Dojo的JavaScript API天生具有Dojo的跨浏览器特性和强大的前端(用户端)制图功能，由于Dojo的开放性和扩展性，JavaScript API将具有令人期待的发展前景。在ESRI的资源站点上提供了丰富的示例(http://resources.esri.com)

使用过Dojo的开发人员会很熟悉JavaScript API应用的整个页面结构，让我们来看一个例子：

    1.使用Dojo提供的样式表
<style type="text/css">
     @import "http://serverapi.arcgisonline.com/jsapi/arcgis/1/js/dojo/dijit/themes/tundra/tundra.css";
</style>

    2.引用脚本文件
<script type="text/javascript" src="http://serverapi.arcgisonline.com/jsapi/arcgis/?v=1">
</script>

    这里可能会有一个疑问，为什么是这样的目录结构，里面包含了Dojo和JavaScript API所需要的js库吗？其实部署JavaScript API时，针对不同类型服务器端代码（Java、.Net、php）会有不同的Default页面，以.Net为例，Default.ashx引用了三个文件：
context.Response.WriteFile(context.Server.MapPath("js""esri""esri.js"));
context.Response.WriteFile(context.Server.MapPath("js""dojo""dojo""dojo.xd.js"));
context.Response.WriteFile(context.Server.MapPath("js""esri""jsapi.js"));

    3.接下来，就要对页面中所添加的地图元素与功能进行定制，同样是在脚本中完成，使用JavaScript API
<script type="text/javascript">
     dojo.require("esri.map");
     var myMap, myTiledMapServiceLayer;
      function init() {
         myMap = new esri.Map("mapDiv");
         myTiledMapServiceLayer = new esri.layers.ArcGISTiledMapServiceLayer
("http://server.arcgisonline.com/ArcGIS/rest/services/ESRI_StreetMap_World_2D/MapServer");
         myMap.addLayer(myTiledMapServiceLayer);
     }
     dojo.addOnLoad(init);
</script>

    dojo.require引入所需的包，其中的esri.Map类实现了图层、Graphics、消息窗口（查询属性）、其他导航控制的方法，这里在指定的div中创建了一个地图。esri.layers.ArcGISTiledMapServiceLayer的作用是获取REST API所提供的cache地图服务。这是一个在线服务，REST所能提供的其他服务可以查看REST API文档。esri.layers.ArcGISTiledMapServiceLayer继承于 esri.layers.ArcGISMapServiceLayer，该父类下还有另外一个子类 ArcGISDynamicMapServiceLayer，用于获取非cache地图服务。

    最后通过esri.Map的addLayer方法将该服务中的图层添加到当前地图中显示。

    dojo.addOnLoad(init)等价于<body οnlοad=init>，页面加载的时候将执行init()脚本。

    4.页面body区域
<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>

完工！显示效果，界面很简单，但包含了鼠标和键盘的快捷键操作：

本篇文章来源于 GIS空间站转载请以链接形式注明出处网址：http://www.gissky.net/Article/1397_2.htm

restart1

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
深入浅出ArcGIS 9.3 Javascript API（二）

我只想快速开发简单的Web GIS应用，有没有比ADF控件再简洁一些的方式？我不想记那些复杂的AO接口，可是又喜欢ArcGIS Server漂亮的地图和强大的功能，怎么办？好吧，在9.2时代，面对这些问题，我们很头疼，但是ArcGIS Server 9.3已经插上了REST的翅膀！ArcGIS的fans们兴奋吧！期待吧！本篇文章来源于 GIS空间站转载请以链接形式注明出处网址：http://www.gissky.net/Article/1397_2.htm
复制链接

扫一扫