通过地图的config模块的请求拦截器来设置请求头信息,如下示例:
1、引入:‘esri/config’
在这里插入图片描述
1、设置请求头信息

import { loadArcgisModules } from '@/utils/map/mapLoadUtil'
export default {
mounted() {this.loadMap()},
methods: {/** ****************** map 地图 *******************/loadMap() {// 加载arcgis api的模块到Vue.prototype.$esriloadArcgisModules(['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) => {// 设置optionssetArcgisOptions()// 加载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

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。
如若转载,请注明出处:http://www.pswp.cn/news/914054.shtml
繁体地址,请注明出处:http://hk.pswp.cn/news/914054.shtml
英文地址,请注明出处:http://en.pswp.cn/news/914054.shtml

如若内容造成侵权/违法违规/事实不符,请联系英文站点网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

工业通信升级新选择:耐达讯CCLINKIE转Modbus TCP网关

在工业自动化系统中&#xff0c;协议转换网关的选择直接影响系统稳定性与通信效率。对于CCLINKIE转Modbus TCP场景&#xff0c;耐达讯通信技术网关凭借以下特性&#xff0c;成为多个项目中的优选方案。技术选型要点协议兼容性支持CCLINKIE的令牌环机制与Modbus TCP的TCP/IP协议…

使用python的 FastApi框架开发图书管理系统-前后端分离项目分享

今天给大家分享一个 我最近使用python 框架 fastapi 写的一个web项目 &#xff0c;叫图书管理系统。项目主要是来巩固 python的编程技术。使用的是前端后 分离开发。 主要实现的功能&#xff1a; 1、用户管理&#xff1a;可以新增、编辑、删除用户信息。 2、图书管理&#xff1…

上位机知识篇---Docker

Docker 详细介绍 一、Docker 是什么 Docker 是一个开源的容器化平台&#xff0c;它允许开发者将应用程序及其依赖项打包到一个标准化的单元&#xff08;称为容器&#xff09;中&#xff0c;确保应用在任何环境中都能以相同的方式运行。 简单来说&#xff0c;Docker 解决了 &…

蓝桥杯第十六届(2025)真题深度解析:思路复盘与代码实战

> 省一选手的血泪经验:**避免这些坑,你也能冲进国赛!** 2025年蓝桥杯省赛已落下帷幕,作为近年来**难度最高的一届竞赛**,不少选手在考场上遭遇了“滑铁卢”。本文将以C++ B组真题为例,逐题解析解题思路,并提供**优化后的AC代码与详细注释**。笔者最终排名省一前40%,…

使用gdal读取shp及filegdb文件

一、使用qgis开源工具构建两个文件&#xff0c;分别是filegdb和shp&#xff0c;每个文件包含一个图层&#xff0c;图层内容只包含一个字段&#xff1a;id&#xff0c;有两个数据行&#xff0c;图层几何为多边形&#xff0c;图层都是如下的效果。二、使用rust读取上述文件 rust依…

从0开始学习R语言--Day44--LR检验

之前我们提到用LM检验的方式&#xff0c;来判断数据在空间上是否受到邻近数据及其残差的影响&#xff0c;但是LM检验是采用直接计算的方式&#xff0c;只关注了数据的残差平方和&#xff0c;没有数据关于依赖项的考虑&#xff0c;容易被结果误导。而LR检验虽然在结果上有时候跟…

openEuler 24.03 (LTS-SP1) 下私有镜像仓库部署与自签 SSL 全流程目标

目录 openEuler 24.03 (LTS-SP1) 下私有镜像仓库部署与自签 SSL 全流程 1 创建根 CA 与服务器证书&#xff08;修正版&#xff1a;SAN 写法兼容所有 OpenSSL&#xff09; 2 配置 Docker Compose 文件 3 客户端节点信任 CA 3.1 Docker 3.2 containerd 4 推送 / 拉取测试 …

mysql的LIMIT 用法

常见用法1. 限制返回行数-- 返回前5条记录 SELECT * FROM products LIMIT 5;2. 分页查询&#xff08;带偏移量&#xff09;-- 跳过前10条&#xff0c;返回接下来的5条记录&#xff08;第11-15条&#xff09; SELECT * FROM products LIMIT 10, 5;-- MySQL 8.0 也支持这种语法 S…

maven 发布到中央仓库之持续集成-03

maven 系列 maven-01-发布到中央仓库概览 maven-02-发布到中央仓库常用脚本 maven-03-发布到中央仓库之持续集成 maven-04-发布到中央仓库之 Ignore Licence maven-05-maven 配置进阶学习 maven-06-maven 中央仓库 OSSRH 停止服务&#xff0c;Central Publishing Portal …

(补充)RS422

RS4221. 基本定义与定位 官方名称&#xff1a; EIA/TIA-422&#xff08;电子工业协会/电信工业协会标准422&#xff09;。类型&#xff1a; 一种定义了电气特性的 平衡式差分 串行通信标准。目的&#xff1a; 克服 RS-232 在传输距离、速率和抗干扰能力上的严重局限性。核心思想…

自建ELK vs 云商日志服务:成本对比分析

在当今数据驱动的时代&#xff0c;日志管理已成为企业IT基础设施中不可或缺的一部分。面对日益增长的日志数据&#xff0c;许多团队都在纠结&#xff1a;是自建ELK&#xff08;Elasticsearch、Logstash、Kibana&#xff09;堆栈&#xff0c;还是直接使用云服务商提供的日志服务…

Eigen 几何模块深拆:Isometry3d vs Affine3d + 变换矩阵本质详解

文章目录0 写在前面1 数学背景对比2 Eigen 实现差异3 Isometry3d 是不是 4 4 矩阵&#xff1f;4 核心 API 速查5 实战示例5.1 SLAM 位姿链&#xff1a;相机点 → 世界点5.2 体素滤波&#xff1a;各向异性缩放&#xff08;X/Y → 5 cm&#xff0c;Z → 10 cm&#xff09;5.3 把…

python的病例管理系统

前端开发框架:vue.js 数据库 mysql 版本不限 后端语言框架支持&#xff1a; 1 java(SSM/springboot)-idea/eclipse 2.NodejsVue.js -vscode 3.python(flask/django)–pycharm/vscode 4.php(thinkphp/laravel)-hbuilderx 数据库工具&#xff1a;Navicat/SQLyog等都可以 随着医疗…

博客系统开发全流程解析(前端+后端+数据库)与 AI 协作初体验

一、前言&#xff1a;为什么选择博客系统作为全栈入门&#xff1f; 对于初入编程世界的开发者来说&#xff0c;“全栈” 似乎是一个庞大而遥远的概念。前端、后端、数据库、部署运维… 知识体系繁杂&#xff0c;令人望而生畏。选择一个目标明确、功能完整且贴近实际应用的项目…

Xavier公式的原理

数学原理&#xff1a; (1) 前向传播的方差一致性 假设输入 x 的均值为 0&#xff0c;方差为 σx2σ_x^2σx2​&#xff0c;权重 W的均值为 0&#xff0c;方差为 σW2σ_W^2σW2​&#xff0c;则输出 zWxzWxzWx的方差为&#xff1a; Var(z)nin⋅Var(W)⋅Var(x) Var(z)n_{in}⋅Va…

pytorch学习笔记(二)-- pytorch模型开发步骤详解

简介&#xff1a; 本章主要是针对Pytorch神经网络的开发步骤做一个详细的总结&#xff0c;对每一步的前世今生做一个了解&#xff0c;下面先列一下开发需要的步骤有哪些&#xff1a; 模型构建&#xff0c;主要是前向传递函数的确认确认损失函数以及学习步频&#xff08;learni…

consul 的安装与服务发现

1. helm 安装 consul 到 k8s 安装放在这里了&#xff1a;https://github.com/lianan2/installation/tree/master/consul-helm consul 的常用命令&#xff1a; # 查看集群状态 kubectl -n consul exec -it consul-server-0 -- consul operator raft list-peers kubectl -n con…

ros topic和service的使用

在做ldiar slam的时候&#xff0c;最常用的当属topic&#xff0c;偶尔也会用一下service&#xff0c;action则很少使用。现在一块来看一下topic的使用。一、topic的使用topic的消息订阅和发布#include<ros/ros.h> #include<rosbag/bag.h> #include<rosbag/view.…

【TCP/IP】18. 因特网服务质量

18. 因特网服务质量18. 因特网服务质量18.1 服务质量&#xff08;QoS&#xff09;18.2 实时传输协议&#xff08;RTP&#xff09;18.3 实时传输控制协议&#xff08;RTCP&#xff09;18.4 集成业务&#xff08;IntServ&#xff09;18.5 区分业务&#xff08;DiffServ&#xff0…

数据集相关类代码回顾理解 | StratifiedShuffleSplit\transforms.ToTensor\Counter

【PyTorch】图像多分类项目 目录 StratifiedShuffleSplit transforms.ToTensor Counter StratifiedShuffleSplit sss StratifiedShuffleSplit(n_splits1, test_size0.2, random_state0) 创建StratifiedShuffleSplit对象&#xff0c;用于将数据集划分为训练集和测试集。 …