ArcGis for JavaScript之 离线部署

本例以及后面的例子都是使用的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代码，那就成功了