OpenLayers 样式之运算符

关注我,带你一起学GIS ^

注:当前使用的是 ol [9.2.4] 版本,天地图使用的key请到天地图官网申请,并替换为自己的key

前言

运算符是OpenLayers样式渲染的一大利器,贯穿于样式表达式的全过程。合理、准确的使用运算符,能够使得表达式更加强健易读,帮助用户提高开发效率。

1. 读取运算符

读取运算符可以从要素或者视图属性中读取值,['get', attributeName]具有广泛的应用。

  • ['band', bandIndex, xOffset, yOffset]

仅适用于切片图层,从源数据的波段索引中获取像素值,源数据的第一个bandIndex为1,获取的值在0..1范围内。TileImage源有4个波段:红色、绿色、蓝色和阿尔法。DataTileSource源可以有任意数量的波段,具体取决于底层数据源和配置xOffsetyOffset是可选的,允许为xy指定像素偏移。这用于从相邻像素采样数据(仅限WebGL)。

  • ['get', attributeName]

获取特征属性值,与feature.get('attributeName')相似。

  • ['get', attributeName, keyOrArrayIndex, ...]

访问要素属性的嵌套属性和数组项,仅适用于Canvas。当指定的键或索引处没有任何内容时,结果为undefiend

  • ['geometry-type']

以字符串形式返回要素的几何体类型,可以是:"LineString""Point""Polygon"Multi*值以其等效的几何体的形式返回;Cirlce几何图形以”Polygon”形式返回;GeometricCollection几何体以集合中找到的第一个几何体的类型返回(仅限WebGL)

  • ['resolution']

返回当前的分辨率。通过map.getView().getResolution()获取目标缩放级别下的视图分辨率,使用逻辑与运算符设置要素填充样式。

"fill-color": ["case", ["all", ["<=", ["resolution"], 0.008622229154671009], ["==", ["get", "name"], "楚雄彝族自治州"]], "#ff9933c9", "#33ff9975"],当当前分辨率小于等于目标值并且要素属性名等于楚雄彝族自治州时,填充目标要素颜色为"#ff9933c9"

  • ['time']

返回图层开始创建后以秒为单位的时间(仅限于WebGL)。

  • ['var', 'varName']

从样式变量中获取值。若样式变量为undefiend,则会抛出错误。

  • ['zoom']

获取当前缩放级别(仅限于WebGL)。

  • ['line-metric']

返回直线上当前点的M组件(仅限WebGL)

2. 数学运算符

数学运算符很多,功能分丰富。在计算GeoTIFF影像值中特别有用。

详情可参考文章:OpenLayers 样式之数学表达式

  • ['+', value1, value2, ...]:将多个数值相加并返回运算结果。
  • ['-', value1, value2]:用value1减去value2并返回运算结果。
  • ['*', value1, value2, ...]:将多个数字或者颜色值相乘并返回运算结果。
  • ['/', value1, value2]:用value1除以value2并返回运算结果。
  • ['clamp', value, low, high]:用于限制value值在lowhigh之间,并返回区间值。
  • ['%', value1, value2]: 计算value1value2的模,并返回运算结果。
  • ['^', value1, value2]:计算value1value2 次幂(即 value1^value2)并返回运算结果。
  • ['abs', value1]: 返回value1的绝对值。
  • ['floor', value1] :返回value1向下取整的值。
  • ['round', value1]:返回value1四舍五入的约数。
  • ['ceil', value1]:返回value1向上取整的值。
  • ['sin', value1]: 返回value1正弦值。
  • ['cos', value1]: 返回value1余弦值。
  • ['sqrt', value1]: 返回value1的平方根。
  • ['atan', value1, value2]:返回反正切值。

3. 转换运算符

  • ['case', condition1, output1, ...conditionN, outputN, fallback]

选择相应条件为真的第一个输出。如果未找到匹配项,则返回回退值。所有条件都应该是布尔值,输出和回退可以是任何类型。

该表达式与条件表达式相似,输出第一个条件为真的值。如以下表达式可翻译为:若获取GDP值大于2000的要素用"#ff9933c9"颜色值渲染,而其他的要素则用"#33ff9975"颜色值渲染。"fill-color": ["case", [">", ["get", "GDP"], 2000], "#ff9933c9", "#33ff9975"]

  • ['match', input, match1, output1, ...matchN, outputN, fallback]

将输入值与所有提供的匹配值进行比较,返回与第一个有效匹配相关的输出。如果未找到匹配项,则返回回退值。输入值和匹配值必须都是相同的类型,可以是数字或字符串。输出值和回退值必须是相同类型的,可以是任何类型。

如以下表达式可翻译为:若行政区名称与【”昆明市(磨憨)”】匹配,则使用"#ff9933c9"颜色值渲染,若与【”楚雄彝族自治州”】匹配,则使用"#ffdead8c"颜色值渲染,其他的要素则使用"#33ff9975"颜色值渲染。"fill-color": ["match", ["get", "name"], "昆明市(磨憨)", "#ff9933c9", "楚雄彝族自治州", "#ffdead8c", "#33ff9975"]

  • ['interpolate', interpolation, input, stop1, output1, ...stopN, outputN]

通过在输入和输出对之间插值来返回一个值;插值可以是[‘线性’]或[‘指数’,基数],其中基数是从A站到B站的增长率(即插值比提高的幂);值1等于[线性]。input和stopX值必须都是number类型。outputX值可以是数字或颜色值。注:输入将被夹在stop1和stopN之间,这意味着所有输出值都将包含在output1和outputN之间。以下是一个用于计算NDVI颜色值的'interpolate'表达式,使用线性插值,输入值为NDVI计算公式。根据数值区间输出颜色值进行影像渲染。

color: [
    'interpolate',
    ['linear'],
    // calculate NDVI, bands come from the sources below
    ['/', ['-', ['band', 2], ['band', 1]], ['+', ['band', 2], ['band', 1]]],
    // color ramp for NDVI values, ranging from -1 to 1
    -0.2,
    [191, 191, 191],
    -0.1,
    [219, 219, 219],
    0,
    [255, 255, 224],
    0.025,
    [255, 250, 204],
    0.05,
    [237, 232, 181],
    0.075,
    [222, 217, 156],
    0.1,
    [204, 199, 130],
    0.125,
    [189, 184, 107],
    0.15,
    [176, 194, 97],
    0.175,
    [163, 204, 89],
    0.2,
    [145, 191, 82],
    0.25,
    [128, 179, 71],
    0.3,
    [112, 163, 64],
    0.35,
    [97, 150, 54],
    0.4,
    [79, 138, 46],
    0.45,
    [64, 125, 36],
    0.5,
    [48, 110, 28],
    0.55,
    [33, 97, 18],
    0.6,
    [15, 84, 10],
    0.65,
    [0, 69, 0],
]

详情可参考文章:OpenLayers 根据Landsat计算NDVI

  • ['string', value1, value2, ...]

返回列表中计算结果为字符串的第一个值。在表达式中最好提供一个默认值如:['string', ['get', 'propertyname'], 'default value']]

fill: new ol.style.Fill({
    color: ['string', ['get''COLOR'], '#eee'],
})
  • ['number', value1, value2, ...]

返回列表中计算结果为数字的第一个值。在表达式中最好提供一个默认值如:['number', ['get', 'propertyname'], 42]]

  • ['coalesce', value1, value2, ...]

返回列表中第一个非null或未定义的值。在表达式中最好提供一个默认值如:['coalesce', ['get','propertyname'], 'default value']]

4. 逻辑运算符

详情可参考文章:OpenLayers 样式之布尔表达式

一、基础布尔运算符

基础语法

语法示例

说明

['<', v1, v2]

['<', ['get', 'GDP'], 1235]

v1<v2返回true,否则false

['<=', v1, v2]

['<=', density, 50]

v1<=v2返回true,否则false

['>', v1, v2]

['>', ['get', 'GDP'], 6860]

v1>v2返回true,否则false

['>=', v1, v2]

['>=', density, 50]

v1>=v2返回true,否则false

['==', v1, v2]

['==', area, 100]

v1=v2返回true,否则false

['!=', v1, v2]

['!=', area, 100]

v1!=v2返回true,否则false

['!', v1]

['!', 100]

v1true或者大于0,返回false,否则true

二、复合布尔运算符

  • 逻辑与运算

'all'运算与逻辑与一致,在所有输入值为true时才返回true,否则返回false['all', value1, value2, ...] returns true if all the inputs are true, false otherwise.

  • 逻辑或运算

'any'运算与逻辑或一致,只要任意输入值为true则返回true,否则返回false['any', value1, value2, ...] returns true if any of the inputs are true, false otherwise.

  • 其他布尔运算符

  • ['has', attributeName, keyOrArrayIndex, ...]

如果功能属性包含(嵌套)键attributeName,则返回true,否则返回false。请注意,对于WebGL层,硬编码值-99999999用于区分何时未定义属性。['has', attributeName, keyOrArrayIndex, ...] returns true if feature properties include the (nested) key attributeName, false otherwise. Note that for WebGL layers, the hardcoded value -9999999 is used to distinguish when a property is not defined.

  • ['between', value1, value2, value3]

如果value1包含在value2和value3之间(包括在内),则返回true,否则返回false。['between', value1, value2, value3] returns true if value1 is contained between value2 and value3 (inclusively), or false otherwise.

5. 格式转换运算符

  • ['array', value1, ...valueN]

从数值创建一个数值数组;请注意,当前值的数量只能是2、3或4(仅限WebGL)。

  • ['color', red, green, blue, alpha]** or ['color', shade, alpha]

从数值中创建颜色值;alpha参数是可选的;如果未指定,则将其设置为1(仅限WebGL)。注意:红色、绿色和蓝色或阴影分量必须是介于0255之间的值;α01之间。

  • ['palette', index, colors]

使用给定的索引从颜色数组中选取颜色值;索引表达式必须计算为一个数字;颜色数组中的项目必须是具有十六进制颜色的字符串(例如"#86A136")、使用rgba[a]函数表示法的颜色(例如"rgb(134,161,54)""rgba(134,161,54,1)")、命名颜色(例如,"red")或具有3([r,g,b])4([r、g、b、a])值的数组文字(r、g和b在0-255范围内,a在0-1范围内)(仅限WebGL)。

  • ['to-string', value]

将输入值转换为字符串。如果输入是布尔值,则结果为"true""false"。如果输入是一个数字,它将被转换为ECMAScript语言规范的”NumberToString”算法指定的字符串。如果输入是颜色,则将其转换为"rgba(r,g,b,a)"形式的字符串。(仅Canvas)

OpenLayers示例数据下载,请在公众号后台回复:ol数据

全国信息化工程师-GIS 应用水平考试资料,请在公众号后台回复:GIS考试

GIS之路公众号已经接入了智能助手,欢迎大家前来提问。

欢迎访问我的博客网站-长谈GIShttp://shanhaitalk.com

都看到这了,不要忘记点赞、收藏+关注 

本号不定时更新有关 GIS开发  相关内容,欢迎关注 

发表评论

您的邮箱地址不会被公开。 必填项已用 * 标注

滚动至顶部