vue-admin-template 引入mapbox 矢量样式 sprite和font跨域配置

最新推荐文章于 2023-05-12 14:11:38 发布
最新推荐文章于 2023-05-12 14:11:38 发布
阅读量513 收藏
点赞数 1
分类专栏： vue小白炼成记 vue3 webgis
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/chpswg/article/details/108799996
版权

开发环境正常配置proxytable 没问题，但是build 后发布到正式环境总是有问题

1、矢量地图 图标sprite 跨域访问不到

正式项目cmh部署到http://[域名]:[端口]/[项目名]下，

同时存放sprite图标和font字体的spriteUrl文件夹也存放到同一个服务器下，可分别通过http://[服务器域名]:[端口]/spriteUrl/spriteSVG/sprite.png访问到sprite,http://[服务器域名]:[端口]/spriteUrl/font/ 访问到具体的字体

2、nginx 配置 跨域

  将  服务器的tomcat  修改为新的端口   3333，如原来的端口为8033，代理后的端口则为3333，

 注意，由于spriteUrl 文件夹已经在服务器的tomcat下，所以可以用http://[服务器域名]:[代理端口]/spriteUrl/**来访问具体的font和sprite即这里的http://[服务器域名]:3333/spriteUrl/**，没有必要再在nginx的配置文件nginx.conf 中增加spriteUrl的代理

最低0.47元/天 解锁文章
cici_cmh
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
详解使用vue-admin-template的优化历程
08-27
使用 Vue-Admin-Template 优化历程详解 在本篇文章中，我们将详细介绍使用 Vue-Admin-Template 的优化历程。 Vue-Admin-Template 是一个基于 Vue.js 的后台管理系统模板，旨在提供一个快速、灵活、可扩展的解决方案...
vue-admin-beautiful-template:vue-admin-beautiful-template基础版
03-21
不论您加或不加，您都可以享受到开源的代码，感谢您的支持和信任，群内部提供vue-admin-beautifu基础版本，开发工具自动配置教程和项目开发文档。 :seedling: vue3.x vue3.0-antdv分支（ant-design-vue） # 克隆...
自动气象站-监测农田等环境气象的好助手
lvcha05的博客
10-30 290
自动气象站，多用于农业，工业，公路，机场等领域。能够监测的气象参数，包含相对湿度、气压、气温、风向、风速、雨量等基本气象要素。按应用场景来分，可以分为农业气象站，校园气象站，公路气象站，机场气象站，森林气象站等。 供电方式可以为交流电，直流电或者太阳能供电。 自动气象站可以实现无人值守，远程传输气象数据。在办公室里就能了解到气象环境情况。 气象站智能化系统，能在野外恶劣环境独立运作，抗干扰能力强。 赛通科技自动气象站性能稳定，设备安装简单，维护方便，可安装在土地、硬质地面、建筑上。是监测农田等环境气象的好助
mapbox总结
zx960103的博客
12-26 5367
mapbox
mapbox地图弹窗（popup）使用vue组件，实现弹窗样式轻松自定义化
m0_46478007的博客
09-16 5235
mapbox官方提供的popup，在不要特殊的样式的时候，我们按照官方的实例去添加，setHTML的内容只能原生的html,要修改样式就要用内联样式，，最主要在操作弹窗内部dom元素方便存在很大的不便性，现在我们将弹窗的内容写到vue组件里，然后挂载到popup,这样不仅能轻松定义样式，而且使用Vue指令
Mapbox自定义字体
大洪的专栏
05-12 1222
mapbox加载自定义字体
mapbox样式规范(style)
Mozifei73的博客
01-16 8583
mapbox样式规范(style)
学习vue-admin-template，优化了大量融入代码，添加中文注释
05-16
vue-admin-template可能使用了Element UI，学习其组件的使用方法和自定义样式。 7. **中文注释**：在源代码中添加中文注释，有助于理解和维护项目。这对于团队协作尤其重要，可以提升代码的可读性和易维护性。 8. ...
vue-admin-template配置快捷导航的代码（标签导航栏）
10-14
主要介绍了vue-admin-template配置快捷导航的方法（标签导航栏），本文通过实例代码给大家介绍的非常详细，对大家学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
vue-admin-template-master.zip
12-05
总的来说，"vue-admin-template-master"是一个基于Vue.js和Element UI的后台管理模板，利用Vue CLI 3的强大功能，为开发者提供了一个良好的起点，帮助他们快速构建高效、美观的管理界面。通过理解和掌握这个模板的...
地图使用过程中的各种跨域问题解决方案
chaoyang89111的博客
09-13 6616
当你需要加载地图，或者需要使用地图的某些功能时，是不是会出现如下的报错信息？ 1、跨域 Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https. 2、画布污染 Uncaught DOMException: Failed to ex...
Mapbox Sprite精灵图生成
DX奥特曼的博客
10-21 4161
sprite 文件主要是将一堆小图生成一种大图的方法，并且将每张小图的位置信息保存下来，方便读取。在网络请求中会减少请求的数量，mapbox借鉴前端中CSS Sprite方法存储图标信息的。sprite.png文件保存图标，sprite.json保存名称及位置信息，下图图展示的是小图标与大图文件的示例。下面我讲一下两种文件转换。 ...
九步完成 vue-admin-template 动态渲染路由
少年的范儿的博客
07-06 2196
这里使用的是 vue-admin-template 这个模板。可以从官网下载 vue-admin-template（基础模板）和 vue-template-admin（集成方案） 这两个模板，对照这修改。链接 1. 稍微整理一下页面 修改后台的路由文件 src/router/index.js export const constantRoutes = [ { path: '/login', component: () => import('@/views/login/index'
vue-admin-template登录以及权限使用
ruofanwei的博客
05-22 8095
vue-admin-template是vue-element-admin的一个基础方案，很适合入门使用。 vue-element-admin官网 首先下载下来之后， npm install 在项目主目录运行该命令完成项目依赖的下载 npn run dev 运行这个命令即可完成项目的运行。 下面介绍关于登录部分 自定义登录接口 该项目是通过login进行登录且每一次请求通过info请求进行验证用户身份，以及logout退出登录。 找到登录页面代码（src/views/login/index.vue） h
Mapbox使用之glyphs（字体符号）
chuhanning9279的博客
08-18 2469
Mapbox样式文件里使用glyphs来指定使用的字体文件，不能直接使用ttf格式字体文件，需转换为符合Mapbox要求的pbf格式的文件，有两种开源工具可以实现。 一、node-fontnik build后可直接使用bin目录下的build-glyphs来生成。 二、genfontgl（依赖...
mapbox显示多种文本格式并设置其样式
weixin_44766633的博客
11-19 3283
这里需要用到几个方法。 setLayoutProperty 设置指定样式图层中布局属性的值。 Parameters layerId(string)需要在其中设置布局（layout）属性的图层 ID。 name(string)需要设置的布局属性名称。 value(any)布局属性的值。必须是一种符合 Mapbox Style Specification 规定的属性类型。 options(Object?)(default {}) eg: map.setLayoutProperty('my-layer', 'vi
创建 mapbox 本地 sprite
南山老沙
06-05 3225
部署 mapbox 本地服务器，sprite也需要本地化，项目里面也需要定制化，下面简单介绍如何创建本地sprite 在样式文件里面，会有这么一句： { ... "version":8, "sprite": "mapbox://sprites/mapbox/streets-v11" ... } 再看以下自定义定义的一个图层 export const iconLayer = fro...
Mapbox使用之sprite（图标符号）
chuhanning9279的博客
08-18 2019
Mapbox样式文件里使用sprite来指定使用的图标资源url，会根据此url生成两条http请求，一为.json，一为.png，如 "sprite": "http://localhost/testsprite/aaa" 最终Mapbox引擎会提交两条http请求 ###http://loc...
mapbox style 翻译
kasteluo的专栏
05-25 2872
source 属性解释 Sources（数据源） 说明 1. source提供的数据将显示在地图上。源的类型由"type"属性指定，并且必须是vector，raster，raster-dem，geojson，image，video之一。添加源不会立即使数据显示在地图上，因为源不包含颜色或宽度等样式细节。图层引用源并为其提供可视化表示。这使得可以以不同的方式对相同的源进行样式化，例如区分高速公路层中...
vue-admin-template配置跨域
最新发布
07-29
在vue-admin-template中配置跨域可以通过修改项目中的配置文件来实现。具体步骤如下： 1. 打开项目根目录下的`config`文件夹，找到`index.js`文件。 2. 在`dev`对象中的`proxyTable`属性中添加一个新的代理配置，例如： ``` proxyTable: { '/admin': { target: 'http://www.newpay.com/', changeOrigin: true, pathRewrite: { '^/admin': '' } } } ``` 这里的`/admin`是接口的公共部分，`http://www.newpay.com/`是接口的域名和端口号。你可以根据实际情况进行修改。 3. 保存文件并重新启动项目。 这样配置之后，当你在项目中调用接口时，会自动将以`/admin`开头的请求转发到`http://www.newpay.com/`。这样就实现了跨域请求。 #### 引用[.reference_title] - *1* [使用vue-admin-template 中跨域问题解决](https://blog.csdn.net/weixin_30634661/article/details/95435060)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^insertT0,239^v3^insert_chatgpt"}} ] [.reference_item] - *2* *3* [vue-admin-template 解决跨域问题](https://blog.csdn.net/weixin_43980468/article/details/123714861)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^insertT0,239^v3^insert_chatgpt"}} ] [.reference_item] [ .reference_list ]

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值