利用图标字体实现在线地图上的地点标注与颜色渲染
来源:互联网 发布:淘宝网羽绒服半成品 编辑:程序博客网 时间:2024/06/05 08:57
前阵子做在线地图应用的时候,有个需求,就是地点标注出来要按区间分段渲染颜色。当然,可以用标签模拟正方形,三角形,再填充颜色,用css3还可以模拟一些圆形出来,但是一来要兼容万恶的IE6+,二来又得要好看。
然后我来谈谈我的解决方案吧,近几年移动端浏览器上流行的图标字体(icon font)就派上用场了,最重要是IE6都支持它。下图是使用图标字体后的地图渲染效果,是不是很不错呢?
使用icon font来生成图标相对于基于图片的图标来说,有如下的好处:
1.自由的变化大小
2.自由的修改颜色
3.添加阴影效果
4.IE6也可以支持
5.支持图片图标的其它属性,例如,透明度和旋转等等
6.可以添加text-stroke和background-clip:text等属性,只要浏览器支持
如何获取图标字体呢?在这里我比较推荐IconMoon这个网站,使用它你可以通过上传SVG或者字体来生成你需要的icon字体,或者直接下载它已有的icon字体,iconMoon内置了相当多的实用图标,最方便的地方在于一旦选择你想要的图标字体下载之后,它已经帮你生成了兼容所有浏览器的css文件和字体文件了,甚至连demo页面都帮你生成了,如下图所示:
然后使用的时候只需要动态创建具有指定样式的span标签就行了
颜色怎么样,都由你来定~!
字体文件有如下这些:
最后再补充一点,在chrome上有一个小小的问题需要处理一下,因为chrome默认是读取woff字体文件,而它在渲染woff字体文件时会出现边缘锯齿的现象!
怎么解决这个问题呢?chrome对svg字体文件的渲染非常平滑,很完美。所以我们只要利用css3的hack方式来让chrome只读取svg字体文件就可以了~!
@font-face {font-family: 'icomoon';src:url('icomoon.eot?74r1vd');src:url('icomoon.eot?#iefix74r1vd') format('embedded-opentype'),url('icomoon.woff?74r1vd') format('woff'),url('icomoon.ttf?74r1vd') format('truetype'),url('icomoon.svg?74r1vd#icomoon') format('svg');font-weight: normal;font-style: normal;}@media screen and (-webkit-min-device-pixel-ratio:0){@font-face {font-family: 'icomoon';src:url('icomoon.svg?74r1vd#icomoon') format('svg');font-weight: normal;font-style: normal;}}
加上如下这段@media screen and (-webkit-min-device-pixel-ratio:0)的Css就行了,因为这段代码只有支持css3特性的浏览器能识别。
好了,该说的都说完啦,本人原创文章转载还请注明出处哦,谢谢各位!^_^~
- 利用图标字体实现在线地图上的地点标注与颜色渲染
- D3js-地图中标注地点
- 高德地图api的自定义地点标注
- 百度地图打标展示地点分布图 ,如何利用百度地图API进行标注
- 百度地图使用 自定义标注的图标
- 百度地图使用 自定义标注的图标
- Angularjs+node+Mysql实现地图上的多点标注
- 去掉百度地图下方的字体标注
- 图标字体的在线制作
- 添加到网站上的百度地图,标注图标不显示
- Tab栏图标和字体颜色渐变的实现
- iOS 画地图上的标注气泡
- 地图上做标注
- iconnfont在线字体图标的使用
- 百度地图SDK2.1.1的自定义图标标注
- 位置与地图(二)地图的使用以及标注地图
- 基于opengl的地图渲染引擎设计与实现
- 在线图标字体生成器
- mac 系统开发android,真机调试解决方案(无数的坑之后吐血总结)
- 详细介绍一下Anchor标记
- (4) Linux ----- Shell编程输入输出 ---- ②
- java.lang.OutOfMemoryError: Java heap space解决方法
- yii2gii之CURD使用,功能不要太强大
- 利用图标字体实现在线地图上的地点标注与颜色渲染
- Android应用程序的安装位置
- android调用系统相机拍照之获取原图和缩略图
- UITabarController实践
- selenium2 在win7和IE下的一些错误
- TrueCrypt简介、在VS2008下的编译过程
- Mac OS X 上Lua的安装方法
- Android NDK开发(六)——使用开源LAME转码mp3
- Windows下配置tomcat7 https