mapbox js本地化部署

移除mapbox-gl.js的token检测,使用本地sprite和glyphs,并支持相对路径而不是网络地址url

版本 vue3(v3.5.13) vite(v6.0.1)mapbox-gl.js(v3.9.3)

参考 https://github.com/HuHongYong/Mapbox-js-offline

  1. 在官网找到在线的js和css

    把这俩文件下下来,放到前端工程路径下

    我是放到public下了,看习惯,也可以建个lib文件夹

  2. 把字体文件和图标放到前端工程路径下

  3. 修改js

    搜索normalizeSpriteURL(t

    将该函数内容替换为

    return t + ".json";

    搜索this._requestManager._customAccessToken,(t=>

    将t&&(t.message=w||401=t.status)替换为(t && false)

  4. 引入js,css

  5. 示例。字体和图标参考https://github.com/HuHongYong/Mapbox-js-offline这里面的

  6. 效果

相关推荐
秋田君18 分钟前
构建安全的Vue前后端分离架构:利用长Token与短Token实现单点登录(SSO)策略
前端·javascript·vue.js·elementui·前端框架·mock·sso单点登录客户端
KeithTsui25 分钟前
C语言之 比特(bit)、字节(Byte)、字(Word)、整数(Int)
linux·c语言·开发语言·c++·算法·word
fashia28 分钟前
Java转Go日记(四十四):Sql构建
开发语言·后端·golang·go
GISer_Jing28 分钟前
Canvas &SVG &BpmnJS编辑器中Canvas与SVG职能详解
前端·javascript·编辑器
2402_8813193029 分钟前
web开发全过程总结
前端·javascript·vue.js
2301_8161696131 分钟前
vue路由小案例
前端·javascript·vue.js
colourmind33 分钟前
vue3前端后端地址可配置方案
前端·javascript·vue.js
Tiffany_Ho1 小时前
你引入的lodash充分利用了吗?
前端·javascript·vue.js
sunbyte1 小时前
50天50个小项目 (Vue3 + Tailwindcss V4) ✨ | Rotating Navigation (旋转导航)
前端·javascript·css·vue.js·tailwindcss
lsnm1 小时前
【LINUX操作系统】生产者消费者模型(下):封装、信号量与环形队列
linux·运维·服务器·开发语言·c++·ubuntu·centos