给小白看的 ArcGIS API for JS 4.X 在 Tomcat 上的本地部署

给小白看的 ArcGIS API for JS 4.X 在 Tomcat 上的本地部署

FBI warning

• 电脑操作系统是 windows 64位
• 你需要具有一定的 html css js 基础（能写一个静态网页就够了）
• 还有百度或者必应搜索引擎
• 最好懂点英文（官网/说明书都是英文）

本篇内容非常小白，因为作者之前没搞过前端开发，别人以为的常识都花了很久去学，所以希望帮和作者一样的小白少走弯路。建议先阅读全文再决定要不要照做。转载（如果有的话）请标注来源。

在 IIS（和tomcat差不多的，另一个网络服务器，微软出的）的安装过程请看这篇：https://www.jianshu.com/p/7f186bcbd217

准备工作

声明：以下步骤所用软件的版本分别为当前（2019年7月）官方提供的最新版：

• Tomcat 8.5.42
• ArcGIS API for JS 4.11

请分别下载好安装包（arcgis api下载第一个就可以了，documentation包含了很多例子，非必须项）
https://tomcat.apache.org/download-80.cgi
https://developers.arcgis.com/downloads/apis-and-sdks?product=javascript

PS. 我假设你会下载安装包，不会的话百度一下。
PPS. tomcat安装配置步骤挺多，比如你的电脑需要先配置java环境，还要修改环境变量等。但繁琐不等于难，照网上攻略走就好。

正式开始

一、网络服务器：Apache Tomcat

安装注意事项

汤姆猫是个轻量级网络服务器，免费而好用，值得一装。网上的安装教程非常详细，请直接百度搜索如何安装+配置。只有一点请注意（其他软件也适用）：不要把什么东西都装在C盘！尤其是这种服务器软件，将来你可能要开发十几个网站，每个网站都要挂靠在tomcat下面（这个挂靠什么意思稍后会举例），安装好的tomcat文件夹只会越来越大，所以请保留充足的空间。我的tomcat放在D盘：

栗子：挂靠在 Tomcat 上的网页的结构和应用

请看上图被高亮的webapps文件夹，这个文件夹里将要放置你所有的网站项目，这些网站项目都可以通过tomcat的主页去访问。tomcat主页的地址，和安装、配置tomcat时设置的端口号有关，安装教程里会有，本篇中不做详述。我的tomcat主页地址是：http://localhost:8080


下面是随便写的一个主页的例子：

在webapps里面，放入挂靠的项目，我这里是【项目1_北京自来水用水情况调查】。项目1文件夹里面目前只放了一个 index.html。这个名字，是tomcat默认的项目主页。也就是说，在浏览器中键入项目地址：http://localhost:8080/项目1_北京自来水用水情况调查/ 之后，浏览器会自动展示 index.html 的内容。

与此对应，若在项目1的文件夹里放置其他html页面（比如 【页面a.html】），只能通过 http://localhost:8080/项目1_北京自来水用水情况调查/页面a.html 才能访问成功。
一个网站，通常由很多网页做成。所以常见做法，是项目下面有个index，index 里面包含了其它网页的超链接，所以服务器里面会放很多html，但“入口”都是这个index。

bin文件夹

bin 里面日常会用到的功能有三个：startup.bat，shutdown.bat，以及tomcat8w.exe。顾名思义，开机、关机和开关机一体化的可视化操作界面。平常用第三个exe就可以了，界面化的东西操作友好。遇到只能写cmd命令时，两个bat比较有效。

conf 文件夹

内含各种tomcat的原始设置，本文中不需要更改。

Tomcat 这边说明结束，现在来看 ArcGIS API 。

二、ArcGIS API for JS

下载好安装包以后，解压后的文件夹长这样：

另外两个都是说明文档，不重要。第三个安装说明，是 Esri 官方针对在 IIS 服务器上本地化安装的说明，全英文的，感兴趣可以照着做一下。

话外吐槽：Esri 公司安装类官方文都档像翻糖蛋糕一样屎。看目录：卧槽这么好的吗啥都有啊；照着做：为什么教程都那么顺利的啊？我咋就出现这么多问题呢？另外 Esri 老喜欢给文档里面加超链接了，你会从一个不明白跳转到另一个不明白，花费一个小时后发现自己陷入问题的深渊。

把唯一有用的 arcgis_js_api这一整个文件夹，拷贝到 tomcat 的 webapps 下面，像这样：

下面就是激动人心的改设置时刻了，千万不要手滑。打开以下两个js文件：

• D:\apache-tomcat-8.5.42\webapps\arcgis_js_api\library\4.11\ init.js
• D:\apache-tomcat-8.5.42\webapps\arcgis_js_api\library\4.11\dojo\ dojo.js

也许你没有像我一样把 tomcat 直接放在D盘，不要紧，找到对应的位置就好。
然后，在两个js文件里做一样的事，各一次：

1. 搜索 [HOSTNAME_AND_PATH_TO_JSAPI]，这个是指向项目引用初始化的路径，也就是 baseUrl 。
2. 将 [HOSTNAME_AND_PATH_TO_JSAPI]，整个替换为 【你的tomcat主页地址】/arcgis_js_api/library/4.11/

例如我的情况，就是替换成 http://localhost:8080/arcgis_js_api/library/4.11/ ，像这样：





PS. 用 http 协议可以，不太安全，后期可能会有问题。想改用 https 协议的话自己上网搜一下 tomcat https协议。

三、测试部署情况

测试 baseUrl 修改情况

现在在浏览器里输入 【你的tomcat主页地址】/arcgis_js_api/library/4.11/dojo/dojo.js 看看能不能显示出 dojo 内容。
比如我的： http://localhost:8080/arcgis_js_api/library/4.11/dojo/dojo.js 显示成功就说明修改没问题了。

测试地图显示情况

测试代码如下，箭头标出的三处要修改成你自己的位置。

另外，测试用的 html 文件需要放在 arcgis_js_api 文件夹下，否则会产生跨域问题：



访问测试网页时，要通过网址访问，直接打开文件夹里的 html 文档是无法加载出东西的：

网址访问是指这样：http://localhost:8080/arcgis_js_api/test.html
如果此时你的网页一片空白，左上角有缩放控件，右下角有 powered by Esri，并在打开调试控制台后，显示如下的403错误：



不要伤心，不要难过，这只是因为，esri在线服务器被屏蔽了，无法从国内正常访问，所以你的地图被挡在 the great wall 之外了。 此时搭上梯子，刷新网页，官方文档上那熟悉的示例地图就出现了，本地部署大成功！



PS. 这个屏蔽时有时无，只能怪我们有墙。好的解决办法是换源，即换成天地图或者其他国内图商的地图。怎么换不在本教程范围之内。咱们就此别过，有缘再见！