ArcGIS Server JavaScript API

http://www.arcgisonline.cn/agsolcn/service/map/tutorial/tutorial-js.jsp

简介

使用前请阅读《法律声明》

ArcGIS Server JavaScript API是Esri 2008 年推出的一套基于JavaScript 语言的编程接口,其为创建WebGIS应用提供了轻量级的解决方案。开发人员在客户端可以轻松地利用JavaScript API来调用ArcGIS Server所提供的服务,实现地图应用和地理分析功能。

ArcGIS Server JavaScript APIs 由3部分组成,其分别 ArcGIS API for JavaScript、ArcGIS JavaScrip Extension for the Google Maps API、ArcGIS JavaScript Extension for Bing Maps。 ArcGIS API for JavaScript 基于Dojo框架,另外两个API分别构建于 Google Maps API 和 微软 Bing Maps API之上,在下面提到的API的都是 ArcGIS API for JavaScript 。

使用ArcGIS API for JavaScript可以实现如下功能:

  • 显示用户数据的交互式地图
  • 在服务器上运行GIS模型并显示结果
  • 在自己GIS数据中搜索功能或属性,并显示结果
  • 查找地址并显示结果
环境搭建

进行ArcGIS API for JavaScript的应用开发,需要安装开发工具:Aptana Studio、Notepad++和Microsoft Visual Web Developer等工具中的一种即可。在本例中我们采用Notepad++为开发工具。

Aptana Studio下载地址:http://www.aptana.com/products/studio3

NotePad++下载地址:http://notepad-plus-plus.org/download/v5.9.3.html

Visual Web Developer下载地址:http://www.microsoft.com/visualstudio/en-us/products/2010-editions/visual-web-developer-express

在线API 地址:http://serverapi.arcgisonline.com/jsapi/arcgis/?v=2.3 其中 v 后面为 api 版本号 在这里引用的是 2.3版API。

离线API:Esri 提供一张离线API光盘,其中包括ArcGIS Server JavaScript APIs 和开发帮助,如需要光盘请联系您购买ArcGIS软件的销售。

第一个 ArcGIS API for JavaScript 程序

我们现在来创建一个ArcGIS API JavaScript应用,加载ArcGIS Online中国地图。打开Notepad++,创建文件名为“创建第一个应用.html”的文件,其中文件类型为HTML格式,如图1 所示。

图1 Notepad++下创建HTML文件

编写程序代码,整个API应用程序代码如下:点击运行

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<html>

<head>

<title>创建第一个应用</title>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

<meta http-equiv="X-UA-Compatible" content="IE=7" />

<link rel="stylesheet" type="text/css" href="http://serverapi.arcgisonline.com/jsapi/arcgis/2.4/js/dojo/dijit/themes/tundra/tundra.css">

<script type="text/javascript" src="http://serverapi.arcgisonline.com/jsapi/arcgis?v=2.4"></script>

<script type="text/javascript">

dojo.require("esri.map");

var myMap, onLineChinaMapServiceLayer;

function init() {

myMap = new esri.Map("mapDiv");

onLineChinaMapServiceLayer = new esri.layers.ArcGISTiledMapServiceLayer("http://cache1.arcgisonline.cn/ArcGIS/rest/services/ChinaCities_Community_BaseMap_CHN/BeiJing_Community_BaseMap_CHN/MapServer");

myMap.addLayer(onLineChinaMapServiceLayer);           

}

dojo.addOnLoad(init);

</script>

</head>

<body>

<div id="mapDiv" class="tundra" style="width:900px; height:600px; border:1px solid #000;"></div>

</body>

</html>

下面将详细介绍这段代码的组成:

1. 页面样式以及api脚本的引用

使用ArcGIS JavaScript API 首先需要在HTML Head中引用两个外部文件:css样式文件与JavaScript脚本文件。

<link rel="stylesheet" type="text/css" href="http://serverapi.arcgisonline.com/jsapi/arcgis/2.3/js/dojo/dijit/themes/tundra/tundra.css">
<script type="text/javascript" src="http://serverapi.arcgisonline.com/jsapi/arcgis?v=2.3"></script>

2. 脚本的编写

完成上面的API引用后,就可以在脚本标签中添加地图应用,因为ArcGIS JavaScript API是建立在Dojo框架之上,所以需要用到一些dojo的方法,如果想获得更多的dojo信息请访问dojo 官方网站。

首先调用所需要的包。

dojo.require("esri.map");

声明两个新建esri.Map和esri.layers.ArcGISTiledMapServiceLayer类返回值的全局变量。

var myMap, onLineChinaMapServiceLayer;

初始化方法,在这里我们通过新建一个 esri.Map类来创建一个地图,其中 mapDiv是要把这个地图放入的容器,也就是 HTML页面中的DIV元素的名称 。

myMap = new esri.Map("mapDiv");

onLineChinaMapServiceLayer是ArcGIS Online China地图服务,因为这个服务是做了缓存的服务,所以通过esri.layers.ArcGISTiledMapServiceLayer把这个服务构造为一个图层,加载到先前创建的地图中。

onLineChinaMapServiceLayer = new esri.layers.ArcGISTiledMapServiceLayer ( "http://cache1.arcgisonline.cn/ArcGIS/rest/services/ChinaCities_Community_BaseMap_CHN/BeiJing_Community_BaseMap_CHN/MapServer" );

把构建好的onLineChinaMapServiceLayer 作为一个图层加载到myMap中 。

myMap.addLayer(onLineChinaMapServiceLayer);

3. 浏览器中内容显示格式设置

在HTML页面创建DIV元素,以容纳地图控件的显示,这个DIV名称为mapDiv,样式为最开始在HTML Head 中引用的css 的tundra类,自身宽900像素,高600像素,带黑色1像素边框 。

<div id="mapDiv" class="tundra" style="width:900px; height:600px; border:1px solid #000;"></div>
界面效果

当程序编写完成后,左击NotePad++工具菜单栏中“运行”->“Launch in IE”,如图2所示。

图2 运行程序

接着将以IE浏览器打开该API连接,效果图如图3所示,我们此时完成了一个ArcGIS API for JavaScript应用。

图3 ArcGIS API for JavaScript应用实例效果图

相关资源
posted @ 2013-04-22 15:46  adodo1  Views(188)  Comments(0Edit  收藏  举报