arcgis api 4.x for js 离线部署
在我的GIS之家群里,经常遇到 webgis 开发新手们提问 arcgis api for js 如何本地离线部署,而不是直接调用在线的,因为在线模式依赖互联网以及网速环境因素,受到的限制影响比较大。所以,本篇专门来讲解 arcgis api for js 离线部署的详细步骤配置以及测试是否部署成功,以 IIS 部署为例,tomcat 部署配置也是同个道理,差别不大。
本篇以 arcgis api 4.x for js 版本系列为测试用例,其实 arcgis api 3.x for js 版本系列的离线配置方法也是类似的,之前写过一篇,参照文章,这里不再一一叙述。
arcgis api 下载途径
esri官网下载,下载需要注册 arcgis 用户才行,版本自己选择,官网下载最新版本api的地址:
官网下载页面
共享已经下载好的 arcgis 3.x 以及arcgis 4.x 系列api版本地址:
arcgis api3.18 for js:下载
arcgis api3.19 for js:下载
arcgis api3.20 for js:下载
arcgis api3.23 for js:下载
arcgis api3.24 for js:下载
arcgis api3.25 for js:下载
arcgis api3.26 for js:下载
arcgis api3.27 for js(密码:qrwh):下载
arcgis api4.1 for js:下载
arcgis api4.2 for js:下载
arcgis api4.6 for js:下载
arcgis api4.7 for js:下载
arcgis api4.8 for js:下载
arcgis api4.9 for js:下载
arcgis api4.10 for js(密码:6agz):下载
IIS部署配置方案
把下载的arcgis api 4.x 离线包解压拷贝到 C:\inetpub\wwwroot 目录下:

配置 init.js 文件,修改里面的路径,我本机的目录如下:
C:\inetpub\wwwroot\arcgis_js_api\library\4.10\init.js ;
init.js 文件里面,全局搜索 [HOSTNAME_AND_PATH_TO_JSAPI] ,然后替换成 api 在本地机器上的部署路径,我的配置如下:http://localhost/arcgis_js_api/library/4.10/dojo
同理,配置 dojo.js 文件

全局搜索 [HOSTNAME_AND_PATH_TO_JSAPI] ,然后替换成 api 在本地机器上的部署路径,我的配置如下:http://localhost/arcgis_js_api/library/4.10/dojo
测试离线部署api是否成功
用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 - 4.10</title>
<style>
html,
body,
#viewDiv {
padding: 0;
margin: 0;
height: 100%;
width: 100%;
}
</style> <link rel="stylesheet" href="http://localhost/arcgis_js_api/library/4.10/esri/css/main.css">
<script src="http://localhost/arcgis_js_api/library/4.10/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",
map: map,
zoom: 4,
center: [15, 65] // longitude, latitude
}); });
</script>
</head> <body>
<div id="viewDiv"></div>
</body>
</html>
在有互联网情况下,地图能够加载出来,说明离线部署成功
窃喜之余,突然发现网页f12模式下,控制台出现跨域错误:
arcgis api 3.x 版本离线部署没有出现这种问题,所以,还要解决IIS跨域问题,具体步骤如下:
打开IIS界面,点击HTTP响应标头

在右侧可以看到添加,然后添加如下标头即可
Access-Control-Allow-Headers:Content-Type, api_key, Authorization
Access-Control-Allow-Origin:*


刷新网页,控制台没报错了,解决跨域问题

更多的详情见:GIS之家小专栏
文章尾部提供源代码下载,对本专栏感兴趣的话,可以关注一波
arcgis api 4.x for js 离线部署的更多相关文章
- ArcGIS API for JavaScript 4.x 本地部署之Nginx法
上篇ArcGIS API for JavaScript 4.x 离线配置之IIS法提到,如何用IIS配置ArcGIS jsAPI: 本篇则使用http下的Nginx配置,其原理基本一致.https的部 ...
- arcgis api 4.x for js 自定义 Draw 绘制手绘面以及手绘线,只针对二维视图(附源码下载)
前言 关于本篇功能实现用到的 api 涉及类看不懂的,请参照 esri 官网的 arcgis api 4.x for js:esri 官网 api,里面详细的介绍 arcgis api 4.x 各个类 ...
- ArcGIS API for JavaScript 4.x 本地部署之Apache(含Apache官方下载方法)
IIS.Nginx都说了,老牌的Apache和Tomcat也得说一说(如果喜欢用XAMPP另算) 本篇先说Apache. 安装Apache 这个...说实话,比Nginx难找,Apache最近的版本都 ...
- arcgis api 4.x for js 结合 react 入门开发系列初探篇(附源码下载)
你还在使用 JQuery 或者 Dojo 框架开发 arcgis api 4.x for js 吗?想试试模块化开发吗?随着前端技术的发展,arcgis api 4.x for js 也有了结合 re ...
- arcgis api 3.x for js 地图加载多个 SHP 图层压缩以及 json 文件展示(附源码下载)
前言 关于本篇功能实现用到的 api 涉及类看不懂的,请参照 esri 官网的 arcgis api 3.x for js:esri 官网 api,里面详细的介绍 arcgis api 3.x 各个类 ...
- arcgis api 3.x for js 入门开发系列批量叠加 zip 压缩 SHP 图层优化篇(附源码下载)
前言 关于本篇功能实现用到的 api 涉及类看不懂的,请参照 esri 官网的 arcgis api 3.x for js:esri 官网 api,里面详细的介绍 arcgis api 3.x 各个类 ...
- arcgis api 3.x for js 入门开发系列二十二地图模态层(附源码下载)
前言 关于本篇功能实现用到的 api 涉及类看不懂的,请参照 esri 官网的 arcgis api 3.x for js:esri 官网 api,里面详细的介绍 arcgis api 3.x 各个类 ...
- arcgis api 3.x for js 入门开发系列二十一气泡窗口信息动态配置模板
前言 关于本篇功能实现用到的 api 涉及类看不懂的,请参照 esri 官网的 arcgis api 3.x for js:esri 官网 api,里面详细的介绍 arcgis api 3.x 各个类 ...
- arcgis api 3.x for js 入门开发系列十八风向流动图(附源码下载)
前言 关于本篇功能实现用到的 api 涉及类看不懂的,请参照 esri 官网的 arcgis api 3.x for js:esri 官网 api,里面详细的介绍 arcgis api 3.x 各个类 ...
随机推荐
- 【问题】sql数据库报无效的数据证书,需重新安装
事情的经过: 今天打开sql2014数据库,没有成功运行,但是给我弹出一个"无效的数据证书,需要重新安装!"提示.什么情况.为什么,应该是前一天弄vs导致的.因为升级了vs2017 ...
- Python_heapq
import heapq #导入heapq堆模块 import random data = random.sample(range(1000),10) print(data) heapq.heapif ...
- python_汉塔诺
'''据说古代有一个梵塔,塔内有三个底座A.B.C,A座上有64个盘子,盘子大小不等,大的在下,小的在上.有一个和尚想把这64个盘子从A座移到C座,但每次只能允许移动一个盘子,在移动盘子的过程中可以利 ...
- python_字典 list_4
>>> import string>>> import random #组合字符>>> x=string.ascii_letters+string ...
- 【转】网上看到的“12个非常有用的JavaScript技巧”
1) 使用!!将变量转换成布尔类型 有时,我们需要检查一些变量是否存在,或者它是否具有有效值,从而将它们的值视为true.对于做这样的检查,你可以使用!!(双重否定运算符),它能自动将任何类型的数据转 ...
- flock SUSE/RHEL
Util-linux-2.26 Util-linux 软件包其它实用程序.包括处理文件系统.控制台.分区以及消息等工具. 大概编译时间:1.3 SBU 需要磁盘空间:137 MB 6.65.1. FH ...
- 【转】IntelliJ IDEA中文乱码问题
1.首先是编辑器的乱码,这个很好解决,file->settings->appearence里面有个Name设置成支持中文的字 体(这个很重要) 同样还要再settings中的Eidtor- ...
- SSM-Spring-21:Spring中事物的使用案例
------------吾亦无他,唯手熟尔,谦卑若愚,好学若饥------------- 股票买卖案例(我会用三种开启事物的方法 代理工厂bean版的,注解版的,aspectj xml版的) 简单的介 ...
- 第六章——决策树(Decision Trees)
决策树是强大的,多功能的机器学习算法. 6.1 训练和可视化一个决策树 在iris数据集训练DecisionTreeClassifier: from sklearn.datasets import l ...
- 配置phpstorm自动上传代码
本地的项目目录是 D:\www\guandan 虚拟机上的项目目录是 /var/www/guandan