Mapbox GL源码本地环境配置

1.git拉取mapbox-gl-js源码

地址:https://github.com/mapbox/mapbox-gl-jsicon-default.png?t=M85Bhttps://github.com/mapbox/mapbox-gl-js

2.注意:node版本需要高一点,否则在执行yarn install会不成功

我使用的node版本为: 16.15.1

如果自己有别的项目需要用低版本的node,可以下载nvm管理node版本,需要哪个版本切换就好,很方便。

开始执行 

yarn install

 有时候安装不成功,多试几次就好了,记得修改yarn镜像地址。

3.创建压缩版的mapbox-gl.js

yarn run build-prod-min

 4.构建mapbox-gl.css文件

yarn run build-css

5.构建access-token-generated.js

npm run build-token

 

6.直接在浏览器打开debug文件夹下的页面,即可

 

7.结束!!! 

  • 1
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
要在 Mapbox GL 中配置本地字体,你需要使用 node-fontnik 库来生成字体文件。下面是一些步骤来完成这个过程: 1. 安装 node-fontnik:在命令行中运行以下命令来安装 node-fontnik: ``` npm install fontnik ``` 2. 生成字体文件:创建一个 JavaScript 文件,使用以下代码来生成字体文件: ```javascript const fontnik = require('fontnik'); const fs = require('fs'); const fontPath = 'path/to/your/font.ttf'; // 替换为你的字体文件路径 const outputPath = 'path/to/output/font.pbf'; // 替换为你想要保存字体文件的路径 fs.readFile(fontPath, (err, data) => { if (err) throw err; fontnik.load(data, (err, font) => { if (err) throw err; const ranges = [{ start: 0, end: 65535 }]; // 要生成的字体范围 const glyphs = ranges.map(range => font.encode({ ...range })); fontnik.compress(glyphs, (err, pbf) => { if (err) throw err; fs.writeFile(outputPath, pbf, err => { if (err) throw err; console.log('字体文件已生成'); }); }); }); }); ``` 在上面的代码中,将 `'path/to/your/font.ttf'` 替换为你的实际字体文件路径,将 `'path/to/output/font.pbf'` 替换为你想要保存字体文件的路径。你可以通过修改 `ranges` 数组来指定要生成的字体范围。 3. 运行生成字体文件的脚本:在命令行中运行以下命令来执行生成字体文件的脚本: ``` node your-script.js ``` 将 `your-script.js` 替换为包含生成字体文件代码的实际 JavaScript 文件名。 4. 在 Mapbox GL 中加载本地字体:在你的 Mapbox GL 应用程序中,使用以下代码来加载和设置本地字体: ```javascript mapboxgl.setRTLTextPlugin('path/to/output/font.pbf', null, true); ``` 将 `'path/to/output/font.pbf'` 替换为你生成的字体文件的路径。 通过以上步骤,你可以使用 node-fontnik 生成字体文件,并在 Mapbox GL 中加载和配置本地字体。

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值