深入浅出 Javascript API(二)--地图显示与基本操作 转

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

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/463391.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

「PKUSC2018」神仙的游戏 - 题解

「PKUSC2018」神仙的游戏 题意&#xff1a;给出一个01?串&#xff0c;其中?可以代替成为0或1&#xff0c;令 $ F(i) $ 表示是否存在长度为 $ i $ 的border&#xff0c;求 $ (F(1) \times 1 \times 1) \bigoplus (F(2) \times 2 \times 2) \bigoplus (F(3) \times 3 \times 3)…

常用哈希函数的比较及其实现

基本概念 所谓完美哈希函数。就是指没有冲突的哈希函数。即对随意的 key1 ! key2 有h(key1) ! h(key2)。 设定义域为X&#xff0c;值域为Y, n|X|,m|Y|。那么肯定有m>n,假设对于不同的key1,key2属于X,有h(key1)!h(key2)&#xff0c;那么称h为完美哈希函数&#xff0c;当mn时&…

C语言 ,嵌入式 ,c++,数据结构 面试题目(4)

sizeof是C/C中的一个操作符&#xff08;operator&#xff09;&#xff0c;简单的说其作用就是返回一个对象或者类型所占的内存字节数。与strlen的区别&#xff1a;一、sizeof是运算符&#xff0c;确切的说是一个编译时运算符&#xff0c;参数可以是数组、指针、类型、对象、函数…

把链接伪装成按钮

<input type"button" οnclick"location.hrefhttp://www.lemongtree.net/;" value"GO">转载于:https://www.cnblogs.com/xiaoman_890/archive/2009/07/07/1518471.html

c语言中char *name 与char name 的区别

要点&#xff1a;char* name"abc"指的是常量字符串&#xff0c;不可以修改指针&#xff0c;是兼容老的写法&#xff1b;char[] name"abc"是指针&#xff0c;可以修改&#xff1b; 在学习过程中发现了一个以前一直默认的错误&#xff0c;同样char *c "…

Spring事务配置的五种方式

Spring事务配置的五种方式前段时间对Spring的事务配置做了比较深入的研究&#xff0c;在此之间对Spring的事务配置虽说也配置过&#xff0c;但是一直没有一个清楚的认识。通过这次的学习发觉Spring的事务配置只要把思路理清&#xff0c;还是比较好掌握的。总结如下&#xff1a;…

关于SQL数据库中cross join 和inner join用法上的区别?

使用mysql创建两张表 表a 表b 可以使用下面的脚本创建表&#xff0c;并且添加测试数据&#xff1a; CREATE TABLE a ( name varchar(10) CHARACTER SET utf8 COLLATE utf8_general_ci NULL DEFAULT NULL, sex varchar(2) CHARACTER SET utf8 COLLATE utf8_general_ci NULL D…

CSS实现段落首行缩进、1.5倍行距、左右对齐

.text-content { font-size: 15px; text-indent: 30px; /*段落首行缩进&#xff0c;text-indent的值为font-size的2倍&#xff0c;相当于缩进2个汉字*/ line-height: 22px; /*line-height的值为font-size的1.5倍&#xff0c;即1.5倍行距&#xff0c;使用line-heig…

hash()函数的实现

输入参数都是字符串。 6种hash函数的实现以及使用方式&#xff1a; template<class T> size_t BKDRHash(const T * str) // 该效率最高 { register size_t hash 0; while (size_t ch (size_t)*str) { hash hash * 131 ch; // 也可以乘以31、1…

把数组排成最小的数

题目&#xff1a;输入一个正整数数组&#xff0c;将它们连接起来排成一个数&#xff0c;输出能排出的所有数字中最小的一个。 举例&#xff1a;输入数组{32, 321},则输出这两个能排成的最小数字32132。请给出解决问题的算法&#xff0c;并证明该算法。 答&#xff1a;算法如下&…

【转】 vi常用操作

linux vi命令使用 功能最强大的编辑器——vi vi是所有UNIX系统都会提供的屏幕编辑器&#xff0c;它提供了一个视窗设备&#xff0c;通过它可以编辑文件。当然&#xff0c;对UNIX系统略有所知的人&#xff0c;或多或少都觉得vi超级难用&#xff0c;但vi是最基本的编辑器&#x…

tail的使用

最近找了下tail命令的使用方式&#xff0c;先总结下&#xff1a; tail -f filename 等同于--followdescriptor&#xff0c;根据文件描述符进行追踪&#xff0c;当文件改名或被删除后或者执行ctrlc后&#xff0c;停止追踪 例如&#xff1a;tail -f log/filename.txt ---该…

VS 使用 :新建项目

1.文件位置不放C盘 转载于:https://www.cnblogs.com/duanshouchang/p/10431829.html

C++基础知识友元friend、友元函数和友元类

为了在类之间进行数据共享时&#xff0c;提高效率&#xff0c;C引入了友元的概念。友元主要有三个方面的应用&#xff1a; 将普通函数声明为类的友元函数&#xff1b;将一个类声明为其他类的友元类&#xff1b;将一个类中的成员函数声明为其他类的友元函数。 下面分别介绍。 1、…

Expression Studio 3在windows7下安装失败

Expression Studio 3在windows7下安装失败 Microsoft刚刚发布了Expression Studio 3&#xff0c;我也刚刚下载下来&#xff0c;不过安装就出了问题 双击ExpressionStudio_Trial_en.exe开始解压&#xff0c;开始后就没有了响应&#xff0c;再双击&#xff0c;再解压&#xff0c;…

搞定Linux Shell文本处理工具,看完这篇集锦就够了(转)

Linux Shell是一种基本功&#xff0c;由于怪异的语法加之较差的可读性&#xff0c;通常被Python等脚本代替。既然是基本功&#xff0c;那就需要掌握&#xff0c;毕竟学习Shell脚本的过程中&#xff0c;还是能了解到很多Linux系统的内容。 Linux脚本大师不是人人都可以达到的&a…

出考研初试成绩之后

再次诈尸更新 特殊时期,只憋出来了点压抑的东西来. 考研 考研成绩出来之后就一直没有时间也没有心情写些什么了, 成绩并不好, 可以说是很差了, 好处也有, 就是不用对哪个学校再抱有幻想, 可以专心找工作了.   据说今年的计算机考研人数猛增, 分数也给抬到很高的位置, 以我政治…

Activit系列之---Activity的生命周期

Activity的生命周期 Hello,巴友们好&#xff0c;小菜我又来发博文啦。上篇文章给大家简单的介绍了一下Activity&#xff0c;以及如何创建一个最简单的Activity并且在上面显示hello android! 我们知道要创建一个自己的Activity就必须继承Activity这个类&#xff0c;并且实现它的…

C C++面试常问简答题(1)

1.new、delete、malloc、free关系 delete会调用对象的析构函数,和new对应free只会释放内存&#xff0c;new调用构造函数。malloc与free是C/C语言的标准库函数&#xff0c;new/delete是C的运算符。它们都可用于申请动态内存和释放内存。对于非内部数据类型的对象而言&#xff0c…

CSS hack:针对IE6,IE7,IE8,IE9,firefox显示不同效果

区别不同浏览器的CSS hack写法&#xff1a; 区别IE6与其它浏览器&#xff1a; background:orange;_background:blue; 区别IE6与IE7&#xff1a; background:green !important;background:blue; 区别IE6、IE7与FF&#xff1a; background:orange; *background:green…