在我的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. python捕获异常、处理异常

    https://blog.csdn.net/jmilk/article/details/50047457

  2. Python_生成大量随机信息

    #coding=utf-8 import random import string import codecs ''' 演示如何使用Python标准库random来生成随机数据,这在需要 ''' #常 ...

  3. HTTP相关:TCP/IP、DNS

    最近在看HTTP的书,看得有点慢,而且断断续续的,很多东西看完就忘了.知识点多且零散,感觉要多看几遍才能消化. TCP/IP协议族按层次分为4层: 应用层: 应用层决定了向用户提供应用服务时通信的活动 ...

  4. redis主从相关问题

    redis主从是如何实现同步的 第一次.Slave向Master同步的实现是:        Slave向Master发出同步请求(发送sync命令),Master先dump出rdb文件,然后将rdb ...

  5. 初识Java NIO

    原文链接:http://tutorials.jenkov.com/java-nio/index.html Java NIO是java 1.4之后新出的一套IO接口,这里的新是相对于原有标准的Java ...

  6. Intent里ACTION的CALL和DIAL的区别?

    Intent在进行activity之间的跳转的时候有一种方式是通过设置ACTION的方式来进行跳转的,这个ACTION是设置在manifest文件里Intent-filter里的,我们可以通过跳转自定 ...

  7. Linux kernel的中断子系统之(八):softirq

    返回目录:<ARM-Linux中断系统>. 总结:中断分为上半部和下半部,上半部关中断:下半部开中断,处理可以延迟的事情.下半部有workqueue/softirq/tasklet三种方式 ...

  8. Java EE

  9. WIN10怎么安装SQL server2000数据库

    怎样在win10下安装sql2000数据库 1.安装之前先确认自己的Windows10是64位的还是32位的 2.替换对应的系统文件SQLUNIRL.dll 此时你可能会遇到,没有权限替换文件或重命名 ...

  10. selenium--unittest 框架/selenium--常见异常

    selenium常见异常 from selenium import webdriver from selenium.webdriver.common.by import By from seleniu ...