arcgis for php,一、ArcGIS API for JavaScript本地开发环境配置

是风让郁金香歌唱

于 2021-03-10 03:24:10 发布

阅读量245

点赞数

文章标签： arcgis for php

一、安装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下载安装包。

171430655_1_2019092011100735

②打开下载的AppServ安装包，直接点击Next安装，安装过程很简单。

171430655_2_20190920111007378

171430655_3_20190920111007535

默认安装在C盘，点击Next

171430655_4_20190920111007660

由于目前只需要Apache服务，所以将其他勾选取消，只保留Apache HTTP Server的勾选。

171430655_5_20190920111007785

保持默认即可，继续点击Next

171430655_6_20190920111007910

接下来等待安装完成。

171430655_7_20190920111009472

取消Start MySQL的勾选，然后点击Finish完成安装。

171430655_8_20190920111009675

完成安装后，查看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

171430655_9_20190920111009925

②点击Download API

171430655_10_20190920111010269

171430655_11_20190920111010503

③这里使用的是3.24版本开发包，所以下载3.24API以及相应的Documentation(这个就是SDK包)。

171430655_12_20190920111011456

2、设置ArcGIS API for JavaScript开发工具包

①解压其中下载的arcgis_js_v324_api压缩包，进入解压的文件夹，直至下面的层次目录，可以发现一个3.24文件夹和3.24compact文件夹。

171430655_13_20190920111011675

其中，3.24文件夹里面存储的是未压缩版开发包，适用于开发阶段(因为更容易查看源代码)。3.24compact文件夹里存储的是压缩版开发包，由于体积相对更小，适用于生产环境。另外下面的两个html文件是关于API在linux和windows环境下的配置帮助文档。

②由于我们是要进行开发，所以选取3.24这个文件夹，将其复制到刚才安装AppServ时生成的AppServ文件夹中的www文件夹的根目录中，即C:\AppServ\www ，这里我将3.24文件夹改名为arcgis3.24，增加辨识度。

171430655_14_20190920111011941

③修改文件信息

修改文件一(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文件，将测试代码复制进去

测试代码：

Test Map

html,

body,

#map {

height: 100%;

width: 100%;

margin: 0;

padding: 0;

}

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);

});

②使用浏览器打开test.html文件

如果浏览器加载网页如下，说明环境已经配置成功！

171430655_15_20190920111012144

4、解释测试代码

接下来对测试代码进行详解，同时也顺带讲解了如何将ArcGIS API for JavaScript开发包引入HTML文件

①引用ESRI提供的样式表

在HTML文件中的

部分中增加引用ESRI提供的样式表

esri.css样式表主要用于ESRI提供的小部件与组件(例如地图、信息框等)。

此外还可以引用Dojo提供的样式表，Dojo提供了四组样式，分别是claro、tundra、soria和nihilo，每种是一组定义用户界面的字体、颜色与大小的样式。它们的引用如下：

②引用ArcGIS API for JavaScript

③在

区域增加一个

元素，用于承载地图

④在

部分，加载地图模块

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创建了一个地图切片图层。第三行代码是将创建好的地图切片图层加入到地图中。

⑥设置样式，在

部分，加入如下代码，让地图重返整个浏览器窗口。

全文完。