基於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:如有不足及錯誤的地方，希望指正。謝謝