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. 效果

相关推荐
大前端之旅2 分钟前
从协作到赋能:GitCode 助力OpenHarmony 三方库生态
javascript
lcl1014 分钟前
🖼 Node.js 获取图片尺寸并判断横屏或竖屏的三种方式对比
前端·javascript
前端老鹰4 分钟前
JavaScript Array.prototype.flatMap ():数组 “扁平化 + 映射” 的高效组合拳
前端·javascript
summer7776 分钟前
开箱即用的openlayer地图效果
前端·javascript·vue.js
Jagger_6 分钟前
Hooks拆分最佳实践指南
前端·javascript·面试
三小河7 分钟前
详解React.memo的更新机制
前端·javascript·vue.js
言兴30 分钟前
深度解析:单例模式封装 MyTextToSpeechPipeline与 Promise.all 在 NLP 流程中的协同应用
前端·javascript·面试
言兴34 分钟前
深入理解 Promise.all:并发执行异步任务的利器
前端·javascript·面试
讨厌吃蛋黄酥35 分钟前
爆款文章二:CSS动画坐标系大揭秘!90%前端都理解错的方向陷阱!
前端·javascript·css
心无旁骛~35 分钟前
Poetry与UV——现代Python依赖管理的革新者
开发语言·python·uv