OpenLayers基础教程——WebGLPoints中要素样式的设置方法解析

1、前言

前一篇博客介绍了如何在OpenLayers中使用WebGLPoints加载海量数据点的方法，这篇博客就来介绍一下WebGLPoints图层的样式设置问题。

2、样式运算符

在VectorLayer图层中，我们只需要创建一个ol.style.Style对象即可，WebGLPoints则不同，它并不是基于Canvas进行绘制，因此其样式渲染不能直接使用ol.style.Style，取而代之的是使用样式运算符进行渲染。

2.1、读取运算符

1、['get', 'attributeName']
2、['var', 'varName']
3、['time']
4、['zoom']
5、['resolution']

2.2、数学运算符

1、['*', value1, value2]
2、['/', value1, value2]
3、['+', value1, value2]
4、['-', value1, value2]
5、['clamp', value, low, high]
6、['%', value1, value2]
7、['^', value1, value2]

2.3、变换运算符

1、['case', condition1, output1, ...conditionN, outputN, fallback]
2、['match', input, match1, output1, ...matchN, outputN, fallback]
3、['interpolate', interpolation, input, stop1, output1, ...stopN, outputN]

2.4、逻辑运算符

1、['<', value1, value2]
2、['<=', value1, value2]
3、['>', value1, value2]
4、['>=', value1, value2]
5、['==', value1, value2]
6、['!=', value1, value2]
7、['!', value1]
8、['between', value1, value2, value3]

2.5、转换运算符

1、['array', value1, ...valueN]
2、['color', red, green, blue, alpha]

3、样式渲染实例

上面列举了这么多的运算符，大家可能还是不清楚怎么使用它们。下面贴几个实例帮助大家理解。我这里准备了一份测试用的GeoJSON数据，就用它来说明。代码如下：

{"type": "FeatureCollection","features": [{"type": "Feature","geometry": {"type": "Point","coordinates": [120.0, 30.0]},"properties": {"type": "学校","dbm": 1}},{"type": "Feature","geometry": {"type": "Point","coordinates": [120.0, 30.1]},"properties": {"type": "学校","dbm": 2}},{"type": "Feature","geometry": {"type": "Point","coordinates": [120.1, 30.0]},"properties": {"type": "超市","dbm": 3}},{"type": "Feature","geometry": {"type": "Point","coordinates": [120.1, 30.1]},"properties": {"type": "超市","dbm": 4}},{"type": "Feature","geometry": {"type": "Point","coordinates": [120.2, 30.0]},"properties": {"type": "医院","dbm": 5}},{"type": "Feature","geometry": {"type": "Point","coordinates": [120.2, 30.1]},"properties": {"type": "医院","dbm": 6}}]
}

3.1、简单颜色渲染

简单颜色渲染很简单，只需要使用['color', R, G, B, O]即可，第一个参数'color'是固定值，后面的参数依次为红、绿、蓝、透明度，代码如下：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>OpenLayers</title><style>html,body,#map {width: 100%;height: 100%;margin: 0;padding: 0;}</style><link rel="stylesheet" href="libs/ol/ol.css" /><script src="libs/ol/ol.js"></script>
</head>
<body><div id="map"></div><script>// 创建图层var layer = new ol.layer.WebGLPoints({source: new ol.source.Vector({url: 'data/point.json',format: new ol.format.GeoJSON(),wrapX: false}),style: {symbol:{symbolType: 'circle',size: 40,color: ['color', 255, 0, 0, 1]}}});// 创建地图var map = new ol.Map({target: 'map',layers: [layer],view: new ol.View({projection: 'EPSG:4326',center: [120, 30],zoom: 10})});</script>
</body>
</html>

运行结果如下图所示：

在这里插入图片描述

3.2、根据type字段值精确匹配渲染

在测试的GeoJSON数据中包含一个type字段，该字段表示学校、超市、医院。现在要求将学校渲染为红色、超市渲染为绿色、超市渲染为蓝色。那么第一个问题来了：如何获取字段值？其实很简单，使用读取运算符中的['get', 'type']即可，第一个参数'get'为固定值，第二个参数为字段名称，这里是'type'。第二个问题：如何进行情况分类？其实也很简单，使用变换运算符中的match即可，代码如下：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>OpenLayers</title><style>html,body,#map {width: 100%;height: 100%;margin: 0;padding: 0;}</style><link rel="stylesheet" href="libs/ol/ol.css" /><script src="libs/ol/ol.js"></script>
</head>
<body><div id="map"></div><script>// 创建图层var layer = new ol.layer.WebGLPoints({source: new ol.source.Vector({url: 'data/point.json',format: new ol.format.GeoJSON(),wrapX: false}),style: {symbol:{symbolType: 'circle',size: 40,color: ['match',['get', 'type'], '学校', ['color', 255, 0, 0, 1],'超市', ['color', 0, 255, 0, 1],'医院', ['color', 0, 0, 255, 1],['color', 255, 0, 0, 1]]}}});// 创建地图var map = new ol.Map({target: 'map',layers: [layer],view: new ol.View({projection: 'EPSG:4326',center: [120, 30],zoom: 10})});</script>
</body>
</html>

在这里插入图片描述

运行结果如下图所示：

在这里插入图片描述

3.3、根据dbm字段值的范围渲染

现在根据dbm值的范围进行渲染，规定：1<=dbm<=2渲染为红色，dbm=3渲染为绿色，dbm=4渲染为蓝色，5<=dbm<=6渲染为黄色，这时就该逻辑运算符和变换运算符同时登场了，代码如下：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>OpenLayers</title><style>html,body,#map {width: 100%;height: 100%;margin: 0;padding: 0;}</style><link rel="stylesheet" href="libs/ol/ol.css" /><script src="libs/ol/ol.js"></script>
</head>
<body><div id="map"></div><script>// 创建图层var layer = new ol.layer.WebGLPoints({source: new ol.source.Vector({url: 'data/point.json',format: new ol.format.GeoJSON(),wrapX: false}),style: {symbol: {symbolType: 'circle',size: 40,color: ['case',['between', ['get', 'dbm'], 1, 2], ['color', 255, 0, 0, 1],['==', ['get', 'dbm'], 3], ['color', 0, 255, 0, 1],['==', ['get', 'dbm'], 4], ['color', 0, 0, 255, 1],['between', ['get', 'dbm'], 5, 6], ['color', 255, 255, 0, 1],['color', 255, 0, 0, 1]]}}});// 创建地图var map = new ol.Map({target: 'map',layers: [layer],view: new ol.View({projection: 'EPSG:4326',center: [120, 30],zoom: 10})});</script>
</body>
</html>

第一个参数'case'为固定值，['between', ['get', 'dbm'], 1, 2]表示获取的dbm值在1-2之间，['==', ['get', 'dbm'], 3]表示获取的dbm值恒等于3，运行结果如下图所示：

在这里插入图片描述

3.4、根据地图缩放等级渲染

看了上面的三个例子之后，相信你应该想到了，如果要根据地图缩放等级渲染，只需要使用读取运算符和变换运算符即可，现在要求：地图缩放等级<=10时渲染为红色、>10 and <=12时渲染为绿色、>12 and <=14时渲染为蓝色、其余等级为黄色，代码如下：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>OpenLayers</title><style>html,body,#map {width: 100%;height: 100%;margin: 0;padding: 0;}</style><link rel="stylesheet" href="libs/ol/ol.css" /><script src="libs/ol/ol.js"></script>
</head>
<body><div id="map"></div><script>// 创建图层var layer = new ol.layer.WebGLPoints({source: new ol.source.Vector({url: 'data/point.json',format: new ol.format.GeoJSON(),wrapX: false}),style: {symbol: {symbolType: 'circle',size: 40,color: ['case',['<=', ['zoom'], 10], ['color', 255, 0, 0, 1],['<=', ['zoom'], 12], ['color', 0, 255, 0, 1],['<=', ['zoom'], 14], ['color', 0, 0, 255, 1],['color', 255, 255, 0, 1]]}}});// 创建地图var map = new ol.Map({target: 'map',layers: [layer],view: new ol.View({projection: 'EPSG:4326',center: [120, 30],zoom: 10})});</script>
</body>
</html>

运行结果如下图所示：

在这里插入图片描述

3.5、根据地图分辨率渲染

根据地图分辨率渲染也很简单，只需要调用['resolution']即可。不过考虑到resolution值是一个小数，因此我们这里将resolution乘以10000之后再进行渲染，代码如下：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>OpenLayers</title><style>html,body,#map {width: 100%;height: 100%;margin: 0;padding: 0;}</style><link rel="stylesheet" href="libs/ol/ol.css" /><script src="libs/ol/ol.js"></script>
</head>
<body><div id="map"></div><script>// 创建图层var layer = new ol.layer.WebGLPoints({source: new ol.source.Vector({url: 'data/point.json',format: new ol.format.GeoJSON(),wrapX: false}),style: {symbol: {symbolType: 'circle',size: 40,color: ['case',['<=', ['*', ['resolution'], 10000], 2], ['color', 255, 0, 0, 1],['<=', ['*', ['resolution'], 10000], 3], ['color', 0, 255, 0, 1],['<=', ['*', ['resolution'], 10000], 4], ['color', 0, 0, 255, 1],['<=', ['*', ['resolution'], 10000], 5], ['color', 255, 255, 0, 1],['<=', ['*', ['resolution'], 10000], 6], ['color', 255, 0, 255, 1],['<=', ['*', ['resolution'], 10000], 7], ['color', 0, 255, 255, 1],['color', 300, 200, 100, 1]]}}});// 创建地图var map = new ol.Map({target: 'map',layers: [layer],view: new ol.View({projection: 'EPSG:4326',center: [120, 30],zoom: 10})});</script>
</body>
</html>

运行结果如下图所示：

在这里插入图片描述

4、其他的一些渲染参数

除了color属性之外，symbol的其它参数也可对样式渲染起到作用。比如symbolType参数，它可以设置为circle、triangle、square、image。设置为triangle时为三角形，如下图所示：

在这里插入图片描述
设置为square时为正方形，如下图所示：

在这里插入图片描述
opacity表示透明度，例如将透明度设置为0.3：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>OpenLayers</title><style>html,body,#map {width: 100%;height: 100%;margin: 0;padding: 0;}</style><link rel="stylesheet" href="libs/ol/ol.css" /><script src="libs/ol/ol.js"></script>
</head>
<body><div id="map"></div><script>// 创建图层var layer = new ol.layer.WebGLPoints({source: new ol.source.Vector({url: 'data/point.json',format: new ol.format.GeoJSON(),wrapX: false}),style: {symbol: {symbolType: 'circle',size: 40,color: ['color', 255, 0, 0, 1],opacity: 0.3}}});// 创建地图var map = new ol.Map({target: 'map',layers: [layer],view: new ol.View({projection: 'EPSG:4326',center: [120, 30],zoom: 10})});</script>
</body>
</html>

运行结果如下图所示：

在这里插入图片描述
不仅是color，其实size参数也可以使用样式表达式，例如根据dbm值生成不同大小的要素，代码如下：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>OpenLayers</title><style>html,body,#map {width: 100%;height: 100%;margin: 0;padding: 0;}</style><link rel="stylesheet" href="libs/ol/ol.css" /><script src="libs/ol/ol.js"></script>
</head>
<body><div id="map"></div><script>// 创建图层var layer = new ol.layer.WebGLPoints({source: new ol.source.Vector({url: 'data/point.json',format: new ol.format.GeoJSON(),wrapX: false}),style: {symbol: {symbolType: 'circle',size: ['case',['==', ['get', 'dbm'], 1], 10,['==', ['get', 'dbm'], 2], 20,['==', ['get', 'dbm'], 3], 30,['==', ['get', 'dbm'], 4], 40,['==', ['get', 'dbm'], 5], 50,['==', ['get', 'dbm'], 6], 60,20],color: ['color', 255, 0, 0, 1],}}});// 创建地图var map = new ol.Map({target: 'map',layers: [layer],view: new ol.View({projection: 'EPSG:4326',center: [120, 30],zoom: 10})});</script>
</body>
</html>

在这里插入图片描述

5、结语

本文主要介绍了OpenLayers中WebGLPoints图层的样式设置方法。其实刚接触样式表达式的时候觉得这种方法很反人类，但是习惯之后发现它的灵活度很高，本文也只列举了一些常见的用法，有兴趣的同志可以去官网查看更详细的文档。

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/news/766763.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

重新排序（蓝桥杯，acwing，差分）

重新排序（蓝桥杯，acwing，差分）

题目描述&#xff1a; 给定一个数组 A 和一些查询 Li,Ri&#xff0c;求数组中第 Li至第 Ri 个元素之和。 小蓝觉得这个问题很无聊&#xff0c;于是他想重新排列一下数组&#xff0c;使得最终每个查询结果的和尽可能地大。 小蓝想知道相比原数组&#xff0c;所有查询结果的总…
阅读更多...
Photoshop 工具使用详解（全集 · 2024版）

Photoshop 工具使用详解（全集 · 2024版）

全面介绍 Photoshop 工具箱里的工具&#xff0c;点击下列表格中工具名称或图示&#xff0c;即可查阅工具的使用详解。 移动工具Move Tool移动选区、图层和参考线。画板工具Artboard Tool创建、移动多个画布或调整其大小。moVe快捷键&#xff1a;V 矩形选框工具 Rectangular Mar…
阅读更多...
信号处理之快速傅里叶变换(FFT)

信号处理之快速傅里叶变换(FFT)

信号处理之快速傅里叶变换FFT 历史溯源欧拉公式傅里叶级数(FS)傅里叶变换(FT)离散傅里叶级数(DFS)离散时间傅里叶变换(DTFT)离散傅里叶变换(DFT)快速傅里叶变换(FFT)MATLAB中常用的FFT工具FFT中常见的问题 历史溯源 相信很多人知道傅里叶变换&#xff0c;但是很多人对傅里叶变…
阅读更多...
EtherCAT主站SOEM -- 20 --Qt-Soem通过 PT模式（力矩模式）控制一个电机转圈圈

EtherCAT主站SOEM -- 20 --Qt-Soem通过 PT模式（力矩模式）控制一个电机转圈圈

EtherCAT主站SOEM -- 20 --Qt-Soem通过 PT模式（力矩模式）控制一个电机转圈圈 0 QT-SOEM视频预览及源代码下载：0.1 QT-SOEM视频预览0.2 QT-SOEM源代码下载PS 特别注意1 程序文件修改替换1.1 allvalue.h1.2 motrorcontrol.h1.3 mainwindow.cpp1.4 motrorcontrol.cpp2 ui界面显…
阅读更多...
【Springboot3+Mybatis】文件上传阿里云OSS 基础管理系统CRUD

【Springboot3+Mybatis】文件上传阿里云OSS 基础管理系统CRUD

文章目录 一、需求&开发流程二、环境搭建&数据库准备三、部门管理四、员工管理4.1 分页(条件)查询4.2 批量删除员工 五、文件上传5.1 介绍5.2 本地存储5.3 阿里云OSS1. 开通OSS2. 创建存储空间Bucket 5.4 OSS快速入门5.5 OSS上传显示文件 六、配置文件6.1 yml配置6.2 C…
阅读更多...
云原生（五）、Docker-Swarm集群

云原生（五）、Docker-Swarm集群

基础环境说明 1、环境准备 1、启动4台服务器&#xff08;在同一个网段内&#xff09;。 2、重命名4台服务器&#xff0c;方便区分。 hostnamectl set-hostname swarm1 reboot安装docker。参考文章&#xff1a;云原生&#xff08;二&#xff09;、Docker基础 2、DockerSwarm…
阅读更多...
Qt打开已有工程方法

Qt打开已有工程方法

在Qt中&#xff0c;对于一个已有工程如何进行打开&#xff1f; 1、首先打开Qt Creator 2、点击文件->打开文件或项目&#xff0c;找到对应文件夹下的.pro文件并打开 3、点击配置工程 这样就打开对应的Qt项目了&#xff0c;点击运行即可看到对应的效果 Qt开发涉及界面修饰…
阅读更多...
Python从入门到精通秘籍十八

Python从入门到精通秘籍十八

一、Python之继承的基础语法 在Python中&#xff0c;继承是面向对象编程的一个重要概念&#xff0c;它允许一个类&#xff08;称为子类&#xff09;从另一个类&#xff08;称为父类或基类&#xff09;继承属性和方法。子类可以使用继承的属性和方法&#xff0c;并且还可以添加…
阅读更多...
jmeter断言使用方法

jmeter断言使用方法

断言主流的有两种&#xff1a;响应断言、JSON断言 响应断言 1、http请求添加响应断言 2、三种作用域&#xff1a;第一种既作用主请求又作用子请求、只作用主请求、只作用子请求。我们默认选中间的仅作用主请求即可。 3、测试字段和匹配规则 测试字段一般选择响应文本即可&am…
阅读更多...
机器学习的步骤与方法

机器学习的步骤与方法

一、引言&#xff1a; 机器学习是人工智能的分支之一&#xff0c;旨在研究如何使计算机系统自主地从数据中学习&#xff0c;并能够根据以往的经验做出预测或决策。现代机器学习主要使用统计学、概率论和优化算法来构建模型和训练算法。 应用场景&#xff1a; 机器学习在众多领…
阅读更多...
web渗透测试漏洞流程：google hacking语法具体语句示例

web渗透测试漏洞流程：google hacking语法具体语句示例

web渗透测试漏洞流程 渗透测试信息收集---域名信息收集2.1.1.3 GoogleHacking用法示例管理后台地址上传类漏洞地址注入页面编辑器页面目录遍历漏洞SQL错误phpinfo()配置文件泄露数据库文件泄露日志文件泄露备份和历史文件泄露公开文件泄露邮箱信息社工信息搜索文件
阅读更多...
备战蓝桥杯D33 - 真题 - 松散子序列

备战蓝桥杯D33 - 真题 - 松散子序列

题目描述 解题思路 ps&#xff1a;思路是我看了大佬的题解后自己的理解&#xff0c;自己给自己捋清楚思路。 1.设置输入&#xff0c;将字符串输入 2.因为输入的是字符&#xff0c;但要找出字符的最大价值&#xff0c;所以先将字符串转化成对应的数值。 这时候就要用到ord函…
阅读更多...
HTTPS协议的工作原理：保护网络通信的安全盾牌

HTTPS协议的工作原理：保护网络通信的安全盾牌

&#x1f90d; 前端开发工程师、技术日更博主、已过CET6 &#x1f368; 阿珊和她的猫_CSDN博客专家、23年度博客之星前端领域TOP1 &#x1f560; 牛客高级专题作者、打造专栏《前端面试必备》 、《2024面试高频手撕题》 &#x1f35a; 蓝桥云课签约作者、上架课程《Vue.js 和 E…
阅读更多...
阿里云4核16G服务器价格26.52元1个月、149.00元半年，ECS经济型e实例

阿里云4核16G服务器价格26.52元1个月、149.00元半年，ECS经济型e实例

阿里云4核16G服务器优惠价格26.52元1个月、79.56元3个月、149.00元半年&#xff0c;配置为阿里云服务器ECS经济型e实例ecs.e-c1m4.xlarge&#xff0c;4核16G、按固定带宽 10Mbs、100GB ESSD Entry系统盘&#xff0c;活动链接 aliyunfuwuqi.com/go/aliyun 活动链接打开如下图&a…
阅读更多...
【计算机网络】常见面试题汇总

【计算机网络】常见面试题汇总

文章目录 1.计算机网络基础1.1网络分层模型/OSI七层模型是什么&#xff1f;1.2TCP/IP四层模型是什么&#xff1f;每一层的作用&#xff1f;1.2.1TCP四层模型&#xff1f;1.2.2为什么网络要分层&#xff1f; 1.2常见网络协议1.2.1应用层常见的协议1.2.2网络层常见的协议 2.HTTP2…
阅读更多...
Spring Boot2

Spring Boot2

SpringBoot 配置文件 properties配置文件 application.properties 以配置端口和访问路径为例 server.port8080 yaml配置文件 application.yml / application.yaml server:port: 81 在实际开发中&#xff0c;更常用的是yaml配置文件 yaml层级表示更加明显 yml配置信息书…
阅读更多...
前端学习之css 定位与浮动

前端学习之css 定位与浮动

定位 <!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><title>定位和浮动</title><style>*{/* 将模块紧紧贴着浏览器边框 */margin: 0;}.c{background-color: blueviolet;width: 100px;height: 1…
阅读更多...
【Tanshtech】生物膜/细胞膜包裹的纳米颗粒的制备

【Tanshtech】生物膜/细胞膜包裹的纳米颗粒的制备

癌症传统治疗的限制性&#xff0c;如化疗产生的非靶向副作用以及肿瘤可能产生的耐药性&#xff0c;使得医生需要在抗肿瘤活性和患者安全之间取得平衡。纳米医学在解决这一问题上发挥了巨大作用&#xff0c;纳米制剂能够被动或主动靶向到肿瘤部位。而纳米载体也被用于提高药物的…
阅读更多...
【VSTO开发】遍历 Ribbon 中的所有控件或按钮

【VSTO开发】遍历 Ribbon 中的所有控件或按钮

在 VSTO&#xff08;Visual Studio Tools for Office&#xff09;中&#xff0c;可以通过代码来遍历 Ribbon 中的所有控件或按钮。可以使用 C# 或 VB.NET 等编程语言来实现这个功能。 下面是一个简单的示例代码&#xff0c;演示如何遍历 Ribbon 中的所有控件或按钮&#xff1a…
阅读更多...
HTTP（2）

HTTP（2）

HTTP 通信过程包括从客户端发往服务器端的请求及从服务器端返回客户端的响应。 那么请求和响应是怎样运作的呢 HTTP 报文 用于 HTTP 协议交互的信息被称为 HTTP 报文。 请求端&#xff08;客户端&#xff09;的HTTP 报文叫做请求报文&#xff0c;响应端&#xff08;服务器…
阅读更多...
最新文章

Copyright @ 2022~2023