openlayers4中用font设置图标样式

最新推荐文章于 2024-08-26 17:11:53 发布

牛老师讲GIS

最新推荐文章于 2024-08-26 17:11:53 发布

阅读量3.9k

点赞数 1

分类专栏： GIS加油站文章标签： ol4 font style

本文链接：https://blog.csdn.net/gisshixisheng/article/details/80496583

版权

GIS加油站专栏收录该内容

321 篇文章 246 订阅

订阅专栏

概述

font其实是个好东西，不论是写css还是。。。，这不，牛老师想把它用在openlayers4中，用以很方便的设置图标的大小、颜色，还不失真，东拼西凑，终于算是完成了。

效果

font样式

换个大小？
改变大小

换个颜色？
改变颜色

先炫耀到这吧，确实很6啊。。。

实现

1、样式引入

<link rel="stylesheet" type="text/css" href="css/iconfont.css"/>

2、iconfont.css

@charset "utf-8";

@font-face {font-family: "iconfont";
  src: url('./iconfont.woff?t=1502264184772') format('woff'); 
}

3、样式设置

        function styleFunc (feature, resolution) {
            var iconFont = 'iconfont';
            var iconFontText = "\S"; // equates to fa-trash icon
            var iconSize = 6 * map.getView().getZoom();
            var col = '#00f';

            var styleIcon = new ol.style.Style({
                text: new ol.style.Text({
                    font: 'Normal ' + iconSize + 'px ' + iconFont,
                    text: iconFontText,
                    fill: new ol.style.Fill({ color: col }),
                    textBaseline: 'bottom'
                })
            });
            return styleIcon;
        }