arcgis api for js 设置地图服务请求带有请求头信息

通过地图的config模块的请求拦截器来设置请求头信息，如下示例：

1、引入：'esri/config'

1、设置请求头信息

javascript 复制代码

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：

javascript 复制代码

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