给小白看的 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文件里做一样的事,各一次:
- 搜索 [HOSTNAME_AND_PATH_TO_JSAPI],这个是指向项目引用初始化的路径,也就是 baseUrl 。
- 将 [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. 这个屏蔽时有时无,只能怪我们有墙。好的解决办法是换源,即换成天地图或者其他国内图商的地图。怎么换不在本教程范围之内。咱们就此别过,有缘再见!