mapbox-gl 本地化就是对style中的sprite和glyphs属性进行本地化,不需要access_token。
sprite 本地化比较简单,主要是对mapbox的[email protected]和[email protected]进行本地化。在项目内新建文件夹sprite,
将下载下来的[email protected]和[email protected]放入sprite文件夹内。然后将sprite属性改成本地服务地址,例如:
style = { sprite:'http://localhost:8080/static/sprite/sprite' }
glyphs 本地化比较繁琐,要将自己使用的字体进行切分,其中使用到node-fontnik模块。
node-fontnik模块需要在linux下运行、所以需要在虚拟机中安装Linux操作系统。
设备->安装增强功能
时会出错。# 光驱挂载 mount /dev/cdrom /media # 切换工作目录到media cd /media # 查看文件列表,应该能看到VBoxLinuxAdditions.run ll # 运行安装 ./VBoxLinuxAdditions.run # 重启 reboot
# 共享文件夹挂载, common 为刚才新建的共享文件夹 (注意,重启该挂载会无效、需要重新挂载或者利用配置文件做永久挂载) mount -t vboxsf common /mnt
现在就可以通过common文件夹和/mnt目录进行文件共享了
# 下载nodejs wget -P /usr/local/src https://nodejs.org/download/release/v6.0.0/node-v6.0.0-linux-x64.tar.gz # 切换目录 cd /usr/local/src # 解压缩 tar -xzvf node-v6.0.0-linux-x64.tar.gz # 重命名nodejs mv node-v6.0.0-linux-x64.tar.gz nodejs # 通过软连接或者配置环境变量的方式将node加入到path变量中 export PATH=$PATH:/usr/local/src/nodejs/bin # 查看版本号,能查看说明安装成功 node -v v6.0.0 # 在用户主目录下新建node-fontnik文件夹 cd /home/wlfei0502 mkdir node-fontnik cd node-fontnik # 建立node项目,一路Enter就可以了 npm init # 安装fontnik,如果能安装成功,恭喜你,反正我折腾了两天也安装不成功,各种坑,总是报node-pre-gyp错误, 最后只能走野路子 npm install fontnik # 野路子安装fontnik,github上下载node-fontnik的master.zip 压缩包,将其放到共享文件夹common中,再将其拷贝当前目录node-fontnik中 # 这里会缺少lib目录、没有该目录内的库文件是无法切分字体的,待会我们编译生成该目录 cp -r /mnt/mater.zip . # 解压, unzip master.zip # 会看到解压之后的node-fontnik-master文件夹,进入该目录 cd ./node-fontnik-master # 安装依赖 npm install # 参照[猿基地](https://www.jianshu.com/p/23634e54487e)写了一个fetch.js, 将拷贝到node-fontnik-master目录下 cp -r /mnt/fetch.js /home/wlfei0502/node-fontnik/node-fontnik-master # 将字体放到fonts目录中 cp -r /mnt/Yahei.ttf /home/wlfei0502/node-fontnik/node-fontnik-master/fonts # 新建字体输出目录 mkdir -p fonts-pbf/Yahei # 执行make命令,编译生成./lib/binding/fontnik.node文件 make # 执行fetch.js, 进行字体切分,稍等一会儿 node fetch.js # 运行完成, 查看结果,会看到很多pbf文件, 切分成功 ll ./fonts-pbf/Yahei # 将其拷贝到/mnt 共享文件夹 cp -r ./fonts-pbf/Yahei /mnt
项目内新建font文件夹,将Yahei文件夹拷背到font内的,再对样式进行本地字体配置, 最终样式本地配置是像这样:
style = { sprite:'http://localhost:8080/static/sprite/sprite', glyphs: 'http://localhost:8080/static/font/{fontstack}/{range}.pbf" }