vue+arcgis api开发，加载地图的一个实例

1. 首先和传统的开发一样，需要引入js文件和css文件，但是因为是用vue来开发，所以传统的通过标签的方式来引入的方法不适用了，arcgis官网给我们提供了一个工具"esriLoader"，这是他的npm地址esri-loader。（命令：npm install --save esri-loader）

2. 在项目中新建一个arcgis的配置文件，名称叫mapConfig.js（这个名字可以自定义）

内容：

/*
arcgis初始化配置
*/

window._base_path = "http://localhost:8860";
window._base_kuangjia = "http://localhost:8860";
window._arcgis_js_apiUrl = "http://localhost:8860/arcgis_js_api/library/4.12/";
window._base_landServer = "";

export function arcgisConfig () {
  window.arcgis = {
    config: {
      proxyUrl: 'http://localhost:8860/arcgis_js_api/library/4.12/init.js',
      baseUrl: window._arcgis_js_apiUrl + 'init.js',
      dojoUrl: 'http://localhost:8860/arcgis_js_api/library/4.12/dojo',
      // offlineMapWkid: 26911,
      getBaseUrl: function () {
        return this.baseUrl
      },
      getDojoUrl: function () {
        return this.dojoUrl
      },
      getWkid: function () {
        // return this.offlineMapWkid
      }
    }
  }
}

根据自己的api实际部署地址做相应修改

 

3. 然后新建一个地图的组件mapTwo.vue，代码如下：

4. 然后在路由配置的index.js中添加刚刚新建的地图组件mapTwo.vue

此时在通过命令npm run dev运行项目，在浏览器中访问http://localhost:8091/#/mapTwo，将会打开地图

注意1：仅仅适用上面的代码在ie下运行会报不支持promise

解决办法有很多，这里我就说我自己的处理方法：

1. 需要另外引入https://cdn.polyfill.io/v2/polyfill.min.js，内容如下：

/* 处理ie不支持promise */

(function(undefined) {}).call('object' === typeof window && window || 'object' === typeof self && self || 'object' === typeof global && global || {});

然后在mapTwo.vue中引入

也可以使用第三方插件bluebird.js，处理（github地址：https://github.com/petkaantonov/bluebird）。

2. 可以借助babel将代码从es6编译成es5

具体实现步骤，请看我的另一篇文章：https://blog.csdn.net/D_bel/article/details/99290492

注意2：在使用esri-load在chrome浏览器下会正常运行，在ie11浏览器下可能会报一下很奇怪的错误

错误的明细和解决办法，请看我另一篇文章：https://blog.csdn.net/D_bel/article/details/100167807