vue+argis3.x 初始化

 整体思路：将arcgis API方法放入到vuex中。方便全局调用。

vue新建就不多说了。

引用arcgis,需要先安装esri-loader。

安装命令 

npm install --save esri-loader

或

yarn add esri-loader

安装完成后，开始正式步骤了：

1.文件夹引用esri-loader；

import store from '@/store'
import { loadModules } from "esri-loader";

2.引用API，提交到vuex中

 loadModules() {
        let self = this;
        let loadModulesArr = [
            "esri/map",
            "esri/geometry/Extent",
            "esri/layers/ArcGISTiledMapServiceLayer", // 瓦片图
            "esri/layers/ArcGISDynamicMapServiceLayer", // 动态地图服务
            "esri/symbols/SimpleMarkerSymbol", // 用来在graphics图层上画点和多点的
            "esri/symbols/TextSymbol", // 用来在graphics图层上写文字
            "esri/layers/GraphicsLayer", // 包含图形的图层
            "esri/Color", // 继承dojo/_base/Color中的所有属性，以提供设置颜色的函数
            "esri/graphic", // 用来创建几何图层的
            "esri/lang",
            "esri/geometry/Point", // 几何图形中的点类
            "esri/geometry/Polyline",
            "esri/SpatialReference", // 定义图层的空间参考
            "esri/layers/FeatureLayer",
            "esri/layers/ImageParameters",
            "esri/layers/LabelClass",
            "esri/symbols/Font",
            "esri/symbols/PictureMarkerSymbol",
            "esri/symbols/SimpleFillSymbol",
            "esri/symbols/SimpleLineSymbol",
            "esri/tasks/IdentifyTask",
            "esri/tasks/IdentifyParameters",
            "esri/tasks/query", // 查询
            "esri/tasks/QueryTask",
            "esri/renderers/UniqueValueRenderer",
            "esri/renderers/ClassBreaksRenderer",
            "esri/graphicsUtils",
            "esri/dijit/Popup",
            "dijit/TooltipDialog",
            "esri/renderers/SimpleRenderer",
            "esri/renderers/HeatmapRenderer",
            "esri/dijit/PopupTemplate",
            "esri/geometry/screenUtils",
            "dojox/charting/Chart",
            "dojox/charting/plot2d/Pie",
            "dojox/charting/themes/MiamiNice",
            "dojox/charting/widget/Legend",
            "dojo/ready",
            "dojo/dom-style",
            "dojo/dom-class",
            "dojo/dom-construct",
            "dojo/domReady!",
        ];
        MapInit.gisModules = loadModulesArr;
        const options = {
            // 可以使用自定义资源加载,arcgis 官网加载太慢了,经常加载失败。此处使用的本地包。
            url: MapInit.configUrl.arcgis.url,
            css: MapInit.configUrl.arcgis.css,
        };

        loadModules(loadModulesArr, options)
            .then(this.TDTinstance)
            .then(this.gisInit);
    }
    TDTinstance(args) {
        // 这里处理了一下传参，构造函数全部保存到 gisConstructor 对象中，对应的函数
        // key 值为加载模块的最后一个单词
        // 将引入的模块添加到vuex中
        for (let k in args) {
            let name = MapInit.gisModules[k].split("/").pop();
            name = name.replace(/^\S/, (s) => s.toUpperCase());
            if (name.indexOf('-') !== -1) {
                let nameSplit = name.split('-');
                let nameData = ''
                nameSplit.map(item => {
                    nameData += item.replace(item[0], item[0].toUpperCase())
                })
                name = nameData;
            }
            // this.gisConstructor[name] = args[k];
            // 提交到vuex
            let param = {
                name: name,
                Fn: args[k],
            };
            store.commit("mapModular", param);
        }
    }

3.页面使用

先引用vuex，在初始化

<template>
<div>
 <!-- 地图 -->
    <div id="viewDiv" ref="map" class="viewDiv"></div>
</div>
</template>

<script>
import { mapGetters } from "vuex";
export default {
  data() {
    return {
     
    };
  },
  computed: {
    /**
     * mapModular  提交到vuex 的arcgis API方法集合
     */
    ...mapGetters(["mapModular", ]),
  },
    created() {
    this.loadModules();
  },
  methods: {
    loadModules() {
      let self = this;
      let loadModulesArr = [
        "esri/map",
        "esri/layers/ArcGISTiledMapServiceLayer", // 瓦片图
        "esri/layers/ArcGISDynamicMapServiceLayer", // 动态地图服务
        "esri/symbols/SimpleMarkerSymbol", // 用来在graphics图层上画点和多点的
        "esri/symbols/TextSymbol", // 用来在graphics图层上写文字
        "esri/layers/GraphicsLayer", // 包含图形的图层
        "esri/Color", // 继承dojo/_base/Color中的所有属性，以提供设置颜色的函数
        "esri/graphic", // 用来创建几何图层的
        "esri/lang",
        "esri/geometry/Point", // 几何图形中的点类
        "esri/geometry/geometryEngine",
        "esri/geometry/geometryEngineAsync",
        "esri/SpatialReference", // 定义图层的空间参考
        "esri/layers/FeatureLayer",
        "esri/layers/LabelClass",
        "esri/layers/ImageParameters",
        "esri/symbols/Font",
        "esri/symbols/PictureMarkerSymbol",
        "esri/symbols/SimpleFillSymbol",
        "esri/symbols/SimpleLineSymbol",
        "esri/geometry/Polyline",
        "esri/tasks/query", // 查询
        "esri/tasks/QueryTask",
        "esri/tasks/DistanceParameters",
        "esri/renderers/UniqueValueRenderer",
        "esri/renderers/ClassBreaksRenderer",
        "esri/graphicsUtils",
        "esri/dijit/Popup",
        "dijit/TooltipDialog",
        "esri/renderers/SimpleRenderer",
        "esri/dijit/PopupTemplate",
        "esri/geometry/screenUtils",
        "dojo/dom-style",
        "dojo/dom-class",
        "dojo/dom-construct",
        "dojo/domReady!",
      ];
      this.gisModules = loadModulesArr;
      const options = {
        // 可以使用自定义资源加载,arcgis 官网加载太慢了,经常加载失败
        url: self.configUrl.arcgis.url,
        css: self.configUrl.arcgis.css,
      };

      loadModules(loadModulesArr, options)
        .then(this.TDTinstance)
        .then(this.gisInit);
    },
    TDTinstance(args) {
      let self = this;
      // 这里处理了一下传参，构造函数全部保存到 gisConstructor 对象中，对应的函数
      // key 值为加载模块的最后一个单词
      // 将引入的模块添加到vuex中
      for (let k in args) {
        let name = this.gisModules[k].split("/").pop();
        name = name.replace(/^\S/, (s) => s.toUpperCase());
        if (name.indexOf('-') !== -1) {
          let nameSplit = name.split('-');
          let nameData = ''
          nameSplit.map(item => {
            nameData += item.replace(item[0], item[0].toUpperCase())
          })
          name = nameData;
        }
        // this.gisConstructor[name] = args[k];
        // 提交到vuex
        let param = {
          name: name,
          Fn: args[k],
        };
        self.$store.commit("mapModular", param);
      }
    },
     gisInit() {
      let self = this;
      let map;
      map = new self.mapModular.Map("viewDiv", {
        center: new self.mapModular.Point(
          108.85999229,
          34.1999647,
          new self.mapModular.SpatialReference({
            wkid: 4326,
          })//空间参考
        ),
        zoom: 0,
        maxZoom: 12,
        showLabels: true,
        logo: false,
      });
      

      /**
                 *  底图 （影像底图、深色底图、浅色底图）
                 */
      // 深色地图
      self.vecLayer = new self.mapModular.ArcGISTiledMapServiceLayer(
        self.configUrl.MapServer.baseMap,
        {
          id: "generalTile",
          visible: true
        }
      );
      // 浅色底图
      self.vecVectorLayer = new self.mapModular.ArcGISTiledMapServiceLayer(
        self.configUrl.MapServer.baseVectorMap,
        {
          id: "generalVectorTile",
          visible: false
        }
      );
      // 影像底图
      self.imgLayer = new self.mapModular.ArcGISTiledMapServiceLayer(
        self.configUrl.MapServer.Imglayer.img,
        {
          id: "imageTile",
          visible: false
        }
      );
      self.imgLabel = new self.mapModular.ArcGISTiledMapServiceLayer(
        self.configUrl.MapServer.Imglayer.label,
        {
          id: "labelTile",
          visible: false
        }
      );
      map.addLayers([self.vecLayer, self.imgLayer, self.imgLabel, self.vecVectorLayer])
    

      //在地图上隐藏缩放模块
      map.on("load", function () {
        map.hideZoomSlider();
      });
      self.map = map;
      // 图层点击事件添加
      map.on("click", self.mapClick);

      let params = {
        name: "Map",
        Fn: map,
      };

      self.$store.commit("mapModular", params);

      // 地图服务加载完成
      self.$store.commit("mapLoadingComplete", true);

     
    },
   
  },
};
</script>

</style>