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

地图显示与基本操作（放大、缩小、移动、坐标显示）是JavascriptAPI的基本功能，也是一个WebGIS应用的基本内容，Javascript提供了非常便捷的开发方法，当然在线浏览需要Ags服务器支持，如果自己电脑上没有配置Server服务，可以使用ArcGIS Online在线服务。
    内容目录：

1.Cache和非Cache地图展示
2.地图基本操作，如放大、缩小、移动，并和鼠标键盘按键关联
3.客户端显示鼠标当前地理位置

直接使用在线地图查看最终效果：
http://resources.esri.com/help/9.3/arcgisserver/apis/javascript/arcgis/demos/Map/AddMapShowXYCoords.html

使用过Dojo的开发人员应该很熟悉整个页面结构：

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和javascriptapi所需要的js库吗？其实部署javascriptapi时，针对不同类型服务器端代码（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"));

将该页面设为起始页后，访问"http://ip/js/arcgis"时会直接将这三个js文件合并下载，大概300多KB。

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所能提供的其他服务可以查看RESTAPI文档。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>

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

博客园链接：http://www.cnblogs.com/flyingis/archive/2008/07/20/1246963.html
本主题由 flyingis 于 2008-10-16 09:00 设置高亮

转载于:https://www.cnblogs.com/liufei88866/archive/2009/07/06/1517617.html

深入浅出 Javascript API（二）--地图显示与基本操作 转相关推荐

  1. 深入浅出 Javascript API（五）--Query Find 查询

    作者:Flyingis 本文严禁擅自转载或用于商业目的,如有需要请事先联系作者:dev.vip#gmail.com 查询是webgis常用功能之一,基于地图的查询经历了多种形式的演变,现在用什么形式来 ...

  2. 深入浅出javascript（二）函数和this对象

    一.函数对象的属性和方法 函数是一种数据类型,也是对象,这一点很明确.因此,函数对象也可以添加属性和方法,但是这里的属性和方法是静态的,之所以这样说,就是为了区别构造函数. 示例如下: ①创建一个空的 ...

  3. 空间数据可视化：ArcGIS JavaScript API 二、三维数据一体化

      ESRI不愧为GIS业界巨头,从本科起就开始接触ArcGIS系列,桌面端从ArcMap 到 ArcPro,服务端从ArcIMS 到 ArcServer,无不体现了这个了不起的公司在与时俱进.不断创 ...

  4. 高德地图Web端JavaScript API开发(二)---在地图上绘制(点标注)

    使用高德地图在很多时候需要在地图上标记位置,并且很多时候需要用到自定义的图标去完成这种位置的标记. 当然,这些功能高德地图都为我们准备了,比如常用的地图覆盖物Marker和信息窗体等.这里就先说一下点 ...

  5. ArcGIS API for javascript创建二维度地图

    1.引用arcgis api for javascript <link rel="stylesheet" href="https://js.arcgis.com/4 ...

  6. 高德地图怎么画圈_高德地图 Javascript API 入门（二）

    高德地图 Javascript API 入门(二) 鼠标工具插件 测量距离 JS map.plugin(["AMap.MouseTool"],function () { var m ...

  7. 高德地图markevents_GitHub - mingxuWang/Map: 高德地图API二次封装

    Map组件设计文档 组件设计目的 分析当前各业务方向(销售端.商城.数据可视化.TMS)内地图相关应用的地图功能使用情况,封装Map组件供给各业务向进行使用. 将高德地图API进行二次封装,降低地图相 ...

  8. Autodesk View and Data API二次开发学习指南

    什么是View and Data API? 使用View and Data API,你可以轻松的在网页上显示大型三维模型或者二维图纸而不需要安装任何插件.通过View and Data API,你可以 ...

  9. HTML5中快速运用Google Maps JavaScript API V3

    因论坛方吃图,我已经做了Word文档供下载,请去下载:http://download.csdn.net/detail/david1030/4464369 第一个示例: 几点需要注意: 我们使用了< ...

最新文章

  1. Python未来的发展趋势怎么样
  2. 开源wkhtmltopdf使用心得 （四）
  3. JS-undefined与null的区别
  4. String Replace 不区分大小写的方法
  5. VC++ 连接SQL Server数据库（远程+本地）
  6. 01-sql优化及索引
  7. Oracle EBS - Forms Servlet与Socket模式比较
  8. 深度学习之生成对抗网络（7）WGAN原理
  9. [Android开发]zip文件压缩解压缩
  10. 剖析WordPress模板文件【转】
  11. 4.3 CMMI4级——定量项目管理(Quatitative Project Management)
  12. 实验五：暴力破解防范措施和防范误区
  13. 阿里云虚拟主机和服务器的区别
  14. JavasScript 第一天课 课后笔记 2022.3.21
  15. 般若波罗蜜多心经——背过最好了
  16. Axure交互式设计
  17. 双击打开.bat文件闪退
  18. 程序员该如何说话?做人?做事?
  19. T-test数据分析
  20. 苍溪师范94级计算机与文秘专业就业前景,2019文秘专业就业前景和就业方向分析...

热门文章

  1. 人脑意识转入量子计算机,人脑产生意识：可能是因为量子纠缠
  2. mysql密码命名规则_MySql命名规范
  3. oracle找到表的位置,查看Oracle表中的指定记录在数据文件中的位置
  4. pycharm 开发app_windows及mac下开发Excel， python+xlwings开发环境配置
  5. Js获取短信验证码前段效果
  6. python 编辑数学公式_Jupyter快速编辑高大上数学公式 泰勒展开式
  7. Android入门（15）| 网络
  8. leetcode162. 寻找峰值 变种二分见过吗
  9. 如何在博客内添加音乐
  10. 《Java8实战》笔记（03）：Lambda表达式