本例以及后面的例子都是使用的arcgis for js 4.6版本進行示例匀归，因版本差異過大晚顷，特此說明
更新時間 | 更新內(nèi)容
- | :-: | -:
2018/05/15| 1.修改遺漏的地方。2.添加init.js和dojo.js的baseUrl的修改
一凿可、什么是離線部署
因為api等，需要用到的資源都在國外，受網(wǎng)絡(luò)等影響署海，從而會影響到用戶體驗，所以講這些api下載到本地医男，并且部署在自己的服務(wù)器上面砸狞，加快訪問速度。
二镀梭、為什么需要離線部署
- 1.因為官網(wǎng)提供的api都在國外刀森，訪問速度時好時壞，影響用戶體驗报账。
- 2.網(wǎng)絡(luò)的不定性可能會導致無法訪問的情況研底。
- 3.提升開發(fā)效率
三、如何離線部署
1.官網(wǎng)下載api和sdk,需要登錄透罢，使用google賬號登錄即可榜晦，下載后解壓，文件夾下有install.html羽圃，這是官網(wǎng)提供的教程乾胶，包括在IIS上面部署以及使用node.js部署。
這里我使用的是自己搭建的node服務(wù)朽寞。2.下載后可以看到api和sdk文件夾胚吁，sdk文件夾就是arcgis for js 的離線網(wǎng)頁，這里我們用不到愁憔，繼續(xù)找到
api/4.6init.js腕扶，用編輯器打開，搜索baseUrl吨掌，把后面的地址替換成http://ip:端口/4.6/dojo,再找到api/4.6/dojo/dojo.js
,作相同的修改
說明半抱，這里的ip就是搭建node服務(wù)的電腦的ip，端口是node監(jiān)聽的端口
3.安裝express膜宋，
cnpm install express@3 --save@3是版本號窿侈，會自動創(chuàng)建node_modules文件夾4.新建
public文件夾，將之前下載的api文件中的4.6文件夾拷貝到public文件夾5.新建app.js文件秋茫，以下為源代碼
const express = require('express')
const path = require('path')
const app = express()
// 設(shè)置跨域訪問
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();
});
// 設(shè)置默認靜態(tài)目錄
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"代表服務(wù)啟動成功
四跺讯、如何使用離線部署
1.建立vue項目，下載esri-loader包
npm install esri-loader --save2.修改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';
不過這是一種簡單的解決方法殉农，如果是多人開發(fā)刀脏，那么每個人拉取的包都是新的，難道都要去改超凳？當然人家提供了方法愈污。
// 在你需要使用地圖服務(wù)的頁面定義變量
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的監(jiān)聽端口轮傍。
需要注意的是暂雹，node搭建的時候，需要修改返回數(shù)據(jù)的方式创夜，不然css返回的格式擎析，瀏覽器不認，這個坑怪我學藝不精半天才跳出來
注釋app.js文件中的這行代碼
res.header("Content-Type", "application/json;charset=utf-8");
- 如果需要監(jiān)測是否搭建成功挥下，在瀏覽器中輸入
http://你的ip:端口/4.6/init.js或者http://你的ip:端口/4.6/dojo/dojo.js如果出現(xiàn)js代碼揍魂，那就成功了
