arcgis.server.9.3和arcgis api for javascript实现基本的地图功能(一)
目的:
1.arcgis api for javascript实现基本的地图功能,包括2个地图服务的叠加显示、图层过滤定义、地图视图范围设置、地图鼠标移动事件等。
准备工作:
1.在arcgis.server.9.3发布一个叫usa的map service,并且把这个service启动起来。
2.瓦片数据地图我这里没有现成的就采用esri提供的rest世界地图数据服务,地址如下:http://server.arcgisonline.com/arcgis/rest/services/nps_physical_world_2d/mapserver。
完成后的效果图:
一、arcgis api for javascript介绍
首先对arcgis api for javascript作一下介绍了,以下开始简称jsapi,jsapi是arcgis server 9.3新增的一套api框架,它是基于客户端的纯javascript的api开发方式了,也就是说所有的开发和代码编写都是在客户端脚本中进行了不在像基于adf的web appliction一样既要处理编写客户端的js代码又要处理编写服务端的c#代码,这样就大大的降低的开发的复杂度了,而且在客户端的地图操作方面和web appliction比有相当的优势了,虽然功能上并不像adf那样的强大了但是可以通过gp等也能实现比较复杂的功能如网络分析等,总之和adf的web appliction相比各有优势了。呀,还有这个js库是基于dojo开发的,对于熟悉dojo的人来说应该是个不错的消息了,如果是prototype或者jquery就好了,可惜是dojo了不太喜欢这个了,现在就只能一边用一边学了。
二、arcgis api for javascript服务端介绍和部署
esri没有提供jsapi包的下载但是可以在线的使用esri提供的jsapi服务,如http://serverapi.arcgisonline.com/jsapi/arcgis/?v=1.1,用户可以在页面中添加对这个地址引用,然后就可以在页面中使用jsapi进行地图功能的开发了,通过这个地址其实是用来获取esri.js、dojo.xd.js、jsapi.js这几个js库了,但是必须是联网的情况下使用了。虽然esri不提供免费下载但是应该是通过光盘发行的吧,我从网上的一个朋友那要了一份jsapi的服务端,也就是可以进行本地部署了不需要联网也可以使用了。
讲一下jsapi的服务端,具体包含的内容如下图:
看上面的结构很简单了jsapi服务端就包括了css、图片、js以及default.ashx、index.jsp、index.php三个服务端页面文件,这3个服务端页面文件分别针对.net的web服务器、java的web服务器、php的web服务器,这里我是用.net的web服务器的就来看一下default.ashx的内容:
1
@ webhandler language="c#" class="jsapi" %>
2
3using system;
4using system.web;
5using system.io;
6
7
public class jsapi : ihttphandler 
{
8
public void processrequest (httpcontext context) {
9
context.response.contenttype = "application/x-javascript";
10context.response.expires = 0;
11
12context.response.writefile(context.server.mappath("js\\esri\\esri.js"));
13context.response.writefile(context.server.mappath("js\\dojo\\dojo\\dojo.xd.js"));
14context.response.writefile(context.server.mappath("js\\esri\\jsapi.js"));
15
}
16
17public bool isreusable {
18get {
19return false;
20}
21}
22
}
看上面的c#代码了相当的简单了,唯一的功能就是向浏览器输出esri.js、dojo.xd.js、jsapi.js这3个js库了,具体的js库的内容包含在js文件夹中,除了esri的js库还包括的dojo的库了,前面有说过了jsapi是基于dojo开发的。
接下来讲怎么部署jsapi的服务端,打开iis在默认网站下新建虚拟目录(名:jsapi),然后指向到jsapi放的目录,然后设置一下这个虚拟目录的asp.net版本,还有在虚拟目录的文档项添加一个名为default.ashx文档名并且提到第一位置,然后通过浏览器访问测试一下,比如我的输入:http://mypc/jsapi/。最后还需要修改一下js\esri\esri.js和js\esri\dijit\css\infowindow.css文件,把这2个文件内容里的[full_http_url_to_jsapi]替换成你的路径地址,比如我这里替换成http://mypc/jsapi/。这样就完成了部署工作了。
三、上面讲了一堆乱78糟的好像跑题了,接下来开始讲用jsapi实现基本的地图功能开发。
1.启动vs新建名为mapapp的asp.net web应用程序。其实jsapi是纯客户端的开发了不需要vs也不需要.net了,纯html页面就可以了用记事本都可以开发了。我这里为了方便了就用vs2008了,毕竟可以调试js脚本了。
2.然后在default.aspx页面里添加对js库和css文件的引用了,这里的引用地址指向上面部署的jsapi服务端了,不是指向在线的esri的jsapi服务了。具体的说明和代码如下:
@ page language="c#" autoeventwireup="true" codebehind="default.aspx.cs" inherits="mapapp._default" %>
doctype html public "-//w3c//dtd xhtml 1.0 transitional//en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd">
html xmlns="http://www.w3.org/1999/xhtml" >
head runat="server">
title>maptitle>
link rel="stylesheet" type="text/css" href="http://mypc/jsapi/js/dojo/dijit/themes/tundra/tundra.css" />
script type="text/javascript" src="http://mypc/jsapi/?v=1.1">script>
script type="text/javascript">
dojo.require("esri.map");//类似引入命名空间
//用初始化加载地图的方法
function init()
{
var startextent = new esri.geometry.extent(-127.968857954995, 25.5778580720472, -65.0742781827045,51.2983251993735, new esri.spatialreference({wkid:4326}) );
var map=new esri.map("map", {extent:startextent});
//arcgistiledmapservicelayer用于支持cache的tile地图
var tiledmapservicelayer = new esri.layers.arcgistiledmapservicelayer("http://server.arcgisonline.com/arcgis/rest/services/nps_physical_world_2d/mapserver");
//把tiledmapservicelayer添加到地图控件中
map.addlayer(tiledmapservicelayer);
//arcgisdynamicmapservicelayer用于支持dynamic地图
var dynamicmapservicelayer = new esri.layers.arcgisdynamicmapservicelayer(http://mypc/arcgis/rest/services/usa/mapserver);
//设置要显示的图层
dynamicmapservicelayer.setvisiblelayers([2,1,0]);
//图层过滤设置,图层0只显示pop2000>250000的元素
var layerdefs = [];
layerdefs[0] = "pop2000>250000";
dynamicmapservicelayer.setlayerdefinitions(layerdefs);
map.addlayer(dynamicmapservicelayer);
//给地图控件添加视图变化监听事件
dojo.connect(map,"onextentchange",showextent);
//给地图控件添加载入完成(onload)监听事件
//在onload监听事件里在去添加对鼠标移动和拖拽的监听了,其实不需要多这么一个步骤
dojo.connect(map,"onload",function(){
//给地图控件添加载鼠标移动监听事件
dojo.connect(map,"onmousemove",showcoordinates);
//给地图控件添加载鼠标拖拽监听事件
dojo.connect(map,"onmousedrag",showcoordinates);
});
}
//显示地图范围
function showextent(extent)
{
var s="地图范围:
xmin:"+extent.xmin+"
ymin:"+extent.ymin+"
xmax:"+extent.xmax +"
ymax:"+extent.ymax;
dojo.byid("info").innerhtml=s;
}
//显示鼠标坐标
function showcoordinates(event)
{
var mp=event.mappoint;
var mp2=event.screenpoint;
dojo.byid("info2").innerhtml="地理坐标:"+mp.x+","+mp.y+"
屏幕坐标:"+mp2.x+","+mp2.y;
}
//用dojo的addonload方法初始化地图
dojo.addonload(init);
script>
head>
body class="tundra">
form id="form1" runat="server">
table>
tr>
td>div id="map" style="width:600px; height:450px; border:1px solid #000;">div>td>
td valign="top">div id="info" >div>div id="info2" >div>td>
tr>
table>
form>
body>
html>
3.这种开发方式实在简单了就不详细描述了具体的看代码和注释了,需要注意的地方就是tiledmapservicelayer和dynamicmapservicelayer的添加顺序了,tiledmapservicelayer和dynamicmapservicelayer链接地址是rest服务地址了这个和flex api一样了,还有实际项目中最好采用纯hmtl的页面来开发了能节省服务器资源。
很简单就这样就完成了地图基本功能的开发。
绿色通道:好文要顶关注我收藏该文与我联系
posted @ 2008-11-14 22:15 水的右边 阅读(5591) 评论(70)编辑 收藏
发表评论
2125930
回复 引用 查看
#1楼2008-11-17 09:10 | h.j
不知道什么时候esri可以发布独立的服务端jsapi。现在在线的api用着有些不自然。
通过handler来获取js,挺不错。
回复 引用 查看
#2楼[楼主]2008-11-17 11:55 | 水的右边
@h.j
已经有独立的服务端jsapi了,通过光盘发行的不提供下载的。
回复 引用
#3楼2008-11-21 16:16 | lkst[未注册用户]
能否提供下你的jsapi包下载。谢谢
jejwe at 126.com
回复 引用 查看
#4楼[楼主]2008-11-21 19:08 | 水的右边
@lkst
留下你的邮箱
回复 引用
#5楼2008-11-22 00:14 | 封博卿[未注册用户]
谢谢,能给我一份么?fengboqing1984@126.com不胜感谢
回复 引用 查看
#6楼[楼主]2008-11-22 18:56 | 水的右边
@封博卿
已发
回复 引用
#7楼2008-11-27 09:46 | gjh001[未注册用户]
搂主,给我一份jsapi包,谢谢!!
回复 引用
#8楼2008-11-27 09:47 | gjh001[未注册用户]
搂主,给我一份jsapi包,谢谢!!
guojinghao001@163.com
回复 引用
#9楼2008-12-01 22:01 | lkst[未注册用户]
我的邮箱就是jejwe@126.com
谢谢
回复 引用
#10楼2008-12-11 14:47 | gisdu[未注册用户]
搂主,给我一份jsapi包,谢谢!!
yinhu4217@163.com
回复 引用
#11楼2008-12-13 12:42 | frq[未注册用户]
楼主,给我一份谢谢你。frq0224@163.com
回复 引用
#12楼2008-12-13 15:48 | gisdu[未注册用户]
搂主,给我一份jsapi包吧,好吗?
非常期待,谢谢!!
yinhu4217@163.com
回复 引用 查看
#13楼[楼主]2008-12-14 11:15 | 水的右边
@gjh001
@lkst
@gisdu
@frq
@gisdu
已经发送
回复 引用
#14楼2008-12-16 08:23 | binary[未注册用户]
我也要一份,谢谢!
dzcouple@gmail.com
感谢楼主的分享
回复 引用
#15楼2008-12-16 11:04 | davidwu[未注册用户]
楼主,给我一份jsapi包,万分感谢!!
sandy68@163.com
回复 引用 查看
#16楼[楼主]2008-12-16 16:29 | 水的右边
@binary
@davidwu
已发
回复 引用
#17楼2008-12-18 21:27 |初学者 [未注册用户]
楼主,请给我一份jsapi包,万分感谢
回复 引用
#18楼2008-12-18 21:43 | snackok[未注册用户]
也请给我一份吧,谢谢你了,
q4mine@sina.com
回复 引用 查看
#19楼[楼主]2008-12-19 10:24 | 水的右边
@ 初学者
@snackok
已发
回复 引用
#20楼2008-12-20 19:30 | xuexi[未注册用户]
我也需要一份,麻烦你发一下,谢谢!
回复 引用
#21楼2008-12-23 09:44 | 刘殷实[未注册用户]
楼主,谢谢!传一份给我
回复 引用
#22楼2008-12-24 11:09 | xeon_cn[未注册用户]
请求
cn.xeon@gmail.com
谢谢
回复 引用 查看
#23楼2008-12-24 17:47 | zhupeng
我也需要一份jsapi,
flystreet@126.com
还有我想问一下
就报错,说dojo未定义,但是用utf-8就可以,我看博主中文也可以的,能不能指导一下
回复 引用
#24楼2008-12-24 23:08 | nicebug[未注册用户]
找了半天,找不到这个包,麻烦楼主也给我一份吧,谢谢了,
wl-14981@sohu.com
回复 引用
#25楼2008-12-26 10:28 | 灯管[未注册用户]
太好了,终于找到这个js包了,楼主能发我一份吗?多谢!
gispk47@gmail.com
回复 引用
#26楼2008-12-26 15:29 | narsu[未注册用户]
可以给我也发一份吗?不胜感激!
dirtyjeans@163.com
回复 引用
#27楼2008-12-27 00:00 | 唐唐[未注册用户]
楼主,给我一份,急用呢,万分感谢!
回复 引用 查看
#28楼2008-12-27 14:26 | 明琎
我也需要一份jsapi,
mingkof@qq.com
回复 引用 查看
#29楼[楼主]2008-12-30 08:27 | 水的右边
@xuexi
@刘殷实
@xeon_cn
@zhupeng
@nicebug
@灯管
@narsu
@明琎
@唐唐
已经发送
回复 引用
#30楼2008-12-30 14:24 | 海风2008[未注册用户]
楼主,给我也发一份吧,谢谢!
haifeng-lgh@hotmail.com
回复 引用
#31楼2009-01-06 12:40 | sj[未注册用户]
楼主,我也需要一份jsapi,麻烦发到我邮箱,非常感谢!
回复 引用
#32楼2009-01-07 14:33 | hl[未注册用户]
楼主,需要一份jsapi,麻烦发到我邮箱,非常感谢!万分感谢!
422642723@qq.com
回复 引用
#33楼2009-01-10 15:15 | fivestarsky[未注册用户]
楼主,需要一份jsapi,麻烦发到我邮箱,非常感谢!万分感谢!
fivestarsky@163.com
hexaemeron@gmail.com
回复 引用
#34楼2009-01-10 21:58 | 泉深水清[未注册用户]
楼主,需要一份jsapi,麻烦发到我邮箱,非常感谢!万分感谢!
ljqyyyy@163.com
回复 引用
#35楼2009-01-13 11:53 | arcgisv2.0[未注册用户]
发一份学习一下,谢谢
回复 引用
#36楼2009-01-15 13:50 | xuexi[未注册用户]
could not load 'esri.map'; last tried '../esri/map.js'是怎么回事 ??
回复 引用
#37楼2009-01-15 16:23 | hjqorhh[未注册用户]
能否提供下你的jsapi包下载。非常感谢!!!
hjqorhh@163.com
回复 引用
#38楼2009-01-15 21:49 | salmon_163[未注册用户]
能否留一份jsapi 谢谢
我的邮箱 hongfish_178@163.com
谢谢
回复 引用
#39楼2009-01-16 19:58 | salmon_163[未注册用户]
如果页面有收缩功能时,比如 左侧收缩了 地图调用了 resize 和 reposition方法后 框选最右侧的地图放大或缩小 不出现红色的方框 怎样解决这中问题??
回复 引用
#40楼2009-02-02 18:10 | chenleijiangjun[未注册用户]
能否留一份jsapi 谢谢
我的邮箱 chenleijiangjun@126.com
万分感谢!跪求!
回复 引用
#41楼2009-02-05 17:35 | hello132[未注册用户]
斑竹能否给我也发一份jsapi 十分感谢
我的邮箱 rain_qing@163.com
项目需要,急求啊!!
回复 引用
#42楼2009-02-17 10:38 | zldong[未注册用户]
最近在学习arcgis,急需这个jsapi,能发给我一份吗,非常感谢!dong809235@163.com
回复 引用
#43楼2009-02-20 16:47 | gis学习者[未注册用户]
正在学些9.3中,能否把jsapi包给我发一份
liubaohua000@163.com
回复 引用
#44楼2009-02-20 16:48 | gis学习者[未注册用户]
补充一下 万分谢谢啊 !
liubaohua000@163.com
回复 引用
#45楼2009-03-04 19:18 | 为伊憔悴
发现好多的人要api包,真是不好意思再麻烦一下,邮箱li-gis@163.com
回复 引用
#46楼2009-03-15 13:01 | gisserver[未注册用户]
给我发一份 谢谢 xxmmarketing@126.com
回复 引用 查看
#47楼2009-03-16 20:46 | happygis
楼主不好意思,麻烦你一下把那个api的包,给我一份。谢谢。。。。
liyong824@163.com
回复 引用 查看
#48楼2009-03-23 12:38 | ailen
楼主小弟向你讨一份jsapi包。谢谢~
jiakechong163@163.com
回复 引用
#49楼2009-03-25 21:33 | 芥子
好文章,暂一个!
楼主,能否也给我发一分jsapi包,谢谢!!
zhangchang918◎126.com
回复 引用
#50楼2009-03-26 15:21 | linsx[未注册用户]
最近做gis毕业设计正准备用jsapi来开发,楼主能不能也给发一份啊,谢谢啦。。。linsx123@qq.com
回复 引用
#51楼2009-03-27 10:07 | nathan22[未注册用户]
楼主,麻烦尽快给我也发一份呀,有点急用,毕业设计要用这个东西。
邮箱lhpw@163.com。万分感谢啊!
回复 引用
#52楼2009-03-30 13:18 | gis初学者[未注册用户]
dong_wj88@126.com
楼主给我一份吧,感谢不尽...
回复 引用
#53楼2009-04-15 22:12 | westdata[未注册用户]
可以给我发一份吗,qzzhenglong@sina.com, 谢谢!
回复 引用 查看
#54楼2009-04-20 16:49 | lhjhl
看了你的文章,到了 9.3以后,你只用js api 和flex api了吗?
我是新手,直接装了 9.3,有没有必要学adf 开发方式咧?
加我qq 好 吗?你的是多少咧
775618627
回复 引用
#55楼2009-04-21 22:24 | axl
博主
问个问题,
如下:
1.上边给的一个地图例子连接,放在程序里可以正常打开
http://server.arcgisonline.com/arcgis/rest/services/nps_physical_world_2d/mapserver
2.本地的地图,
http://[mypc]/arcgis/rest/services/[map]/mapserver在ie里可以打开
可以打开 {arcmap} { arcgisjavascript}
为什么把些连接放到程序里页面上却读不到地图呢?
为什么上边的例子可以 ,本地的地图却不能呢?
回复 引用
#56楼2009-04-21 22:35 | axl
我的qq:75692681
回复 引用
#57楼2009-04-21 22:52 | axl
我自己解决了。原来是arcgis server 地图配置的问题。
糊乱选了半天。成功了~~~~~
回复 引用
#58楼2009-04-21 23:05 | axl
加我qq好吗
地图是倒进去了
可是速度很慢......
回复 引用
#59楼2009-05-21 10:13 | 前进[未注册用户]
楼主辛苦了,也麻烦你一下把那个api的包,给我一份。谢谢。。。。
feng_gongyu@163.com
回复 引用
#60楼2009-07-08 16:43 | 火焰驹11[未注册用户]
搂主,给我一份jsapi包,谢谢!!
wanghg03@163.com
回复 引用
#61楼2009-08-08 22:44 | zzhgis[未注册用户]
搂主,也给小弟一份jsapi包,谢谢!!
zzhgis@126.com
建议发到共享空间中!!!!!
回复 引用
#62楼2009-08-11 14:51 | 悬在空中的吻[未注册用户]
跪求一份jsapi包谢谢!
wk8855964@163.com
回复 引用
#63楼2009-09-03 15:57 | aguo[未注册用户]
我也正进行arcgis server 开发,麻烦搂主能否给发一份,谢谢!
wgg172@163.com
回复 引用
#64楼2009-09-08 09:28 | awming[未注册用户]
不晓得楼主还在不在啊。
正在学习。。
求源码awming520@163.com
回复 引用
#65楼2009-09-09 12:01 | 980[未注册用户]
求源码和 api包liu980_980@163.com谢谢了
回复 引用 查看
#66楼2009-10-27 18:46 | 该页无法显示
楼主,我是初学者,看到你的文章写的非常适合入门求学的,能否发给我一份jsapi包谢谢,wssyangfeng@163.com,小弟非常感激。
回复 引用 查看
#67楼2011-01-24 22:24 | ╁蓝驿┲→
楼主,非常感谢你的文章,有时间也发我个jsapi包哦。谢谢
回复 引用 查看
#68楼2011-06-15 11:56 | sxcqhuffman
博主,为什么我的地图不显示啊?
回复 引用 查看
#69楼2011-06-15 12:16 | sxcqhuffman
为什么出现参数无效啊?
回复 引用 查看
#70楼[楼主]2011-06-15 13:43 | 水的右边
@sxcqhuffman
我不做gis很久了,api已经改变很多了,我这个版本是2年前的
注册用户登录后才能发表评论,请 登录 或 注册,返回博客园首页。
最新it新闻:
» 更多新闻...
最新知识库文章:
======================================================
在最后，我邀请大家参加新浪APP，就是新浪免费送大家的一个空间，支持PHP+MySql，免费二级域名，免费域名绑定 这个是我邀请的地址，您通过这个链接注册即为我的好友，并获赠云豆500个，价值5元哦！短网址是http://t.cn/SXOiLh我创建的小站每天访客已经达到2000+了，每天挂广告赚50+元哦，呵呵，饭钱不愁了，\(^o^)/
扫一扫
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
