整体思路:将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>