ArcGIS API for JavaScript服务搭建

最新推荐文章于 2024-09-05 14:17:19 发布

超频化石鱼

最新推荐文章于 2024-09-05 14:17:19 发布

阅读量586

点赞数

分类专栏： ArcGIS 文章标签： ArcGIS API 部署

本文链接：https://blog.csdn.net/fyyyr/article/details/81239992

版权

ArcGIS 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

ArcGIS API for JavaScript服务用于提供给web工程API接口服务。ArcGIS API for JavaScript服务就像是一个工厂，web工程将参数传入，API会返回相应的结果。其中ArcGIS Server的url和页面dom容器的id都是在页面中通过参数传给API对象的，这样API就能获取Server的地图服务并渲染到容器中。

ArcGIS API for JavaScript服务常用的搭建方式有IIS和Tomcat。这里讲解Tomcat的方式。

确保Tomcat已经安装且可顺利启动。设Tomcat的端口为8080。
下载ArcGIS API for JavaScript。官网为：
https://developers.arcgis.com/downloads/apis-and-sdks?product=javascript
需要注册并登陆才能下载。推荐注册登录下载，也可以选择从第三方网站或者我上传的资源中下载：
https://download.csdn.net/download/fyyyr/10568214
目前最新版本为3.25和4.8。3.x系列和4.x系列都在更新。我们选择3.25。解压后，结构如下：

可以看到arcgis_js_v325_api/arcgis_js.api/library/3.25/下有两个文件夹：3.25和3.25compcat。发布API服务只需要3.25，3.25compact可以删除。
确保Tomcat服务停止。删除25compcat后，将arcgis_js_v325_api/下的整个arcgis_js.api文件夹复制到Tomcat的webapps文件夹下。
复制后目录如下：
打开/arcgis_js.api/library/3.25/3.25/init.js，搜索：
"https://[HOSTNAME_AND_PATH_TO_JSAPI]dojo"
将其替换为：
(location.protocol === 'file:' ? 'http:' : location.protocol) + '//' + "localhost:8080/arcgis_js_api/library/3.25/3.25/dojo"
注意不要漏掉双引号。
其中：
1. 原始的https会被替换掉，这样就不会出现文件访问不到的情况。
2. localhost用于API服务与web工程都在同一台机器的情况。若可能不在同一台机器，则将localhost改为API服务器的ip。
3. 8080为Tomcat的端口。
4. arcgis_js_api文件夹复制到Tomcat的webapps目录下后，就变成了Tomcat的应用。所以后面都是应用的路径。
打开/arcgis_js.api/library/3.25/3.25/dojo/dojo.js，搜索：
"https://[HOSTNAME_AND_PATH_TO_JSAPI]dojo"
将其替换为：
"https:// localhost:8080/arcgis_js_api/library/3.25/3.25/dojo"
注意不要漏掉最后的双引号。规则与4相同，但这里不需要考虑https的问题。
有关于4和5，不同版本的路径非常有可能是不同的。所以要针对自己使用的版本来调整。
实际上，/arcgis_js.api/library/3.25/下有两个html文件，windows对应的是install_api_windows.html，里面有一节的标题是Modify the build，这就是针对当前版本的详细修改说明。
修改完成，保存，然后启动Tomcat。此时，在浏览器中输入：
http://localhost:8080/arcgis_js_api/library/3.25/install_api_windows.html
就能打开5中提到的install_api_windows.html。

新建一个html文件，内容为：

<!DOCTYPE html>
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
		<meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no" />
		<title>Simple Map</title>
		<link rel="stylesheet" href="http://localhost:8080/arcgis_js_api/library/3.25/3.25/esri/css/esri.css">
		<script type="text/javascript" src="http://localhost:8080/arcgis_js_api/library/3.25/3.25/init.js"></script>
		<style>
			html,
			body,
			#map {
				height: 100%;
				margin: 0;
				padding: 0;
			}
		</style>
	</head>
	<body>
		<div id="map" style="width:900px; height:600px; border:1px solid #000;"></div>
		<script>
			var map;
			require(["esri/map", "dojo/domReady!"], function(Map) {
					map = new Map("map", {
						basemap: "topo", //For full list of pre-defined basemaps, navigate to http://arcg.is/1JVo6Wd
						center: [-122.45, 37.75], // longitude, latitude
						zoom: 13
					});
			});
		</script>
	</body>
</html>

注意意其中的路径，指向的是放到Tomcat下的API工程。
这里引用了esri.css和init.js，js代码中还调用了esri/map，其中map为map.js。确保路径和文件名与Tomcat下的API工程可以一一对应。注意区分大小写。