[JavaScript知识库]ArcGIS JavaScript 使用本地字体库

一、参考资料

https://www.jianshu.com/p/12c3c8fe05fa

ArcGIS API for JavaScript如何使用本地的字体库 - GIS知乎-新一代GIS问答社区

centos7配置nodejs环境 - 十月梦想博客

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

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目录（也可以使用wdget远程下载）

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/

远程下载

wget http://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

阿里普惠体

??

?

隶书