在我的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. redis的持久化之AOF

    AOF Redis 分别提供了 RDB 和 AOF 两种持久化机制: RDB 将数据库的快照(snapshot)以二进制的方式保存到磁盘中. AOF 则以协议文本的方式,将所有对数据库进行过写入的命令 ...

  2. 数据结构和算法总结（一）：广度优先搜索BFS和深度优先搜索DFS

    前言 这几天复习图论算法,觉得BFS和DFS挺重要的,而且应用比较多,故记录一下. 广度优先搜索 有一个有向图如图a 图a 广度优先搜索的策略是: 从起始点开始遍历其邻接的节点,由此向外不断扩散. 1 ...

  3. Archlinux安裝指南（uefi+gpt）

    1.系统安装前的一些准备 首先在Archlinux官网下载镜像文件,然后刻录到U盘或光盘上.在我的机器上刻录arch镜像文件到U盘后启动不了,因为时间问题我没做过多的探索,所以后面直接刻录到光盘,用光 ...

  4. 文字分列 CSS属性

    column 这里有一系列新的CSS属性,可以帮助你很轻松的实现文字的多列布局.让我们瞧瞧: .three-column { padding: 1em; -moz-column-count: 3; - ...

  5. 34.如何获取app(apk和ipa)中的资源

    移动互联网中,主要的两个平台是android和ios,android上文件的安装包是后缀名为apk的文件,ios上文件的安装包是后缀名为ipa的文件,在本文分析一下这两种文件的特点,以及如何用程序去解 ...

  6. selenium自动化测试资源整理（含所有版本chrome、chromedriver、firefox下载链接）

    今天把手头有的一些关于selenium测试的资源整理了一下,分享出来. 1. 所有版本chrome下载 是不是很难找到老版本的chrome?博主收集了几个下载chrome老版本的网站,其中哪个下载的是 ...

  7. markdown中如何插入公式

    转自 :https://www.tuicool.com/articles/qqIrUbN 我是如何在Markdown文档里插入公式的 时间 2016-08-07 21:05:33 异步社区 原文  h ...

  8. Java 读书笔记 (九) 运算符

    短路逻辑运算符 && 当使用与逻辑运算符时,在两个操作数都为true时,结果才为true,但是当得到第一个操作为false时,其结果就必定是false,这时候就不会再判断第二个操作了. ...

  9. Oracle保留小数点后两位的几种方法

    有时候在做数据处理的时候,在前台页面上显示的数字需要保留小数点的后两位,不足两位的用0代替,这个时候就需要对数据做一些处理了.如果只用round(value,2)(四舍五入)和trunc(value, ...

  10. bzoj 2186 [Sdoi2008]沙拉公主的困惑 欧拉函数

    n>=m,所以就变成了求 ϕ(m!)∗n!/m! 而 ϕ(m!)=m!∗(p−1)/p...... p为m!的素因子,即为m内的所有素数,问题就转化为了求 n!∗(p−1)/p...... 只需 ...