目的: 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
3
using
System;
4
using
System.Web;
5
using
System.IO;
6
7
public
class
jsapi : IHttpHandler
{ 8 public void ProcessRequest (HttpContext context) { 9 context.Response.ContentType = "application/x-javascript"; 10 context.Response.Expires = 0; 11 12 context.Response.WriteFile(context.Server.MapPath("js//esri//esri.js")); 13 context.Response.WriteFile(context.Server.MapPath("js//dojo//dojo//dojo.xd.js")); 14 context.Response.WriteFile(context.Server.MapPath("js//esri//jsapi.js")); 15 } 16 17 public bool IsReusable { 18 get { 19 return false; 20 } 21 } 22}
<%
@ 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
>
Map
</
title
>
<
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="地图范围:<br/>XMin:"+extent.xmin+"<br/>YMin:"+extent.ymin+"<br/>XMax:"+extent.xmax +"<br/>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+"<br/>屏幕坐标:"+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
>