chaoxidawang

ArcGIS.Server.9.3和ArcGIS API for JavaScript实现基本的地图功能（一） javascript

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" %>

3using system;

4using system.web;

5using system.io;

7public class jsapi : ihttphandler {

8public void processrequest (httpcontext context) {

9context.response.contenttype = "application/x-javascript";

10context.response.expires = 0;

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}

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的页面来开发了能节省服务器资源。

很简单就这样就完成了地图基本功能的开发。

标签: 9.3, jsapi

绿色通道:好文要顶关注我收藏该文与我联系

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 | 封博卿[未注册用户]

谢谢,能给我一份么[email protected]不胜感谢

回复引用查看

#6楼[楼主]2008-11-22 18:56 | 水的右边

@封博卿

已发

回复引用

#7楼2008-11-27 09:46 | gjh001[未注册用户]

搂主,给我一份jsapi包,谢谢!!

回复引用

#8楼2008-11-27 09:47 | gjh001[未注册用户]

搂主,给我一份jsapi包,谢谢!!

ArcGIS.Server.9.3和ArcGIS API for JavaScript实现基本的地图功能（一） javascript

你可能感兴趣的:(javascript)