本例以及后面的例子都是使用的arcgis for js 4.6版本进行示例，因版本差异过大，特此说明
| 更新时间 | 更新内容 |
|---|---|
| 2018/05/15 | 1.修改遗漏的地方。2.添加init.js和dojo.js的baseUrl的修改 |
一、什么是离线部署
因为api等，需要用到的资源都在国外，受网络等影响，从而会影响到用户体验，所以讲这些api下载到本地，并且部署在自己的服务器上面，加快访问速度。
二、为什么需要离线部署
- 1.因为官网提供的api都在国外，访问速度时好时坏，影响用户体验。
- 2.网络的不定性可能会导致无法访问的情况。
- 3.提升开发效率
三、如何离线部署
- 1.官网下载api和sdk,需要登录，使用google账号登录即可，下载后解压，文件夹下有install.html，这是官网提供的教程，包括在IIS上面部署以及使用node.js部署。
这里我使用的是自己搭建的node服务。 - 2.下载后可以看到api和sdk文件夹，sdk文件夹就是arcgis for js 的离线网页，这里我们用不到，继续找到
api/4.6init.js，用编辑器打开，搜索baseUrl，把后面的地址替换成http://ip:端口/4.6/dojo,再找到api/4.6/dojo/dojo.js
,作相同的修改
说明，这里的ip就是搭建node服务的电脑的ip，端口是node监听的端口
- 3.安装express，
cnpm install express@3 --save@3是版本号，会自动创建node_modules文件夹 -
4.新建
public文件夹，将之前下载的api文件中的4.6文件夹拷贝到public文件夹 -
5.新建app.js文件，以下为源代码
const express = require('express')
const path = require('path')
const app = express()
// 设置跨域访问
app.all('*', function(req, res, next) {
res.header("Access-Control-Allow-Origin", "*");
res.header("Access-Control-Allow-Headers", "X-Requested-With");
res.header("Access-Control-Allow-Methods","PUT,POST,GET,DELETE,OPTIONS");
res.header("X-Powered-By",' 3.2.1')
res.header("Content-Type", "application/json;charset=utf-8");
next();
});
// 设置默认静态目录
app.use(express.static(path.join(__dirname, 'public')))
app.listen(9999, () => {
console.log(`Listening at port 9999`)
})
在包含app.js文件的文件夹中，按住Shift，再右击鼠标右键，选择在此处打开命令窗口，在命令行中输入
node app.js看到输出了”listening at port 9999″代表服务启动成功
四、如何使用离线部署
- 1.建立vue项目，下载esri-loader包
npm install esri-loader --save -
2.修改vue中的esri-loader
var DEFAULT_URL = 'https://js.arcgis.com/4.6/';
修改为:
var DEFAULT_URL = 'http://192.168.1.105:9999/4.6/dojo/dojo.js';
不过这是一种简单的解决方法，如果是多人开发，那么每个人拉取的包都是新的，难道都要去改？当然人家提供了方法。
// 在你需要使用地图服务的页面定义变量
const options = {
url: 'http://192.168.1.105:9999/4.6/dojo/dojo.js' //这是你搭建好离线部署后的文件地址
};
esriLoader.loadModules(['esri/map'], options).then(([map]) => {
// doSomeThing...
}).catch(err => {
console.error(err)
})
- 3.在app.vue的style引入css
@import url('http://192.168.1.105:9999/4.6/esri/themes/light/main.css');
这里的ip是本机ip地址，端口为node的监听端口。
需要注意的是，node搭建的时候，需要修改返回数据的方式，不然css返回的格式，浏览器不认，这个坑怪我学艺不精半天才跳出来
注释app.js文件中的这行代码
res.header("Content-Type", "application/json;charset=utf-8");
- 如果需要监测是否搭建成功，在浏览器中输入
http://你的ip:端口/4.6/init.js或者http://你的ip:端口/4.6/dojo/dojo.js如果出现js代码，那就成功了
