arcgis的几种使用情况

1、api文件下载(本人使用4.17)

1.首先先到百度搜索 arcgis api for js，进入官网。
2.找到Get the API按钮。
arcgis_download_api
3.找到如图所示，点击Download API
arcgis_download
4.选择对应版本的API和Documentation(官网默认展示的是最新版本的，所以其他的版本的建议还是将文档也下载下来)
arcgis_download_list

2、部署

2.1 离线部署|本地部署(不用tomcat或者IIS服务器)

1.首先将你下载的API压缩包解压，然后进去找到以你的api版本号命名的文件夹，我的版本是4.17，所以我打开4.17这个文件夹，文件夹里面的内容如下：
arcgis_离线部署_01
2.将4.17这个文件夹拷贝出来（也可以不拷贝出来，就在原位置操作），随便放在一个位置，然后把文件夹名字改成你想要的名字（不改也可以），这里我将文件夹名字不做修改。
3.打开4.17文件夹，找到并打开init.js文件和dojo文件夹下的dojo.js文件，crtl+f搜索找到[HOSTNAME_AND_PATH_TO_JSAPI]这串文字，然后将包含这串文字的引号里面里的内容用"你修改的文件夹名字/dojo"替换,这里我用"4.17/dojo"替换，好啦，大功告成了，让我们来测试一下吧！
4.使用
在html文件中使用：前提是你的.html文件必须和4.17文件在同一位置。

1
2
<link rel="stylesheet" href="4.17/esri/themes/dark-blue/main.css">
<script src="4.17/init.js"></script>

如果不在请采用相对路径，如：

1
2
3
4
5
6
7
<!--
	文件路径
	/html/index.html
	/4.17
-->
<link rel="stylesheet" href="../4.17/esri/themes/dark-blue/main.css">
<script

在vue项目使用：前提是你的4.17文件夹放进/public的根目录下即：/public/4.17，然后安装esri-loader

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
import esriLoader from 'esri-loader'

const options = {
	url: '4.17/init.js',
	css: '../../4.17/esri/themes/dark-blue/main.css'
}
esriLoader.loadModules([
	'esri/Map',
	'esri/views/MapView'
	], options)
	.then(([ArcGISMap, MapView]) => {
		var map = new ArcGISMap({
			basemap: 'streets-relief-vector'
		})
		var view = new MapView({
			container: 'map',
			map: this.map,
			center: [-101.17, 21.78],
			zoom: 4
		})
		// 当视图加载完毕后
		view.when(() => {
		})
	})

2.2 离线部署|本地部署(用tomcat服务器)

1.首先将下载好的api文件4.17放入Tomcat服务中的Webapp下，然后自己百度tomcat配置项目使用端口，然后启动你的Tomcat服务器
2.打开4.17文件夹，找到并打开init.js文件和dojo文件夹下的dojo.js文件，crtl+f搜索找到[HOSTNAME_AND_PATH_TO_JSAPI]这串文字，然后将包含这串文字的引号里面里的内容用"http://localhost:你配置的端口/4.17/dojo"替换,这里我用"http://localhost:你配置的端口/4.17/dojo"替换，好啦，大功告成了，让我们来测试一下吧！
3.使用
在html文件中使用

1
2
<link rel="stylesheet" href="http://localhost:你配置的端口/4.17/esri/themes/dark-blue/main.css">
<script src="http://localhost:你配置的端口/4.17/init.js"></script>

在vue项目使用

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
import esriLoader from 'esri-loader'

const options = {
	url: 'http://localhost:你配置的端口/4.17/init.js',
	css: 'http://localhost:你配置的端口/4.17/esri/themes/dark-blue/main.css'
}
esriLoader.loadModules([
	'esri/Map',
	'esri/views/MapView'
	], options)
	.then(([ArcGISMap, MapView]) => {
		var map = new ArcGISMap({
			basemap: 'streets-relief-vector'
		})
		var view = new MapView({
			container: 'map',
			map: this.map,
			center: [-101.17, 21.78],
			zoom: 4
		})
		// 当视图加载完毕后
		view.when(() => {
		})
	})

当然以我的失败经验得出肯定会出错，比如左上角的控件符号没有显示,控制台会打印出以下错误：

1
Access to Font at 'http://localhost:8080/4.17/esri/themes/base/icons/fonts/CalciteWebCoreIcons.woff?cu4poq' from origin 'null' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'null' is therefore not allowed access.

这是显示你已经跨域请求资源导致资源请求失败 但是解决办法是有的 修改Tomcat的web.xml配置文件 打开config/web.xml文件，添加下面的代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
（如web.xml中有多个filter时要把下面配置放在最前端）
<filter>
 <filter-name>CorsFilter</filter-name>
 <filter-class>org.apache.catalina.filters.CorsFilter</filter-class>
 <init-param>
   <param-name>cors.allowed.methods</param-name>
   <param-value>GET,POST,HEAD,OPTIONS,PUT</param-value>
 </init-param>
 <init-param>
   <param-name>cors.allowed.headers</param-name>
   <param-value>Access-Control-Allow-Origin,Content-Type,X-Requested-With,accept,Origin,Access-Control-Request-Method,Access-Control-Request-Headers</param-value>
 </init-param>
 <async-supported>true</async-supported>
</filter>
<filter-mapping>
 <filter-name>CorsFilter</filter-name>
 <url-pattern>/*</url-pattern>
</filter-mapping>

2.2 不部署|在线Acrgis

这种情况因为使用的是arcgis官网的API，并且是在国外，所以在访问过程中会特别慢，不建议使用。
在html文件中使用

1
2
<link rel="stylesheet" href="https://js.arcgis.com/4.17/esri/themes/light/main.css">
<script src="https://js.arcgis.com/4.17/"></script>

在vue项目使用

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
import esriLoader from 'esri-loader'

const options = {
	url: 'https://js.arcgis.com/4.17/init.js',
	css: 'https://js.arcgis.com/4.17/esri/themes/dark-blue/main.css'
}
esriLoader.loadModules([
	'esri/Map',
	'esri/views/MapView'
	], options)
	.then(([ArcGISMap, MapView]) => {
		var map = new ArcGISMap({
			basemap: 'streets-relief-vector'
		})
		var view = new MapView({
			container: 'map',
			map: this.map,
			center: [-101.17, 21.78],
			zoom: 4
		})
		// 当视图加载完毕后
		view.when(() => {
		})
	})

出现地图代表访问成功。
arcgis示例地图