企业官网建设流程全解析

摘要：本文旨在解决 ArcGIS JS API 在离线环境下字体库失效的问题。通过搭建 genfontgl 工具，将本地字体转换为 .pbf 格式并部署，从而保证地图渲染的 label 和 text 类型 symbol 在无网络时也能正常显示。

为什么要有一套本地字体库

ArcGIS JavaScript 默认使用的是他们域名里的字体库（https://static.arcgis.com/fonts）。

如果在没有互联网的情况下，有可能会导致访问字体库失败，如下图。

这样我们地图渲染的 label 或者 text 类型的 symbol 都会失效。所以我们需要有一套自己的字体库。

ArcGIS 使用的字体格式不是 window 系统常用的 .ttf，使用的是.pbf。查询了一番资料，关于 .pbf 格式的字体很少有直接下载的网站。有一个转换的工具，但是有系统限制，只能使用 linux（64 位）或者 Mac OS X 环境。所以可能需要一台虚拟机搭建必要的环境。

• 搭建genfontgl工具

genfontgl 的后台是使用的 fontnik 这个库。注意 Fontnik 有对应的系统要求和 node 版本要求，安装的 node 压缩包要注意匹配版本。

首先默认存在 64 位 linux 系统的情况下，直接可以按以下步骤安装 genfontgl 工具。

（1）linux 安装 node 环境

首先需要下载 linux 版本的 node 安装包，使用 WinSCP 工具将安装包移入 root 目录（也可以使用 wget 远程下载）。

wget https://npm.taobao.org/mirrors/node/v6.9.0/node-v6.9.0-linux-x64.tar.gz

下载地址:CNPM Binaries Mirror

这里可以新建一个文件夹存放压缩包，根据个人习惯。

WinSCP:

Linux 控制台:

解压到 /root 路径。-C 后面指定解压路径

[root@localhost ysb]# tar -zxvf node-v6.9.0-linux-x64.tar.gz -C /root

回到默认主目录 /root

[root@localhost ysb]# cd ~

重命名（非必须）

[root@localhost ~]# mv node-v6.9.0-linux-x64/ node

将npm以及node建立为全局命令

[root@localhost ~]# ln -s /root/node/bin/node /usr/local/bin/node

[root@localhost ~]# ln -s /root/node/bin/npm /usr/local/bin/npm

查看

[root@localhost ~]# cd /usr/local/bin

[root@localhost bin]# ls

将/root/node/bin配置到用户环境变量中

[root@localhost bin]# cd ~

[root@localhost ~]# vi .bash_profile

更改下图红色区域路径为下图显示的路径

立即执行修改，使修改立即生效

测试成功（显示安装的版本号）

（2）安装升级GCC

检查linux的当前gcc版本

strings /usr/lib64/libstdc++.so.6 | grep GLIBC

如果没有下图红框的版本，需要进行GCC升级

安装所需工具

[root@localhost ~]# clear

[root@localhost ~]# yum groupinstall "Development Tools"

[root@localhost ~]# yum install glibc-static libstdc++-static

下载gcc安装包

下载地址:Index of /software/gcc/releases/

远程下载

wgethttp://ftp.tsukuba.wide.ad.jp/software/gcc/releases/gcc-5.4.0/gcc-5.4.0.tar.gz

编译安装gcc-5.4.0:

[root@localhost ysb]# tar -xvf gcc-5.4.0.tar.bz2

[root@localhost ysb]# cd gcc-5.4.0

[root@localhost gcc-5.4.0]# ./contrib/download_prerequisites

[root@localhost gcc-5.4.0]# mkdir build

[root@localhost gcc-5.4.0]# cd build

[root@localhost build]#

../configure --enable-checking=release --enable-languages=c,c++ --disable-multilib

[root@localhost build]# make && make install

（本人台式8G、3.2主频电脑配置，编译完大概需要1个多小时）

安装完成后重启一下机器

[root@localhost build]#reboot

此时有libstdc++.so.6.0.21

[root@localhost ~]# find / -name "libstdc++.so*"

将上面的最新动态库libstdc++.so.6.0.21复制到/usr/lib64目录下

[root@localhost ~]# cp /usr/local/src/gcc-build-5.4.0/prev-x86_64-unknown-linux-gnu/libstdc++-v3/src/.libs/libstdc++.so.6.0.21 /usr/lib64

删除之前的软连接并指向最新的动态库

[root@localhost ~]# cd /usr/lib64

[root@localhost lib64]# rm -rf libstdc++.so.6

libstdc++.so.6 libstdc++.so.6.0.19 libstdc++.so.6.0.21

[root@localhost lib64]# rm -rf libstdc++.so.6

[root@localhost lib64]# ln -s libstdc++.so.6.0.21 libstdc++.so.6

查看

[root@localhost lib64]# strings /lib64/libstdc++.so.6 | grep GLIBC

成功

安装genfontgl

• 转换字体

以免费商用的阿里巴巴字体为例，从网上下载阿里巴巴字体（点击下面超链接也可下载）

http://aifont.oss-cn-beijing.aliyuncs.com/Alibaba%20PuHuiTi/Alibaba%20PuHuiTi_AlibabaSans.zip

解压后找到字体文件，使用WinSCP工具上传

这里可以根据需要将字体上传。以Alibaba-PuHuiTi-Regular.otf为例。

转换之前可以新建一个目录存放转换后的字体，否则将默认转换至当前目录。

[root@localhost ~]# mkdir ali-pbf-fonts

转换

[root@localhost ~]# cd ali-ttf-fonts/阿里巴巴普惠体/

[root@localhost 阿里巴巴普惠体]# genfontgl Alibaba-PuHuiTi-Regular.otf /root/ali-pbf-fonts/

查看

修改命名格式

修改为符合esri的命名格式。（也可以直接通过winSCP工具修改，或者先拉出来修改）

Esri的命令规范大致是:

以下的weight和style是对于arcgis js api设置font属性而言的。不同的设置有不同的格式要求

• Arcgis JavaScript API加载本地字体

（1）引入esri/config模块

（2）设置fontsUrl

这里路径是相对于你项目中当前文件的路径。我项目结构如下

路径设置:

（3）应用

应用到text Symbol中

• 测试图

arial-unicode-ms

阿里普惠体

隶书