vue+arcgis4.2x初始化

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中

import store from '@/store'
import { loadModules } from "esri-loader";
import * as configUrl from '@/assets/js/config'

class MapInit {
    static gisModules;
    constructor(options) {
        this.options = options ? options : {};
        this.map = store.getters.mapModular.Map;
        this.mapModular = store.getters.mapModular;
        this.gisModules = "";
    }
    loadModules(initFn) {
        let self = this;
        let loadModulesArr = [
            "esri/Map",
            "esri/Basemap",
            "esri/layers/SceneLayer",
            "esri/Ground",
            "esri/views/MapView",
            "esri/views/SceneView",
            "esri/layers/ImageryLayer",
            "esri/layers/ImageryTileLayer",
            "esri/layers/ElevationLayer",
            "esri/layers/TileLayer", // 瓦片图
            "esri/layers/VectorTileLayer",

            "esri/layers/MapImageLayer", // 动态地图服务
            "esri/symbols/SimpleMarkerSymbol", // 用来在graphics图层上画点和多点的
            "esri/symbols/TextSymbol", // 用来在graphics图层上写文字
            "esri/symbols/ObjectSymbol3DLayer",
            "esri/symbols/PolygonSymbol3D",
            "esri/symbols/PointSymbol3D",
            "esri/layers/GraphicsLayer", // 包含图形的图层
            "esri/Color", // 继承dojo/_base/Color中的所有属性，以提供设置颜色的函数
            "esri/Graphic", // 用来创建几何图层的
            // "esri/lang",
            "esri/geometry/Point", // 几何图形中的点类
            "esri/geometry/geometryEngine",
            "esri/geometry/geometryEngineAsync",
            "esri/geometry/SpatialReference", // 定义图层的空间参考
            "esri/layers/FeatureLayer",
            "esri/layers/support/LabelClass",
            "esri/layers/support/ImageParameters",
            "esri/symbols/Font",
            "esri/symbols/PictureMarkerSymbol",
            "esri/symbols/SimpleFillSymbol",
            "esri/symbols/SimpleLineSymbol",
            "esri/geometry/Polyline",
            "esri/rest/support/Query", // 查询
            "esri/tasks/QueryTask",
            "esri/renderers/UniqueValueRenderer",
            "esri/renderers/ClassBreaksRenderer",
            "esri/renderers/SimpleRenderer",
        ];
        MapInit.gisModules = loadModulesArr;
        const options = {
            // 可以使用自定义资源加载,arcgis 官网加载太慢了,经常加载失败.后面会讲到自己本地如何配置资源
            url: configUrl.arcgis.url,
            // css: configUrl.arcgis.css,

            // url: "https://js.arcgis.com/4.20/",
            // css: "https://js.arcgis.com/4.20/esri/themes/light/main.css",

        };
        loadModules(loadModulesArr, options)
            .then(this.TDInstance)
            .then(initFn);
    }

    TDInstance(args) {
        let self = this;
        // 这里处理了一下传参，构造函数全部保存到 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);
        }
    }


}
const mapInit = (options) => new MapInit(options);
export default mapInit```

​