在我的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 离线部署的更多相关文章

  1. ArcGIS API for JavaScript 4.x 本地部署之Nginx法

    上篇ArcGIS API for JavaScript 4.x 离线配置之IIS法提到,如何用IIS配置ArcGIS jsAPI: 本篇则使用http下的Nginx配置,其原理基本一致.https的部 ...

  2. arcgis api 4.x for js 自定义 Draw 绘制手绘面以及手绘线，只针对二维视图（附源码下载）

    前言 关于本篇功能实现用到的 api 涉及类看不懂的,请参照 esri 官网的 arcgis api 4.x for js:esri 官网 api,里面详细的介绍 arcgis api 4.x 各个类 ...

  3. ArcGIS API for JavaScript 4.x 本地部署之Apache(含Apache官方下载方法)

    IIS.Nginx都说了,老牌的Apache和Tomcat也得说一说(如果喜欢用XAMPP另算) 本篇先说Apache. 安装Apache 这个...说实话,比Nginx难找,Apache最近的版本都 ...

  4. arcgis api 4.x for js 结合 react 入门开发系列初探篇（附源码下载）

    你还在使用 JQuery 或者 Dojo 框架开发 arcgis api 4.x for js 吗?想试试模块化开发吗?随着前端技术的发展,arcgis api 4.x for js 也有了结合 re ...

  5. arcgis api 3.x for js 地图加载多个 SHP 图层压缩以及 json 文件展示（附源码下载）

    前言 关于本篇功能实现用到的 api 涉及类看不懂的,请参照 esri 官网的 arcgis api 3.x for js:esri 官网 api,里面详细的介绍 arcgis api 3.x 各个类 ...

  6. arcgis api 3.x for js 入门开发系列批量叠加 zip 压缩 SHP 图层优化篇（附源码下载）

    前言 关于本篇功能实现用到的 api 涉及类看不懂的,请参照 esri 官网的 arcgis api 3.x for js:esri 官网 api,里面详细的介绍 arcgis api 3.x 各个类 ...

  7. arcgis api 3.x for js 入门开发系列二十二地图模态层（附源码下载）

    前言 关于本篇功能实现用到的 api 涉及类看不懂的,请参照 esri 官网的 arcgis api 3.x for js:esri 官网 api,里面详细的介绍 arcgis api 3.x 各个类 ...

  8. arcgis api 3.x for js 入门开发系列二十一气泡窗口信息动态配置模板

    前言 关于本篇功能实现用到的 api 涉及类看不懂的,请参照 esri 官网的 arcgis api 3.x for js:esri 官网 api,里面详细的介绍 arcgis api 3.x 各个类 ...

  9. arcgis api 3.x for js 入门开发系列十八风向流动图（附源码下载）

    前言 关于本篇功能实现用到的 api 涉及类看不懂的,请参照 esri 官网的 arcgis api 3.x for js:esri 官网 api,里面详细的介绍 arcgis api 3.x 各个类 ...

随机推荐

  1. 微信小程序-获取地理位置

    近期公司使用微信小程序开发一套应用,涉及到使用小程序的获取地理位置接口,但是在使用测试过程中发现获取的经纬度偏差较大, 之后进行了一番搜索,终于找到了, 原文地址:http://blog.csdn.n ...

  2. Java MD5加密与RSA加密

    区别: MD5加密: 加密时通过原字符串加密成另一串字符串 解密时需要原加密字符串进行重新加密比较两次加密结果是否一致 T=RSA加密: 加密时通过原字符串生成密钥对(公钥+私钥) 解密时通过公钥和私 ...

  3. .NET开发设计模式-单例模式

    解释:单例模式主要特点:确保一个类只有一个实例,并提供一个访问它的全局访问点 意思就是说:在多线程的情况下:A先进行创建了该实例.B再进来访问时就不需要再创建了. using System; usin ...

  4. Java反射-修改private final成员变量值,你知道多少?

    大家都知道使用java反射可以在运行时动态改变对象的行为,甚至是private final的成员变量,但并不是所有情况下,都可以修改成员变量.今天就举几个小例子说明.  基本数据类型 String类型 ...

  5. springboot: thymeleaf 使用详解

    springboot:thymeleaf,这篇文章将更加全面详细的介绍thymeleaf的使用.thymeleaf 是新一代的模板引擎,在spring4.0中推荐使用thymeleaf来做前端模版引擎 ...

  6. .NET Core使用微软官方类库实现汉字转拼音

    一.NuGet包 拼音:Install-Package SimplifiedChinesePinYinConversion 简体-繁体互转:Install-Package TraditionalChi ...

  7. 你可能不知道的 JavaScript 中数字取整

    网上方法很多,标题党一下,勿拍 ^_^!实际开发过程中经常遇到数字取整问题,所以这篇文章收集了一些方法,以备查询. 常用的直接取整方法 直接取整就是舍去小数部分. 1.parseInt() parse ...

  8. 言简意赅的TIME_WAIT

    为什么要有TIME_WAIT? 主动关闭端发送完ACK后等2MSL(最长分节生命期),防止对端没有收到ACK这种情况,重发. 官方点,再官方点...... (1) 可靠地实现TCP全双工连接的终止: ...

  9. SSM-SpringMVC-29：SpringMVC中InitBinder的初步

     ------------吾亦无他,唯手熟尔,谦卑若愚,好学若饥------------- 之前博客的配置日期类型转换器,他是全局的,如果只是一个处理器中使用怎么办? 引出@InitBinder注解 ...

  10. posix,perl正则表达式区别

    1.正则表达式(Regular Expression,缩写为regexp,regex或regxp),又称正规表达式.正规表示式或常规表达式或正规化表示法或正规表示法,是指一个用来描述或者匹配一系列符合 ...