admin管理员组

文章数量:1594754

       

        在使用ArcGIS JS API的Font类往地图上添加字体,第一次添加字体很慢,具体原因是api去esri服务器上下载字体文件,开发人员可以把字体文件放在可以快速访问的地方,然后通过esri/config 的 fontsUrl进行配置。

配置步骤:

1、下载 .pbf 字体文件: 

资源地址:https://download.csdn/download/shijie_nihao/11539395

arial-unicode-ms是arcgis api默认使用的字体。

解压后的目录:

 2、把上面两个文件夹放到IIS里边

目录结构如下:

3、IIS配置

        如果使用tomcat,请查找tomcat相关配置。

        MIME类型配置步骤,参考这篇文章:https://blog.csdn/shijie_nihao/article/details/99425948

                               文件扩展名:.pbf                        MIME类型:application/pbf

        IIS跨域配置,参考 https://blog.csdn/shijie_nihao/article/details/99422966

4、使用本地字体的示例

<!DOCTYPE html>
<html>
    <head lang="zh-CN">
        <meta charset="UTF-8">
        <title> 配置使用“本地”字体 </title>
        <link rel="stylesheet" href="https://js.arcgis/4.12/esri/css/main.css">
        <script src="https://js.arcgis/4.12/"></script>
        <style type="text/css">
            *{
                margin: 0;
                padding: 0;
            }
            html,body{
                height: 100%;
                width: 100%;
                position: relative;
                overflow: hidden;
            }
        </style>
    </head>
    <body>
        <div id="viewDiv" style="height: 100%;"></div>
        <script type="text/javascript">
            require([
                "esri/Map",
                "esri/views/MapView",
                "esri/Graphic",
                "esri/layers/GraphicsLayer",
                "esri/Color",
                "esri/symbols/Font",
                "esri/symbols/TextSymbol",
                "esri/symbols/SimpleMarkerSymbol",
                "esri/geometry/Point",
                "esri/geometry/SpatialReference",
                "esri/config"
            ], function(
                Map,
                MapView,
                Graphic,
                GraphicsLayer,
                Color,
                Font,
                TextSymbol,
                SimpleMarkerSymbol,
                Point,
                SpatialReference,
                esriConfig
            ) {
                //配置使用本地字体
                esriConfig.fontsUrl = "http://localhost/ArcGIS_Font";    
                var map = new Map({
                    basemap: "streets"
                });

                var view = new MapView({
                    center: [-80, 35],
                    container: "viewDiv",
                    map: map,
                    zoom: 3
                });

                var graphicLyr=new GraphicsLayer({id:'lyr1'});
                map.add(graphicLyr);

                var font=new Font({
                    size:'18px',
                    weight:'bold'
                });
                var textSymbol1=new TextSymbol({   //下面的文字是从网上粘贴的
                    text:"47城大陆居民赴台个人游试点暂停 金马澎3县长连袂赴京28省份半年报:15省份增速高于全国,云南增速暂列第一中国联通也要取消\"达量限速版\"产品",
                    font:font,
                    color:[255,0,0]
                });
                var pt1=new Point({
                    x:-80,
                    y:35,
                    spatialReference:view.spatialReference
                });
                graphicLyr.add(new Graphic({geometry:pt1,symbol:textSymbol1}));
            });
        </script>
    </body>
</html>

 

       

本文标签: 字体ArcGISAPI