一、安装包下载
首先从官网下载ArcGIS API for JavaScript 3.3 的API和SDK,地址:http://support.esrichina.com.cn/2011/0223/960.html,需要注意的是,想获取API和SDK,需要注册一个Esri全球账户。
二、离线部署
部署到C:\Inetpub\wwwroot;
1、解压arcgis_js_v33_sdk.zip和arcgis_js_v33_api.zip;
2、进行配置文件的修改,使其被其他程序调用时找到引用函数的位置;
(1)找到..\arcgis_js_v33_api\library\3.3\jsapi\init.js文件,打开,可以通过EditPlus打开;查找'[HOSTNAME_AND_PATH_TO_JSAPI]',替换为"<myserver>/ \arcgis_js_v33_api\library\3.3\jsapi/";其中<myserver>为机器名称或者机器IP,没有http前缀(如果在本地使用可以设为localhost);
改变前效果图
改变后效果图(以下不再截图,与该类似)
(2)找到..\arcgis_js_v33_api\library\3.3\jsapi\js\dojo\dojo\dojo.js文件,打开;查找'[HOSTNAME_AND_PATH_TO_JSAPI]',替换为"<myserver>/ arcgis_js_v33_api/library/3.3/jsapi/";
(3)找到..\arcgis_js_v33_api\library\3.3\jsapicompact\init.js文件,打开;查找'[HOSTNAME_AND_PATH_TO_JSAPI]',替换为"<myserver>/ arcgis_js_v33_api/library/3.3/jsapicompact/";
(4)找到..\arcgis_js_v33_api\library\3.3\jsapicompact\js\dojo\dojo\dojo.js文件,打开;查找'[HOSTNAME_AND_PATH_TO_JSAPI]',替换为"<myserver>/ arcgis_js_v33_api/library/3.3/jsapicompact/";
保存之后,将arcgis_js_v33_sdk文件夹直接拷贝到C:\Inetpub\wwwroot下,变成C:\Inetpub\wwwroot\arcgis_js_v33_sdk;
将arcgis_js_v33_api文件夹直接拷贝到C:\Inetpub\wwwroot下,变成C:\inetpub\wwwroot\arcgis_js_v33_api;
部署后,可以看到API和SDK的结构如下:
然后在IE中输入http://localhost/arcgis_js_v33_sdk/sdk/index.html,显示如下界面:
三、关于智能提示
开发如果没有智能提示,可想而知是一件多么痛苦的事情,好在Esri为Visual Studio 2010、Aptana3提供了一个插件,这样就使我们在使用ArcGIS API for Javascript的时候获得了方便,可以大大节约开发时间 。 这个插件其本质就是一个javascript文件,下载地址 :https://developers.arcgis.com/en/javascript/jsapi/api_codeassist.html。
需要注意的是在Visual Studio 2010中dojo并不能智能提示,而Aptana和Visual Studio 2012 中对dojo则可以做到智能提示,如果对智能提示要求高的,可以采用Aptana和Visual Studio 2012作为开发环境。
四、测试——第一个应用程序
一切就绪之后后,我们要做的就是尝试,跟我们学习C、C#语言一样,都会用“Hello Word!”作为我们的第一个程序,但是在这里,我们只需要简单的加载一幅捷泰科技有限公司官网上的地图作为我们的开始。
1. 建立项目
启动Visual Studio 2010,新建项目,选择“ASP.NET空Web应用程序”,给项目命名,如下图:
2. 添加HTML文件
在Visual Studio 2010的览决方案管理器中,找到刚才新建的项目,在项目上点击右键,选择添加, 然后是新建项,选择HTML页,如下图:
3. 引入ArcGIS API for Javascript的智能提示文件
在项目中,创建dojo文件夹,引入ArcGIS API for Javascript的智能提示文件,如下图所示:
如果是使用Aptana3,直接将智能提示文件拷贝到工程里面就可以了。
4. 编写代码
打开FirstMap.html页面,写入下面的代码:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>第一个地图应用</title>
<link rel="stylesheet" type="text/css"
href="http://192.168.1.100/arcgis_js_v33_api/library/3.3/jsapi/js/dojo/dijit/themes/tundra/tundra.css" />
<link rel="stylesheet" type="text/css"
href="http://192.168.1.100/arcgis_js_v33_api/library/3.3/jsapi/js/esri/css/esri.css" />
<script type="text/javascript"
src="http://192.168.1.100/arcgis_js_v33_api/library/3.3/jsapi/init.js"></script>
<script src="dojo/jsapi_vsdoc12_v33.js" type="text/javascript"></script>
<style type="text/css">
.MapClass {
width:1400px;
height:700px;
border: 1px solid #000;
}
</style>
<script type="text/javascript">
dojo.require("esri.map");
dojo.require("dijit.layout.ContentPane");
dojo.require("dijit.layout.BorderContainer");
function Init() {
var MyMap = new esri.Map("MyMapDiv");
var MyTiledMapServiceLayer = new esri.layers.ArcGISTiledMapServiceLayer("http://www.arcgisonline.cn/ArcGIS/rest/services/ChinaOnlineCommunity/MapServer");
MyMap.addLayer(MyTiledMapServiceLayer)
}
dojo.addOnLoad(Init);
</script>
</head>
<body class="tundra">
<div id="MyMapDiv" class="MapClass"></div>
</body>
</html>
FirstMap.html
5. 运行程序
程序运行之后效果图如下图所示:
部署成功
附赠:arcgisonline上的一些地址:http://server.arcgisonline.com/ArcGIS/rest/services