OpenLayers 3 之 地图样式(ol.style)详解
地图样式是由 style 类控制的,其包含了地图样式的方方面面,例如,填充色、图标样式、图片样式、规则图形样式、边界样式、文字样式等,样式一般针对矢量要素图层。
矢量图层样式可以事先写好,写成静态的,矢量图层直接按照定义好的样式渲染,也可以动态使用样式的 set()
方法,但是要注意刷新矢量图层,重新渲染,否则动态样式不生效。
一、ol.style
1. 可以配置的选项
/*** @typedef {{geometry: (undefined|string|ol.geom.Geometry|ol.style.GeometryFunction),* fill: (ol.style.Fill|undefined),* image: (ol.style.Image|undefined),* stroke: (ol.style.Stroke|undefined),* text: (ol.style.Text|undefined),* zIndex: (number|undefined)}}* @api*/
- geometry,要素的属性,或者要素,或者一个返回一个地理要素的函数,用来渲染成相应的地理要素;
- fill,填充要素的样式;
- image,图片样式,类型为
ol.style.Image
; - stroke,要素边界样式,类型为
ol.style.Stroke
; - text,要素文字的样式,类型为
ol.style.Text
; - zIndex,CSS中的zIndex,即叠置的层次,为数字类型。
2. 子类
- ol.style.Circle,针对矢量要素设置圆形的样式,继承
ol.style.Image
; - ol.style.Icon,针对矢量数据设置图标样式,继承
ol.style.Image
; - ol.style.Fill,针对矢量要素设置填充样式;
- ol.style.RegularShape,对矢量要素设置规则的图形样式,如果设置
radius
,结果图形是一个规则的多边形,如果设置radius1
和radius2
,结果图形将是一个星形; - ol.style.Stroke,矢量要素的边界样式;
- ol.style.Text,矢量要素的文字样式。
可以看出这些样式都是针对矢量要素的。
二、举例说明
假设有一个矢量图层,使用如下的样式配置图层:
var style = new ol.style.Style({fill: new ol.style.Fill({ //矢量图层填充颜色,以及透明度color: 'rgba(255, 255, 255, 0.6)'}),stroke: new ol.style.Stroke({ //边界样式color: '#319FD3',width: 1}),text: new ol.style.Text({ //文本样式font: '12px Calibri,sans-serif',fill: new ol.style.Fill({color: '#000'}),stroke: new ol.style.Stroke({color: '#fff',width: 3})}) });
按照以上配置,效果如下图:
1. geometry - 地理属性
geometry
可以是要素的地理属性,或者 geometry
,或者一个返回 geometry
类型的函数。一般与 image
样式配合使用,表示 image 放置的位置,如下面的例子:
new ol.style.Style({image: new ol.style.Circle({radius: 5,fill: new ol.style.Fill({color: 'orange'})}),geometry: function(feature) {// return the coordinates of the first ring of the polygonvar coordinates = feature.getGeometry().getCoordinates()[0];return new ol.geom.MultiPoint(coordinates);}})
2. fill - 填充样式
color: 'rgba(255, 255, 255, 0.9)'
,配置了图层的要素的填充颜色和透明度,格式为 [R, G, B, A],分别代表 RGB 的三个分量,A 代表 alpha,即透明度。以上颜色配置为白色,每个分量值是 [0, 255] 区间内的值,越小,越暗;越大,越亮。透明度为 0.9,透明度是一个 [0, 1] 区间内的值,越小,要素越是透明;越大,越不透明。
更改颜色 [0, 255, 0, 0.9],将颜色的绿色分量调为最大,其他颜色分量调为 0,那么地图的背景色应该变为纯绿色,刷新浏览器,得到下图:
更改透明度[255, 255, 255, 0.1],将透明度分量改为 0.1 ,预期图层将变得非常透明,刷新浏览器,得到如下图:
3. image - 图片样式
样式主要针对矢量图层(vector layer),矢量图层中包含一个或多个要素(feature),要素中包含一个地理属性(geometry)表示地理位置,还可能包含一个或多个其他属性,比如要素的名称、类型等等,要素可以使用单独的样式,这时候要使用 feature.setStyle(ol.style.Style)
来设置单独使用的样式,否则直接继承矢量图层的样式。
使用 setStyle 方法设置单个要素样式,首先定义一个图标样式:
var iconStyle = new ol.style.Style({image: new ol.style.Icon(({src: 'data/icon.png'})) });
设置一个显示在特定位置的图片图标,使用 ol.style.Icon
配置该属性,src
属性设置了图片的地址,还可以设置透明度等属性。接下来定义一个点要素:
var iconFeature = new ol.Feature({geometry: new ol.geom.Point([0, 0]), });
将样式应用于点要素:iconFeature.setStyle(iconStyle);
,最后定义一个矢量图层,并加入该要素:
var iconLayer = new ol.layer.Vector({source: new ol.source.Vector({features: [iconFeature]}) });
得到结果是,在[0, 0]坐标处显示一个图标,如图:
该样式有一个特性,就是地图中不显示相应区域时候,图片默认不加载,当该区域在地图视口中,才会加载图片,当然这是为了节省带宽,提高性能。如果我们将图层的style属性配置为iconStyle,那么结果是一样的,其结果是图层中的所有要素都会是一样的样式。需要指出的是,该样式只针对于点要素。
4. stroke - 边界线条
color: '#319FD3', width: 1
,配置要素边界的颜色为 ‘#319FD3’,16 进制颜色代码,width 说明线条宽度为 1 像素。更改颜色为红色:’#FF0000’,结果如下图:
更改线条宽度:width:10,得到如下结果:
5. text - 文字
设置矢量图层中的各个要素中要显示的文字的字体类型,线条填充颜色,线条边界颜色,因为文字的线条本身就具有宽度,所以有填充色和边界颜色说法。如下面的例子,设置了文字的大小、字体、填充色和边界颜色:
text: new ol.style.Text({font: '12px Calibri,sans-serif', //字体与大小fill: new ol.style.Fill({ //文字填充色color: '#000'}),stroke: new ol.style.Stroke({ //文字边界宽度与颜色color: '#fff',width: 3}) })
font: '12px Calibri,sans-serif',
指定了文字的大小和字体,我们修改文字大小为 24px
,得到如下结果:
fill
规定了文字笔画线条的填充颜色,修改为 #FFF
,结果应该是白色。结果如图:
stroke
规定了文字的边缘线条的颜色和宽度,其实文字本身就像一个地理要素一样,有填充和线条样式,可以看出文字的笔画线条外边缘有白色,就是这个样式在起作用。
6. 条件样式
条件样式是将样式配置为一个回调函数,其参数包含要素本身和分辨率,可以根据要素本身的属性和地图的分辨率,显示动态的样式,形式如style: function(feature, resolution) {}
。
例如,以下代码段配置当分辨率小于 5000 时候,在要素上显示一个标签,标识要素名称:
style: function(feature, resolution) {style.getText().setText(resolution < 5000 ? feature.get('name') : '');return styles;}
三、总结
样式主要针对矢量图层数据,既可以配置一个全局的样式,也可以针对每个feature
单独配置;既可以应用统一的样式,也可以根据要素和分辨率应用条件样式。样式应用是非常灵活的。
另外,样式是可以多个一起起作用的,就如同 HTML
的元素样式类 class
可以有多个一样。如下例子中,就应用了两个样式,一个是应用于多边形本身,另一个用于绘制每个多边形的顶点:
var styles = [new ol.style.Style({stroke: new ol.style.Stroke({color: 'blue',width: 3}),fill: new ol.style.Fill({color: 'rgba(0, 0, 255, 0.1)'})}),new ol.style.Style({image: new ol.style.Circle({radius: 5,fill: new ol.style.Fill({color: 'orange'})}),geometry: function(feature) {// return the coordinates of the first ring of the polygonvar coordinates = feature.getGeometry().getCoordinates()[0];return new ol.geom.MultiPoint(coordinates);}}) ];
转载于:https://www.cnblogs.com/lishanyang/p/6071528.html
OpenLayers 3 之 地图样式(ol.style)详解相关推荐
- css样式继承规则详解
css样式继承规则详解 一.总结 一句话总结:继承而发生样式冲突时,最近祖先获胜(最近原则). 1.继承中哪些样式不会被继承? 多数边框类属性,比如象Padding(补白),Margin(边界),背景 ...
- python三维图能画地图_Python地图绘制实操详解
网上有很多地图绘制的教程,更多趋向于全国地图或者省级地图,但有时我们需要到县级.闲得慌,今天以贵州省毕节市为例,分享一篇Python县级地图的绘制(遥想当时差点把百度翻了个底朝天),希望对需要的你能有 ...
- javascript写css样式,原生javascript实现读写CSS样式的方法详解
原生javascript实现读写CSS样式的方法详解 发布于 2017-05-24 15:05:31 | 120 次阅读 | 评论: 0 | 来源: 网友投递 JavaScript客户端脚本语言Jav ...
- php 修改 wordpress,修改WordPress中文章编辑器的样式的方法详解
这篇文章主要介绍了修改WordPress中文章编辑器的样式的方法详解,同时文中也推荐了两款取代默认文章编辑器的插件,需要的朋友可以参考下 自定义文章编辑器的样式每一个 WordPress 主题的文章样 ...
- html5走格子游戏,JS/HTML5游戏常用算法之碰撞检测 地图格子算法实例详解
JS/HTML5游戏常用算法之碰撞检测 地图格子算法实例详解 发布时间:2020-09-26 20:42:24 来源:脚本之家 阅读:112 作者:krapnik 本文实例讲述了JS/HTML5游戏常 ...
- OpenLayers 4 ol.source 详解
source 是 Layer 的重要组成部分,表示图层的来源,也就是服务地址. 除了在构造函数中指定外,还可以使用 layer.setSource(source) 稍后指定. 一.包含的类型 ol.s ...
- 关于css3中的2d样式skew倾斜详解
简介: 在css3中,transform有个属性skew,能使元素产生倾斜效果,不少小伙伴接触到时都很费解,为什么倾斜效果和自己想的不一样,当然网上也有不少死记硬背规律口诀的方法,但我个人觉得都不是很 ...
- SVG排版教程 | 样式背景属性详解与应用
<元素属性原理详解与应用>讲到了SVG元素viewBox属性的实际应用,能够实现SVG元素在不同手机上的自适应适配(SVG元素的宽高根据手机屏幕大小等比例放大或缩小).SVG黑科技排版的每 ...
- 前端Sass样式预处理器详解
Sass 是一款强化 CSS 的辅助工具,它在 CSS 语法的基础上增加了变量 (variables).嵌套 (nested rules).混合 (mixins).导入 (inline imports ...
最新文章
- android读取raw文件示例
- 通信专业学python有用吗-通信算法工程师需要学python吗
- servlet增删改查实例_SpringMVC4+MyBatis3+SQLServer 2014 整合(包括增删改查分页)
- 斐波那契数列及其优化
- MYSQL学习笔记三:日期和时间函数
- 第七节:Asp.Net Core内置日志记录
- 【数据结构和算法笔记】二叉树的概念和性质
- pyqt5 显示更新进度条_python3.x+pyqt5实现主窗口状态栏里(嵌入)显示进度条功能...
- Ubuntu镜像名称解释
- Python不是内部或外部命令的(完美解决)
- 对DSP的基本了解(二)--DSP的软硬件环境
- Python GIS神器shapely 2.0新版本来了
- 房子装修真的好累~~
- 学习嵌入式的开发线路,新手怎么学习嵌入式?
- MOSFET管基本原理与应用
- 直播观看指南|SOFA 五周年,Live Long and Prosper!
- Java基础:01Java语言概述(常见的DOS命令,Java语言的特点、核心机制、环境搭建,HelloWorld,注释,Java API 文档)
- Hive 修复分区 MSCK REPAIR TABLE的使用
- iOS中的时间和日期
- MacBook如何删除卸载软件