目录

  • 前言
  • 1.准备工作
  • 2.新建一个最简单的helloworld页面
  • 3.看看效果
  • 4.注意点1-需使用Unicode写法
  • 4.注意点2-需注意iconfott.woff2的请求顺序
  • 5.特殊图标的制作
  • 6.总结

前言

  本文我们主要讲下如何在 openlayers 中使用 iconfont 字体，看明白了 iconfont ，那么Font Awesome 也就能明白了。虽然网上也能搜到一些讲这个的帖子，但是都讲得不清不楚的，比如牛老师的，我看完以后就是丈二和尚摸不着头脑，所以本文中，我会以 iconfont 为例，从最基础的讲起，力求初学者也能看的懂。另外遇到了哪些坑，我们也来讲一讲。

1.准备工作

  说到准备工作，那自然是我们要先去 iconfont 官网去下载自己的字体了，看一下我下载好的字体


  接下来就是在我们的测试页面中引入 iconfont 的css，然后使用具体的图标了。

注意，iconfont 提供了 3 种在页面中显示的方式，分别是Unicode、Font class和 Symbol ，如果普通的页面元素上使用字体图标，这几种都支持，并且Font class是大家用的最多的方式，，因为既直观又简单。但是在openlayers中，经过我的测试，不支持Font class方式，这一点可以说相当可惜。


  注意看，左上角已经显示了 iconfont 的图标了，说明我们的配置没问题。

2.新建一个最简单的helloworld页面

  因为我要实现的是对矢量切片进行样式的配置，所以就新建一个矢量切片的图层。我们的示例图层也使用 GeoServer 中自带的示例图层来进行展示。

   var projection = new ol.proj.Projection({code: 'EPSG:4326',units: 'degrees',axisOrientation: 'neu',global: true});var layerName="sf:bugsites";var pbfLayer4326=new ol.layer.VectorTile({source: new ol.source.VectorTile({url: "http://localhost:8080/geoserver/gwc/service/wmts?REQUEST=GetTile&SERVICE=WMTS&VERSION=1.0.0&LAYER="+layerName+"&STYLE=&TILEMATRIX=EPSG:4326:{z}&TILEMATRIXSET=EPSG:4326&FORMAT=application/vnd.mapbox-vector-tile&TILECOL={x}&TILEROW={y}",format: new ol.format.MVT({}),projection: projection,tileGrid: new ol.tilegrid.WMTS({tileSize: [256,256],origin: [-180.0, 90.0],resolutions: [0.703125, 0.3515625, 0.17578125, 0.087890625, 0.0439453125, 0.02197265625, 0.010986328125, 0.0054931640625, 0.00274658203125, 0.001373291015625, 6.866455078125E-4, 3.4332275390625E-4, 1.71661376953125E-4, 8.58306884765625E-5, 4.291534423828125E-5, 2.1457672119140625E-5, 1.0728836059570312E-5, 5.364418029785156E-6, 2.682209014892578E-6, 1.341104507446289E-6, 6.705522537231445E-7, 3.3527612686157227E-7],matrixIds: ['EPSG:4326:0', 'EPSG:4326:1', 'EPSG:4326:2', 'EPSG:4326:3', 'EPSG:4326:4', 'EPSG:4326:5', 'EPSG:4326:6', 'EPSG:4326:7', 'EPSG:4326:8', 'EPSG:4326:9', 'EPSG:4326:10', 'EPSG:4326:11', 'EPSG:4326:12', 'EPSG:4326:13', 'EPSG:4326:14', 'EPSG:4326:15', 'EPSG:4326:16', 'EPSG:4326:17', 'EPSG:4326:18', 'EPSG:4326:19', 'EPSG:4326:20', 'EPSG:4326:21']}),wrapX: true}),style:function(feature,resolutions){// console.log(feature.getType(),feature.get("layer"),resolutions);if(feature.getType()=="Point"){return new ol.style.Style({text: new ol.style.Text({font: 'normal 12px "iconfont"' ,text: "\ue61b",fill: new ol.style.Fill({ color: '#00f' }),textBaseline: 'bottom'})});}else if(feature.getType()=="Polygon" || feature.getType()=="MulitiPolygon"){//...}else if(feature.getType()=="LineString" || feature.getType()=="MulitiLineString"){//...}}});var map = new ol.Map({layers: [pbfLayer4326],target: 'map',view: new ol.View({zoom:13,center:[-103.78,44.40],projection: projection})});

3.看看效果

4.注意点1-需使用Unicode写法

  请注意这段关键代码中 font 和 text 的属性的写法，font 属性中的 iconfont 用双引号包了起来，而 text 属性则使用的是 Unicode。

   if(feature.getType()=="Point"){return new ol.style.Style({text: new ol.style.Text({font: 'normal 12px "iconfont"' ,text: "\ue61b",fill: new ol.style.Fill({ color: '#00f' }),textBaseline: 'bottom'})});}

  那么 “\ue61b” 对应的是哪个 Unicode 图标，这还得回到我们下载 iconfont 字体里去看一下

  可以看出，对应的公园的图标，但是这里显示的是 “&#xe61b”,为什么在 openlayers 里要改成 “\ue61b” 呢？因为 “&#x” 是十六进制写法，“\u” 则是对应的 Unicode 写法。
  那么如果我们将 openlayers 里的写法换成是 Font class写法，会发生什么事呢？我们来尝试一下，修改一下代码

if(feature.getType()=="Point"){return new ol.style.Style({text: new ol.style.Text({font: 'normal 12px "iconfont"' ,text: "icon-gongyuan",fill: new ol.style.Fill({ color: '#00f' }),textBaseline: 'bottom'})});
}


  可以发现，字体图标并没有起作用，本文中用到的 openlayers 版本为4.6.5，并没有使用更高的版本进行测试，不排除是版本问题，也可能后续版本进行了修复，但是3.x和4.x中想使用字体图标，那就必须是本文中的写法，才能起作用。

4.注意点2-需注意iconfott.woff2的请求顺序

  我还曾遇到过一个很奇怪的问题，地图首次加载时字体图标死活出不来，显示的是一个方框，后来刷新一下页面就出来了。我不知道为什么会存在延迟加载的问题，目前我的解决方式是，先在页面给个普通元素 span 加载一下相应的图标，之后才在 openlayers 里去使用这个字体图标，这样就不会存在使用上的延迟问题。
  经过调试，我发现造成这一现象的主要原因是，iconfott.woff2 的请求顺序决定的。

  可以看到 iconfott.woff2 是由 iconfont.css 请求的，如果 iconfott.woff2 是在矢量切片之前被请求到，则显示就是正确的，反之显示的就是一个方框。
  那么有没有更好的解决方式呢？答案是：有，link 标签可以预加载

 <link rel="preload" as="font" href="./iconfont/iconfont.woff2?t=1665994611202" type="font/ttf" crossorigin="anonymous">

href 中需要传递一个 t 值，我们可以在 iconfont.css 中的找到它

5.特殊图标的制作

  那么如果我们想使用一个特殊的图标，应该如何制作呢？比如高德中的这种：

  首先这个图标是由两层构成的，下面的一层是圆圈，上面的一层才是图标，那么怎么在 openlayers 中画下面的这个圆呢？答案是使用 ol.style.RegularShape 这个类，这个类是用来画五角星的，参数里可以给定点的数量，如果只给五个，就是五角星，那要是给360个呢？那么不就是圆了么？
但是360个太多了，影响性能，36个就能满足我们的需求。

  var tubiao="\u0119";var color="#ff5b4d";var offsetX=-0.5;var scale=1;return [new ol.style.Style({text:new ol.style.Text({font: 'normal 15px "iconfont"' ,text: tubiao,fill: new ol.style.Fill({ color: "#fff"}),textBaseline: 'bottom',scale:scale,offsetY:6,//正值向下，负值向上offsetX:offsetX,//正值向右，负值向左}),image:new ol.style.RegularShape({points:36,radius:8,fill:new ol.style.Fill({ color: color }),})}),new ol.style.Style({text:new ol.style.Text({font: 'bold 12px arial' ,text: "故宫博物院",overflow:true,stroke: new ol.style.Stroke({color: '#fff',width: 1}),fill: new ol.style.Fill({ color: color }),textBaseline: 'bottom',offsetY:24,scale:1,}),}),];


大功告成！

6.总结

  本文以 iconfont 为例，讲解了如何在 openlayers 中使用字体图标，并讲解了其中遇到的问题，以及对应的解决方案。值得注意的是，本文中是以 wmts 的方式加载的矢量切片，网上搜到的资料，大部分人使用的 tms 方式来加载矢量切片，因 tms 并不是 ogc 的标准，所以本文并未采用。当然，不论以何种形式来加载矢量切片，并不会对样式有影响，还是这样去设置的。
  所以在一定程度上可以说，本文是一石二鸟，在一个示例里，既讲了矢量切片的 wmts 加载，又讲了 openlayers 中字体图标的使用，一举两得。好了，本文就讲到这里了，回见~

如何在openlayers中使用iconfont或font Awesome字体图标相关推荐

  1. 如何在uni-app中引入iconfont图标

    如何在uni-app中引入iconfont图标 step1 在iconfont中找到你要的图标,这里和vue其他地方引用的步骤一致,如果是第一次使用iconfont请自行百度使用方法,因为我一直使用的 ...

  2. Vue.js - Font Awesome字体图标的使用详解（vue-fontawesome库）

    Vue.js - Font Awesome字体图标的使用详解(vue-fontawesome库) Font Awesome 是一个十分优秀的第三方图标库,我之前也写过文章介绍如何在 html 页面中使 ...

  3. iconfont 图标转为字体_阿里巴巴Iconfont矢量图转为字体图标的方法

    我们在做网站时,网站里会有很多的小图标,通常这些小图标会使用小图片来制作,但修改起来比较麻烦.所以现在很多网站都使用字体图片来制作小图标. 今天学做网站论坛介绍一下阿里巴巴Iconfont矢量图转为字 ...

  4. Font Awesome字体图标库

    Font Awesome字体图标是一款开源的字体图标库,可兼容BootStramp,官网:https://fontawesome.dashgame.com/ 安装方法简单,将压缩包中的fonts与Cs ...

  5. 如何在Axure中使用Iconfont图标字体

    需求背景 在原型设计中,图标是我们使用率非常高的元素,通常我们会选择将图标导出为图片放到Axure里使用,或者使用Axure的图标元件库,但是他们使用起来会有很多不方便的地方: 图片进行缩放会失真,无 ...

  6. Vue 中使用 Font Awesome 字体图标

    1.安装 官网 转载于 https://blog.csdn.net/qq_40663357/article/details/99655930 安装基础依赖: npm install --save @f ...

  7. Bootstrap4+MySQL前后端综合实训-Day02-AM【Bootstrap4(入门、环境搭建、文字排版、颜色、表格、图片、进度条、折叠、输入框组、模态框)、Font Awesome字体图标】

    [Bootstrap4前端框架+MySQL数据库]前后端综合实训[10天课程 博客汇总表 详细笔记] 目   录 Typora语法 Day01-知识回顾 1.前端部分 flex布局 2.Bootstr ...

  8. 如何在 Vue 中使用 Font Awesome 字体图标

    安装 npm install --save @fortawesome/fontawesome-svg-core npm install --save @fortawesome/vue-fontawes ...

  9. Bootstrap3 Font Awesome 字体图标

    简介 Font Awesome 是一套绝佳的图标字体库,它提供可缩放的矢量图标,并且可以通过CSS来设置大小.颜色.阴影或者其它任何支持的效果.Font Awesome具有以下特性: 一个字库,675 ...

最新文章

  1. 隐形需求 软件测试,从开发角度聊聊如何洞悉隐性需求
  2. 经典C语言程序100例之五五
  3. Docker端口映射实现
  4. 开启chrome默认支持ipv6
  5. 《卓有成效的管理者》培训分享——来自项目管理群的讨论
  6. Wps文档文件转换成pdf，支持doc-docx-ppt-pptx-xls
  7. Assimp(LearnOpenGL With Qt)
  8. wechat小程序布局flex
  9. 5G SA and NSA
  10. 官宣 .NET 6 预览版 6
  11. 迪克体育Dick’s Sporting Goods EDI需求分析
  12. linux双显卡分屏显示,linux NVIDIA显卡双屏扩展
  13. 猴子？狒狒？傻傻分不清楚——制作tfrecord数据集并利用卷积神经网络训练实例
  14. html5 css3鼠标滑过效果,Hover.css纯CSS3鼠标滑过特效动画库
  15. iso20000和iso9001的区别
  16. IOS——MD5加密
  17. 毛边效果 html,详解Html5 Canvas画线有毛边解决方法
  18. jquery图片放大
  19. occ资讯：公链与开发者的需求
  20. c语言程序设计与数据结构清华版,清华大学出版社-图书详情-《程序设计基础与数据结构》...

热门文章

  1. Qt 之 事件总线模型
  2. 【OpenCV学习笔记】之图像金字塔（Image Pyramid）
  3. java pdf 判断横版、竖版
  4. 学生课程注册管理系统
  5. Java实现牛牛的水杯
  6. 天线学习笔记——串馈网络设计
  7. 说一下浏览器垃圾回收机制？
  8. 阿里云视频上传到抖音服务器
  9. windows10系统还原
  10. python俗称_python中文叫什么