openlayers4中用font设置图标样式

概述

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

效果

换个大小?

换个颜色?

先炫耀到这吧,确实很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;
        }

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏从零开始学 Web 前端

从零开始学 Web 之 移动Web(九)微金所案例

相关源代码已放置github:https://github.com/Daotin/Web/blob/master/Code/src/11/wjs.zip

1282
来自专栏Guangdong Qi

iOS开发常用之 HUD 弹窗

4262
来自专栏菜鸟前端工程师

html+css学习笔记011-表单

1043
来自专栏向治洪

react-native-android之初次相识

作为一名Android开发者,我的感觉就是,一步一卡,卡的潇洒。 但是我还是要学react-native,不要问我为什么,因为我相信一门解决了原生app,开...

1896
来自专栏MasiMaro 的技术博文

从项目中学习HTML+CSS

最近由于工作原因以及自己的懈怠,已经很久都没有更新过博客了。通过这段时间,我发现坚持一件事情是真的很难,都说万事开头难,但是在放弃这件事上好像开头了后面就顺理成...

2762
来自专栏贾鹏辉的技术专栏@CrazyCodeBoy

React Native 开发适配心得

众所周知用React Native是可以开发跨平台的Android和iOS App。我们可以用React Native开发Android应用也可以开发iOS应用...

3655
来自专栏前端知识分享

第135天:移动端开发经验总结

会调用event的preventDefault()可以阻止默认情况的发生:阻止页面滚动

1823
来自专栏程序员宝库

神奇的选择器 :focus-within

有个错误有必要每次讲到伪类都提一下,有时你会发现伪类元素使用了两个冒号 (::) 而不是一个冒号 (:),这是 CSS3 规范中的一部分要求,目的是为了区分伪类...

1042
来自专栏OpenApplus

小程序应用中WebView中原生组件限制问题解析

在微信的文档中有一个章节说明了『 [原生组件的使用限制](https://developers.weixin.qq.com/miniprogram/dev/co...

2130
来自专栏贾鹏辉的技术专栏@CrazyCodeBoy

React Native 学习资源精选仓库

React Native Awesome汇集了各类react-native学习资料、工具、组件、开源App、资源下载、以及相关新闻等,只求精不求全。 如果你是...

5127

扫码关注云+社区

领取腾讯云代金券