基于ArcGIS API 4.12 for JS 的开发实践（一）——部署

1、下载ArcGIS API 4.12

首先你要有一个ESRI的账号，没有的话注册一个好了，然后到地址https://developers.arcgis.com/downloads/apis-and-sdks这里选择下载的API，我们这里选择的是ArcGIS API for JavaScript 4.12。下载完成后得到一个压缩包，解压后里面包含了一个名为“arcgis_js_api”的文件夹，这个就是主要的代码。

 2、部署环境IIS的准备

我的开发环境是Windows7，我自行下载了IIS7.5并安装，然后在控制面板的“打开或关闭Windows功能”窗口里，添加IIS服务。完成后就可以在计算机管理中看的安装好的IIS。如下图所示。

安装完成后，要测试一下IIS是否正常。如下图所示。打开IIS默认网页。

当打开的网页出现下面图中所示的情况，即表示IIS安装成功。

注意，这里记得要添加一些MIME类型，因为ArcGIS API 4.12 for JS 用到了一些特殊的文件，必须把这些类型让IIS能够解析。并且，这几个MIMI类型最好直接添加到根节点上去，这样后面你建的网站会自动继承这些MIMI类型。

 

 MIMI添加

扩展名	MIMI类型
.svg	image/svg+xml
.woff	application/x-font-woff
.woff2	application/x-font-woff
.wsv	application/octet-stream
.ttf	application/octet-stream
.wasm	application/wasm

 

 

 

 

 

 

 

 

 再注意，添加完MIMIE类型，还要添加HTTP响应标头，这个是涉及到后面跨域访问的问题，强烈建议这里在根节点的HTTP响应标头里面添加以下内容：

HTTP响应标头名称	标头值
Access-Control-Allow-Credentials	true
Access-Control-Allow-Headers	origin,x-requested-with,content-type
Access-Control-Allow-Methods	POST,GET,OPTIONS
Access-Control-Allow-Origin	*

 

 

 

 

 

 

到这里，IIS这边的任务就完成了。

3、ArcGIS API 4.12的安装

把第一步总解压后的“arcgis_js_api”这个文件夹拷贝到“C:\inetpub\wwwroot”目录下面（IIS的根目录），记住是解压文件夹里面的“arcgis_js_api”这个文件夹，而不是解压后的文件夹。这个文件夹的目录结构如下：

第二步，修改“C:\inetpub\wwwroot\arcgis_js_api\library\4.12”这个目录下的“init.js”这个文件，把里面的[HOSTNAME_AND_PATH_TO_JSAPI]，替换为你自己的IP或者用localhost也可以。如下图：

同理，继续修改“C:\inetpub\wwwroot\arcgis_js_api\library\4.12\dojo”这个目录下的“dojo.js”这个文件，把里面的[HOSTNAME_AND_PATH_TO_JSAPI]，替换为你自己的IP或者用localhost也可以。如下图：

 

 

 

再次注意：原“dojo.js”、“init.js”这两个JS文件里的“baseUrl”用的是https方式的安全链接，ESRI官方文档上也是建议你用这种链接方式，但是这个方式会带来认证证书的问题，以及跨域访问的问题，虽然也是可以。我第一次部署就是用的这种链接方式，相对应，你在IIS上也必须部署为https这种方式的连接。成功之后，如果用chrome浏览器，会在地址栏提示你证书问题，很烦，如果省事，就直接用http这种链接方式吧。

另外，有同学认为这种手动修改源文件的方式太low太容易出错了吧，有没有一键快速替换的办法？你别说，ESRI官网还真有，就是利用Visual Studio Code 和Node.js这两个工具，可以实现快捷部署，我们下次专门讲一下这个吧,，详情请点击：基于ArcGIS API 4.12 for JS 的开发实践（二）——Visual Studio Code和NodeJs实现快捷部署。

4、验证及演示

ArcGIS API 4.12的安装经过第三步，就基本上成功了，为了确保演示成功，我们最后验证一下我们安装是否成功，方法很简单就是在地址栏输入“http://localhost/arcgis_js_api/library/4.12/dojo/dojo.js”来看看浏览器是不是能成功加载js。成功则如下图所示。

最后用一个小程序来演示下效果，其实ESRI官方已经有这个例子了，我就直接抄过来了，首先创建一个HTML文件，并拷入以下代码：

注意，上图中的两个URL链接，就是要替换为你自己的链接，一个是css样式，另外一个是dojo.js，这儿两个都必须加载。不出什么问题，在浏览器中代码将成功执行：

 

 

这里加载的地图是ESRI自带的，后面我们将会讲到怎么加载自己或者百度、高德地图。