通过地图的config模块的请求拦截器来设置请求头信息,如下示例:
1、引入:‘esri/config’
1、设置请求头信息
import { loadArcgisModules } from '@/utils/map/mapLoadUtil'
export default {
mounted() {
this.loadMap()
},
methods: {
/** ****************** map 地图 *******************/
loadMap() {
// 加载arcgis api的模块到Vue.prototype.$esri
loadArcgisModules([
'esri/Map',
'esri/core/watchUtils',
'esri/config',
'esri/widgets/ScaleBar',
'esri/layers/support/LabelClass',
'esri/widgets/Home',
'esri/widgets/BasemapToggle',
'esri/widgets/Sketch',
'esri/widgets/Sketch/SketchViewModel',
'esri/widgets/Editor',
'esri/request',
'esri/views/MapView',
'esri/layers/SceneLayer',
'esri/layers/WMSLayer',
'esri/layers/TileLayer',
'esri/layers/WebTileLayer',
'esri/layers/GraphicsLayer',
'esri/layers/FeatureLayer',
'esri/layers/BaseTileLayer',
'esri/layers/MapImageLayer',
'esri/layers/BaseTileLayer',
'esri/Basemap',
'esri/Graphic',
'esri/geometry/Point',
'esri/tasks/QueryTask',
'esri/tasks/support/Query',
'esri/geometry/Polygon',
'esri/geometry/Multipoint',
'esri/symbols/LineSymbolMarker',
'esri/geometry/geometryEngine',
'esri/smartMapping/labels/clusters',
'esri/widgets/DistanceMeasurement2D', // 工具 测距
'esri/widgets/AreaMeasurement2D', // 工具 测面
'esri/widgets/Swipe' // 工具 滑动 卷帘
]).then(() => {
this.setYztRequestHeader()
})
},
setYztRequestHeader() {
const timestampHeader = (Date.now() / 1000).toFixed()
const passid = 'B90-A44002202'
const token = '16788bfc3d0f4ea182832630a7d73c39'
const serverCode = 'YZT3837894173071'
this.$esri.config.request.interceptors.push({
before: params => {
// 请求之前的处理逻辑
// 设置请求头信息
// 只要地图服务的地址包含字符串内容'http/api/proxy/invoke',都会带上请求头
if (params.url.includes('http/api/proxy/invoke')) {
params.requestOptions.headers = {
'x-tif-timestamp': timestampHeader,
'x-tif-paasid': passid,
'x-tif-nonce': 'nonce',
'x-tif-token': token,
'x-tif-serviceId': serverCode
}
}
}
// after: function(params) {
// console.log(params)
// // 请求之后的处理逻辑
// // params.requestOptions.headers = {}
// }
})
},
}
}
mapLoadUtil.js:
import Vue from 'vue'
import { loadModules, setDefaultOptions } from 'esri-loader'
import { Message } from 'element-ui'
// 设置arcgis api的options
function setArcgisOptions() {
// 远程引入
// setDefaultOptions({ version: '4.19', css: true })
// 引入服务器上(本地)的资源
setDefaultOptions({
url: `${process.env.VUE_APP_BASE_ARCGIS_API}/arcgis/4.19/init.js`,
css: `${process.env.VUE_APP_BASE_ARCGIS_API}/arcgis/4.19/esri/css/main.css`
})
}
// 加载arcgis api的模块到Vue.prototype.$esri
export function loadArcgisModules(arcgisModulePath) {
return new Promise((resolve, reject) => {
// 设置options
setArcgisOptions()
// 加载arcgis api的模块
loadModules(arcgisModulePath).then(args => {
let arcgisModuleName = '' // 模块的默认名称
for (let i = 0;i < args.length;i++) {
arcgisModuleName = arcgisModulePath[i].split('/').pop()
Vue.prototype.$esri[arcgisModuleName] = args[i]
}
resolve(args)
}).catch(err => {
Message.error('arcgis地图api加载失败,请检查网络设置')
reject(err)
})
})
}
参考文章1:https://www.cnblogs.com/kk8085/p/17226776.html
参考文章2:https://blog.csdn.net/contant/article/details/132540807