ArcGIS JS API 4.14离线部署
ArcGIS JS API 4.14离线部署
本文主要介绍ArcGIS JS API 4.14的离线部署和测试离线部署是否成功，JS API离线部署是ArcGIS JS API开发的首要前提，也是基本技能，希望本篇文章对大家有所帮助。
概述
在进行ArcGIS JS API开发时，我们第一步是要引入ArcGIS JS API(以下简称“JS API”)的地址，其实就是引入JS API的开发包，这个开发包主要引入两部分：JS源文件和CSS样式文件。在通常的开发环境中我们推荐加载引用官网的JS API地址，因为官网的JS API地址做了跨域等的处理，你只需要负责引入使用即可，不必去处理后续可能由跨域导致的有些图标显示异常的问题。但是我们在做项目时往往很多情况下是要在用户的内网环境中开发、部署系统，内网环境是连不了互联网的，这时候我们就需要离线部署JS API，然后在系统中引入离线版本的JS API来使用。这也是我把这篇文章放在开头的原因。
环境准备
- JS API离线包(官网可下载)
- 本地服务器（IIS、Tomcat、Nginx都可以）
- Notepad++编辑器(有的话最好，没有的话也不强求)
操作步骤
在开始之前，大家都知道我们ArcGIS JS API有两个大的版本，分别是3.X版本和4.X版本，到目前为止，3.X版本已经更新到了3.31，4.X版本更新到了4.14。很多人都会纠结的问题是我们到底该选哪一个版本来开发呢，对于这个问题，我们只需要按照官网的说明即可做出选择：
- 如果你的系统中目前并且后续都没有三维方面的要求，那就选3.X版本，即最新的3.31版本;
- 如果你的系统中目前已经有三维方面的需求或者后续可能会有三维方面的要求，那就选4.X版本，即最新的4.14版本。
以上两点是对大家如何做选择提供的参考，当然了，选取哪个版本最后还是看大家自己的意愿，比如说有些人就喜欢用3.X版本开发，那就选3.X版本，有些人喜欢用4.X版本开发的话就用4.X版本，但是有一点很重要，3.X版本是开发不了三维需求的，如果项目有三维需求，必须用4.X版本。 以上是开始前对于版本选择的说明，接下来我们进入今天的正题——ArcGIS JS API 4.14离线部署。
下载JS API离线开发包、部署离线包
1.1、到JS API官网下载4.14版本的API离线包，下载前需要登录ArcGIS官网的账号，如果没有的话可以注册一个，两三分钟搞定。注册登陆后即可选择相应的离线包进行下载，此处我们下载4.14版本的离线包，如下：
在下载页面我们可以看到每一个版本后面有两个下载项：API和Documentation，前者是我们需要下载的离线开发包，后者是我们JS API对应版本的帮助文档，里面包括demo代码，每个API参数说明信息，如果你想离线查看帮助文档的话也可将其一并下载，下载之后只需将其丢入本地服务器目录即可离线查看帮助文档，此处我们仅下载API离线包。 1.2、离线包下载之后是一个压缩文件，我们将其解压，然后将里面含有版本号的文件夹拷贝至本地服务器目录。在此处我们将解压文件夹中的4.14文件夹拷贝到Tomcat的webapps文件夹中，如下：
1.3、在Tomcat的webapps目录下打开4.14文件夹，然后用Notepad++或者windows自带的txt编辑器分别打开init.js文件和dojo目录下的dojo.js文件，分别将两个文件中的“[HOSTNAME_AND_PATH_TO_JSAPI]”替换为我们JS API的本地服务器路径http://localhost/4.14/，如下：
1.4、至此为止，我们的JS API离线部署已经完成。回顾整个过程，其实就是三步：下载离线包、拷贝离线包、修改文件信息。接下来我们验证一下我们的离线包是否部署成功。
验证JS API离线部署是否成功
2.1、离线包部署是否成功，最直接、最有效的办法就是我们拷贝官网的一个示例代码，然后将其里面的JS API引用地址替换成我们本地部署的地址，然后运行查看效果即可。如果运行结果和官网显示一致，那说明我们部署成功；如果显示异常，则说明我们部署失败。
2.2、在Tomcat的webapps目录下新建一个文件夹，取名为“JSAPI414demo”，然后在里面新建一个testjsapi.html文件，用Notepad++将其打开，并将如下代码拷贝至此html文件中：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no" />
<title>Intro to MapView - Create a 2D map</title>
<style>
html,
body,
#viewDiv {
padding: 0;
margin: 0;
height: 100%;
width: 100%;
}
</style>
<link rel="stylesheet" href="http://localhost/4.14/esri/themes/light/main.css" />
<script src="http://localhost/4.14/init.js"></script>
<script>
require(["esri/Map", "esri/views/MapView"], function(Map, MapView) {
var map = new Map({
basemap: "streets"
});
var view = new MapView({
container: "viewDiv", // Reference to the scene div created in step 5
map: map, // Reference to the map object created before the scene
zoom: 4, // Sets zoom level based on level of detail (LOD)
center: [15, 65] // Sets center point of view using longitude,latitude
});
});
</script>
</head>
<body>
<div id="viewDiv"></div>
</body>
</html>2.3、在浏览器中通过地址http://localhost/JSAPI414demo/testjsapi.html来查看运行结果，如果能实例化地图并显示，则说明JS API部署成功，如下：
2.4、到此为止，我们的ArcGIS JS API 4.14已经离线部署成功，大家可以进行离线开发了。
结尾
本文放在此系列的开头，主要介绍下ArcGIS JS API 4.14的离线部署，同时也介绍了对于3.X和4.X版本如何做选择，对于3.X版本，部署步骤和4.X版本一致，我们只需下载需要的3.X版本，然后拷贝至本地服务器目录，修改如上信息即可。在JS API离线部署的过程中其实有很多问题，如果大家按照此文章中的步骤操作出现问题时，请联系博主，乐意为各位解答。最后，欢迎各位GISer入坑~