OpenLayers 样式之数学表达式

关注我,带你一起学GIS ^

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

前言

数学表达式是连接数据与可视化、逻辑与操作的核心纽带。能够动态处理要素属性、地图状态和用户交互数据,显著增强地图的可视化能力和交互灵活性。

1. 数学表达式

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]:返回反正切值。

2. 应用展示

本文以计算云南省2024年各州市GDP总量以及占比为例进行讲解展示。

首先将数据处理完善,对云南省GeoJSON数据各要素添加目标字段,如GDPtotal等。

添加样式表达式,实现GDP占比计算,并对GDP值高于2000和低于2000的数据进行分色表达。

style: {
    "text-value": ["concat", ["get""GDP"], "(亿元)""n------n", ["*", ["/", ["round", ["*", ["/", ["get""GDP"], ["get""total"]], 10000]], 10000], 100], " %"],
    "text-fill-color": ["case", [">", ["get""GDP"], 2000], "#FAFAD2""#ffc107bd"],
    "text-stroke-color""#2F4F4F",
    "fill-color": ["case", [">", ["get""GDP"], 2000], "#ff9933c9""#33ff9975"],
    "stroke-color""#00FFFF",
    "stroke-width": 1.25
}

以下对如何实现占比计算进行讲解:

第一步:先乘以10000取整

  • ["/", ["get", "GDP"], ["get", "total"]:除法运算,获取各州市GDP除以中GDP值。
  • ["*",["/", ["get", "GDP"], ["get", "total"]],10000]:乘法运算,先将除法运算结果乘以10000,相当于为最终结果保留两位小数。
  • ["round",["*",["/", ["get", "GDP"], ["get", "total"]],10000]],约数运算,对计算结果进行取整。

第二步:再除以10000

["/",["round",["*",["/", ["get", "GDP"], ["get", "total"]],10000]],10000]:使用除法运算将上一步取整结果再除以10000。

第三步:再乘以100,然后加上百分比符号。

["*",["/",["round",["*",["/", ["get", "GDP"], ["get", "total"]],10000]],10000],100]:使用乘法运算对上一步运算结果乘以100。

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

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

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

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

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

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

 

发表评论

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

滚动至顶部