在我的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. 简述spring的工作原理

    建议不要硬着头皮看spring代码,本身的代码800多m,就是不上班开始看也不知道什么时候看完.如果想学学ioc,控制反转这些建议看看jodd项目,比较简练,但是我仍然不建议过多的看这些框架的代码,因 ...

  2. sql中having、group by用法及常用聚合函数

    having是用在聚合函数的用法.当我们在用聚合函数的时候,一般都要用到GROUP BY 先进行分组,然后再进行聚合函数的运算.运算完后就要用到HAVING 的用法了,就是进行判断了. 注意:sele ...

  3. Java NIO Buffer缓冲区

    原文链接:http://tutorials.jenkov.com/java-nio/buffers.html Java NIO Buffers用于和NIO Channel交互.正如你已经知道的,我们从 ...

  4. .Net中集合排序的一种高级玩法

    背景: 学生有名称.学号, 班级有班级名称.班级序号 学校有学校名称.学校编号(序号) 需求 现在需要对学生进行排序 第一排序逻辑 按学校编号(序号)排列 再按班级序号排列 再按学生学号排列 当然,在 ...

  5. 利用post请求发送内容进行爬虫

    利用post请求发送内容进行爬虫 import requests url = 'http://www.iqianyue.com/mypost' header = {} header['Accept-L ...

  6. selenium设置proxy、headers(phantomjs、Chrome、Firefox)

    phantomjs 设置ip 方法1: service_args = [ '--proxy=%s' % ip_html, # 代理 IP:prot (eg:192.168.0.28:808) '--p ...

  7. Java元编程及其应用

    首先,我们且不说元编程是什么,他能做什么.我们先来谈谈生产力. 同样是实现一个投票系统,一个是python程序员,基于django-framework,用了半小时就搭建了一个完整系统,另外一个是标准的 ...

  8. BZOJ_5015_[Snoi2017]礼物_矩阵乘法

    BZOJ_5015_[Snoi2017]礼物_矩阵乘法 Description 热情好客的请森林中的朋友们吃饭,他的朋友被编号为 1-N,每个到来的朋友都会带给他一些礼物:.其中,第 一个朋友会带给他 ...

  9. 在openjdk8下看Unsafe源码

    尽管有传言JAVA9可能会移除Unsafe类,但不妨碍我们理解它的原理.因为类不在了,native方法还在那里.就像菜换样了,食材就那些没变.一个好厨师不仅仅需要会做菜,还需要能识别食材特性...来吧 ...

  10. oracle服务的一些问题，先发2个，以后慢慢添加~~

    OracleOraDb11g_home1TNSLister服务启动后停止 解决办法: 1. 修改文件C:\app\zhuwei\product\11.1.0\db_1\NETWORK\ADMIN\li ...