ArcGIS API for JavaScript如何使用本地的字体库_arcgis for js 4.23 使用本地字体-优快云博客

本文链接：https://blog.youkuaiyun.com/gislaozhang/article/details/121876146

需求：

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字体简介，下载及本地部署_一点点的博客-优快云博客

最终效果：

①以黑体为例

操作系统的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>