ArcGIS API for JavaScript如何使用本地的字体库
需求：
ArcGIS API for JavaScript如何使用本地的字体库，解决内网环境，或者我想用我自己的好看的字体的需求。
思路：
下载对应的字体文件（.pbf）或者将操作系统自带的字体文件（例如：.ttf）转为前端能够使用的.pbf格式的字体文件。
①ttf等字体文件转为.pbf字体文件，参考：转换.pbf（Protocolbuffer Binary Format）的字体库 - ArcGIS知乎-新一代ArcGIS问答社区
②前端使用本地的.pbf字体文件，参考：http://zhihu.geoscene.cn/article/3893
干货：
我已成功按照上述操作将常用的中文字体（如下）转为了前端可以使用的.pbf格式的字体，见链接。
链接：百度网盘 请输入提取码
提取码：f552
链接中包含下述19种字体：
方正舒体、方正姚体、微软雅黑、微软雅黑加粗、微软雅黑light、仿宋、黑体、楷体、宋体、华文彩云、华文仿宋、华文琥珀、华文楷体、华文隶书、华文宋体、华文细黑、华文行楷、华文新魏、华文中宋
如果上述还不能满足你的需求，那就按照思路1中的步骤自己去进行转换了。
字体截图：
将它们下载后按照自己的需求将其放置到webserver（例如：iis）下，以便前端读取。
其中字体文件夹需要按照esri命名规范进行命名，参考链接：ArcGIS API For JavaScript Font字体简介，下载及本地部署_一点点的博客-CSDN博客
最终效果：
①以黑体为例
操作系统的ttf字体
转为：
②前端加载的效果：
示例代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no">
<title>要素图层标注</title>
<link rel="stylesheet" href="http://zjq2018.gis.com/4.20/esri/themes/light/main.css">
<style>
html,
body,
#viewDiv {
padding: 0;
margin: 0;
height: 100%;
width: 100%;
background-color: black;
}
</style>
<script src="http://zjq2018.gis.com/4.20/init.js"></script>
<script>
require([
"esri/Map",
"esri/Basemap",
"esri/views/MapView",
"esri/layers/FeatureLayer",
"esri/config"
], function (Map, Basemap, MapView, FeatureLayer, esriConfig) {
esriConfig.portalUrl = "https://zjq2018.gis.com/arcgis";
esriConfig.fontsUrl = "http://zjq2018.gis.com/fonts";
const labelClass = { // autocasts as new LabelClass()
symbol: {
type: "text", // autocasts as new TextSymbol()
color: "red",
haloColor: "black",
font: { // autocast as new Font()
family: "simhei",
size: 16,
weight: "normal"
}
},
labelPlacement: "above-center",
labelExpressionInfo: {
expression: "$feature.name"
}
};
const featurelayer1 = new FeatureLayer({
url: "https://zjq2018.gis.com/server/rest/services/beijingAAAAA/FeatureServer/0",
labelingInfo: [labelClass],
renderer: {
type: "simple", // autocasts as new SimpleRenderer()
symbol: {
type: "simple-marker", // autocasts as new SimpleMarkerSymbol()
color: "rgba(0,100,0,0.6)",
size: 10,
outline: {
color: [0, 0, 0, 0.1],
width: 0.5
}
}
}
})
const map = new Map({
basemap: {
baseLayers: [
new FeatureLayer({ url: "https://zjq2018.gis.com/server/rest/services/Hosted/beijing/FeatureServer/0" })
]
},
});
map.add(featurelayer1);
const view = new MapView({
container: "viewDiv",
map: map,
center: [116.402544, 39.915378],
zoom: 6
});
});
</script>
</head>
<body>
<div id="viewDiv"></div>
</body>
</html>
相关知识
图片转web字体库，如何制作web字体库
阿里字体库使用教程
Android 字体库的使用。引入外部字体
word字体库
React Native：用JavaScript开发移动应用
ai生成字体库
字体库大全
字体库管理
javascript dom 编程艺术pdf javascript dom编程艺术pdf下载网盘
JavaScript实现的风飓风数据可视化分析
网址: ArcGIS API for JavaScript如何使用本地的字体库 https://m.huajiangbk.com/newsview742119.html
| 上一篇: 【楷体小篆花体字上百种字体临摹软 |
下一篇: CSS |
