基于esriLoader的arcgis api 与vue.js结合

    目前，leaflet、openlayers等地图类框架都能够和主流的前端框架进行结合。而作为GIS届的领头企业。原本的引入方式（引入标签+require）是不太适合当前的主流前端开发模式的，又特别是在以某一框架为主如vue.js进行组件式开发的情况下，不论是相应代码和其他页面代码的结合性还是复用都比较麻烦。好在esri推出的esriLoader很好的解决了这一问题。PS：esriLoader对3.x和4.x版本都可用 本文以4.X版本为例

    安装

目前esri通过命令

npm install --save esri-loader

可以直接安装。

 使用

在需要的页面\组件\脚本内进行引用

import * as esriLoader from "esri-loader";

以及CSS的引入（这里我是把资源包下在本地的 所以是本地直接引用。因为下载下来的是已经编译的版本了。所以直接放在了static下。如果放在代码资源文件内，如src下的话 ，需要注意引用路径且调试的时候编译时间可能比较长）

@import url("/static/arcgis_js_v49_api/arcgis_js_api/library/4.9/esri/css/main.css");

在vue中 可以先检查模块是否正确加载

mounted() {
    if (!esriLoader.isLoaded()) {
      esriLoader.bootstrap(
        err => {
          if (err) {
            console.error(err);
          } else {
            this.importEsri();
          }
        },
        {
          url: "/static/arcgis_js_v49_api/arcgis_js_api/library/4.9/init.js"
        }
      );
    } else {
      this.importEsri();
    }
  }

在具体的初始化方法内进行相应模块的引入。（本人这里是把模块导入单独写了一个方法，方便后面修改和管理）

importEsri() {
      esriLoader.dojoRequire(
        [
          "dojo/_base/connect",
          "esri/views/MapView",
          "esri/Map",
          "esri/layers/VectorTileLayer",
          "esri/layers/Layer",
          "esri/widgets/Expand",
          "esri/layers/GraphicsLayer",
          "esri/Graphic",
          "esri/views/2d/draw/Draw",
          "esri/layers/BaseTileLayer",
          "esri/geometry/SpatialReference",
          "esri/geometry/Polygon",
          "esri/geometry/Polyline",
          "esri/geometry/Point",
          "esri/geometry/ScreenPoint",
          "esri/symbols/TextSymbol",
          "esri/geometry/geometryEngine",
          "esri/renderers/ClassBreaksRenderer"
        ],
        (
          DojoConnect,
          MapView,
          Map,
          VectorTileLayer,
          Layer,
          Expand,
          GraphicsLayer,
          Graphic,
          Draw,
          BaseTileLayer,
          SpatialReference,
          Polygon,
          Polyline,
          Point,
          ScreenPoint,
          TextSymbol,
          GeometryEngine,
          ClassBreaksRenderer
        ) => {
          this.esri = {
            DojoConnect: DojoConnect,
            MapView: MapView,
            Map: Map,
            VectorTileLayer: VectorTileLayer,
            Layer: Layer,
            Expand: Expand,
            GraphicsLayer: GraphicsLayer,
            Graphic: Graphic,
            Draw:Draw,
            BaseTileLayer: BaseTileLayer,
            SpatialReference: SpatialReference,
            Polygon: Polygon,
            Polyline: Polyline,
            Point: Point,
            ScreenPoint: ScreenPoint,
            TextSymbol: TextSymbol,
            GeometryEngine:GeometryEngine,
            ClassBreaksRenderer: ClassBreaksRenderer
          };
          this.setEsri(this.esri)
          this.createMap();
        }
      );
    },

这里需要对代码做一些解释：

1.模块的需要按需引入

2.由于是初始化，我这里的this.esri是为了本组件内可以使用。

3.this.setEsri()方法 是想将esri引入的模块保存在vuex的stroe中。这样其他组件如果需要，就可以直接获取。不需要再导入

4.代码的最后，进行页面的正常操作。this.ceateMap()内进行构建地图及页面的后续处理

  探讨

 基本的使用如上，而在实际使用中 页面的业务逻辑是模块分离的。如图层控制板块、绘制板块单个功能板块之间相互影响较小。但是最终都作用于map（4.x以上还有view）对象。同时，基于组件开发的思路，采用全局状态管理来存储map(及view)的状态是比较符合这种开发模式的。在vue项目下，采用Vuex进行全局状态的管理。同时一些基本的操作方法也会放在这里（如图层筛选、图层控制、地图缩放、定位点等）方便其他各个组件进行直接调用。避免了子组件层层传递事件给父组件的麻烦。

   总结：一般而言，如果不是有特别要求，leaflet或openlayers一般能够满足需求，相对而言，只有特别要求与系列软件耦合性或者特别功能（如3D地图）等功能的，才会比较选用arcgis js。轻量级的项目，前两者能够比较好的耦合。

PS:如有不足及错误的地方，希望指正。谢谢