mapbox 本地环境搭建

环境搭建"/>

mapbox 本地环境搭建

mapbox 本地环境搭建

mapbox-gl 本地化就是对style中的sprite和glyphs属性进行本地化，不需要access_token。

sprite 本地化

sprite 本地化比较简单，主要是对mapbox的sprite@2x.json和sprite@2x.png进行本地化。在项目内新建文件夹sprite，
将下载下来的sprite@2x.json和sprite@2x.png放入sprite文件夹内。然后将sprite属性改成本地服务地址，例如：

style = {sprite:'http://localhost:8080/static/sprite/sprite'
}

glyphs 本地化

glyphs 本地化比较繁琐，要将自己使用的字体进行切分，其中使用到node-fontnik模块。
node-fontnik模块需要在linux下运行、所以需要在虚拟机中安装Linux操作系统。

• 安装VirtualBox虚拟机和Centos 7
  安装部分就不多说了，找个教程安装就可以了。主要说一下，安装完毕之后，自身主机（windows10）和 Centos 7 进行文件夹共享，用来实现文件互传。文件夹共享需要安装VirtualBox的扩展增强功能。
  注意：
  1、如果安装的是linux桌面版，在安装扩展增强功能之前，先将虚拟光驱弹出，不然当你选择设备->安装增强功能时会出错。
  2、如果是最小化安装、需要通过命令进行安装(root用户)，如下：

# 光驱挂载
mount /dev/cdrom /media# 切换工作目录到media
cd /media# 查看文件列表，应该能看到VBoxLinuxAdditions.run
ll# 运行安装
./VBoxLinuxAdditions.run# 重启
reboot

• 建立共享文件夹
  

# 共享文件夹挂载, common 为刚才新建的共享文件夹 （注意，重启该挂载会无效、需要重新挂载或者利用配置文件做永久挂载）
mount -t vboxsf common /mnt

现在就可以通过common文件夹和/mnt目录进行文件共享了

• 安装node-fontnik的运行环境nodejs(v6.x)

# 下载nodejs
wget -P /usr/local/src .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/wlfei0502mkdir node-fontnikcd 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# 参照[猿基地]()写了一个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"
}