这里写自定义目录标题
**整体思路:**将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中
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```