一、安装Appserv工具包
1、AppServ简介
Appserv是PHP网页架构工具组合包，作者将一些网络上免费的架站资源重新包装成单一的安装程序，以便Web初学者快速完成架站，AppServ所包含的软件有：Apache、Apache Monitor、PHP、MySQL、phpMyAdmin等。如果本地机器没有安装过Apache、PHP、MySQL等系统，那么用这个软件则可以让我们迅速搭建完整的底层环境。
2、安装AppServ
①打开AppServ官网，官网地址：https://www.appserv.org/en/ ，点击DOWNLOAD下载安装包。
②打开下载的AppServ安装包，直接点击Next安装，安装过程很简单。
默认安装在C盘，点击Next
由于目前只需要Apache服务，所以将其他勾选取消，只保留Apache HTTP Server的勾选。
保持默认即可，继续点击Next
接下来等待安装完成。
取消Start MySQL的勾选，然后点击Finish完成安装。
完成安装后，查看C盘，发现AppServ文件夹已经生成，接下来会将ArcGIS API for JavaScript的开发工具包等都放在这个文件夹中。
二、部署ArcGIS API for JavaScript的开发环境
1、获取ArcGIS API for JavaScript的开发工具包
①登录ESRI关于ArcGIS API for JS部分的网站，https://developers.arcgis.com/javascript/ 点击Get the API
②点击Download API
③这里使用的是3.24版本开发包，所以下载3.24API以及相应的Documentation（这个就是SDK包）。
2、设置ArcGIS API for JavaScript开发工具包
①解压其中下载的arcgis_js_v324_api压缩包，进入解压的文件夹，直至下面的层次目录，可以发现一个3.24文件夹和3.24compact文件夹。
其中，3.24文件夹里面存储的是未压缩版开发包，适用于开发阶段（因为更容易查看源代码）。3.24compact文件夹里存储的是压缩版开发包，由于体积相对更小，适用于生产环境。另外下面的两个html文件是关于API在linux和windows环境下的配置帮助文档。
②由于我们是要进行开发，所以选取3.24这个文件夹，将其复制到刚才安装AppServ时生成的AppServ文件夹中的www文件夹的根目录中，即C:\AppServ\www ，这里我将3.24文件夹改名为arcgis3.24，增加辨识度。
③修改文件信息
修改文件一(init.js)
位置：C:\AppServ\www\arcgis3.24\init.js
将https://[HOSTNAME_AND_PATH_TO_JSAPI]dojo替换成http://localhost/arcgis3.24/dojo
修改文件二(dojo.js)
位置：C:\AppServ\www\arcgis3.24\dojo\dojo.js
将https://[HOSTNAME_AND_PATH_TO_JSAPI]dojo替换成http://localhost/arcgis3.24/dojo
④也可以将下载的arcgis_js_v324_sdk文件解压后复制到C:\AppServ\www文件夹中，以便随时调用查看API帮助文档，这里不再赘述。
3、测试环境
经过以上的步骤，ArcGIS API for JavaScript本地开发环境已经配置完成，接下来对其进行测试。
①在桌面新建一个test.html文件，将测试代码复制进去
测试代码：
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>Test Map</title>
<link rel="stylesheet" href="http://localhost/arcgis3.24/esri/css/esri.css" />
<script src="http://localhost/arcgis3.24/init.js"></script>
<style>
html,
body,
#map {
height: 100%;
width: 100%;
margin: 0;
padding: 0;
}
</style>
<script>
require([
"esri/map",
"esri/layers/ArcGISTiledMapServiceLayer",
"dojo/domReady!"
],function(Map, ArcGISTiledMapServiceLayer) {
var map = new Map("map");
//If you do not have Internet access then you will need to point this url to your own locally accessible tiled service.
var tiled = new ArcGISTiledMapServiceLayer("https://services.arcgisonline.com/arcgis/rest/services/Ocean/World_Ocean_Base/MapServer");
map.addLayer(tiled);
});
</script>
</head>
<body>
<div id="map"></div>
</body> ②使用浏览器打开test.html文件
如果浏览器加载网页如下，说明环境已经配置成功！
4、解释测试代码
接下来对测试代码进行详解，同时也顺带讲解了如何将ArcGIS API for JavaScript开发包引入HTML文件
①引用ESRI提供的样式表
在HTML文件中的<head>部分中增加引用ESRI提供的样式表
<link rel="stylesheet" href="http://localhost/arcgis3.24/esri/css/esri.css" />esri.css样式表主要用于ESRI提供的小部件与组件（例如地图、信息框等）。
此外还可以引用Dojo提供的样式表，Dojo提供了四组样式，分别是claro、tundra、soria和nihilo，每种是一组定义用户界面的字体、颜色与大小的样式。它们的引用如下：
<link rel="stylesheet" href="http://localhost/arcgis3.24/dijit/themes/claro/claro.css" />
<link rel="stylesheet" href="http://localhost/arcgis3.24/dijit/themes/tundra/tundra.css" />
<link rel="stylesheet" href="http://localhost/arcgis3.24/dijit/themes/nihilo/nihilo.css" />
<link rel="stylesheet" href="http://localhost/arcgis3.24/dijit/themes/soria/soria.css" />②引用ArcGIS API for JavaScript
<script src="http://localhost/arcgis3.24/init.js"></script>③在<body>区域增加一个<div>元素，用于承载地图
<body>
<div id="map"></div>
</body>④在<head>部分，加载地图模块
<script>
require([
"esri/map",
"esri/layers/ArcGISTiledMapServiceLayer",
"dojo/domReady!"
],function(Map, ArcGISTiledMapServiceLayer) {
});
</script>ArcGIS API for JavaScript包含了许多“资源”，这些“资源”是按用途组织的，例如：esri/map用于地图、几何对象，图形与符号，esri/tasks/locator用于地理编码。若要在应用程序中使用这些资源，需要先调用Dojo提供的全局函数require进行加载。
require函数需要两个参数，第一个参数是依赖项，第二个参数是一个回调函数。require函数的第一个参数又包括两类，一类是真正的依赖项，另一类是插件，例如"dojo/dom"、"dojo/fx"、"dojo/domReady!"等。对于依赖类，如果不存在，Dojo就会根据目录结构去加载。当加载完成之后，将执行回调函数。插件是用来扩展加载器功能的，插件的加载方式和常规模块没什么区别，只是在模块标识符的结尾使用了特殊符号"!"来表明它的请求是插件请求。Dojo默认带有一些插件，4个最重要的插件是：dojo/text、dojo/il8n、dojo/has和dojo/domReady，dojo/domReady插件是在DOM解析完毕以后再执行回调函数，这样就可以确保在执行任何代码前DOM可用。在回调函数中的参数依次是require函数的第一个参数指定的依赖类别名，当然可以指定为不重复的变量名即可，但是为了代码的可读性、可维护性以及一致性，最好是对于同一个模块使用同一个别名。
⑤在require函数指定的回调函数中，加入如下代码
var map = new Map("map");
var tiled = new ArcGISTiledMapServiceLayer("https://services.arcgisonline.com/arcgis/rest/services/Ocean/World_Ocean_Base/MapServer");
map.addLayer(tiled);上面的第1行代码使用Map类（加载自esri/map模块）来创建一个新的地图。参数mapDiv是在HTML页面中包含地图的DIV名称。第2行代码根据地图服务的URL创建了一个地图切片图层。第三行代码是将创建好的地图切片图层加入到地图中。
⑥设置样式，在<head>部分，加入如下代码，让地图重返整个浏览器窗口。
<style>
html,
body,
#map {
height: 100%;
width: 100%;
margin: 0;
padding: 0;
}
</style>全文完。
扫一扫
1855
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
