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，一经查实，立即删除！

相关文章

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;但是很多人对傅里叶变…
阅读更多...
【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开发涉及界面修饰…
阅读更多...
jmeter断言使用方法

jmeter断言使用方法

断言主流的有两种&#xff1a;响应断言、JSON断言 响应断言 1、http请求添加响应断言 2、三种作用域&#xff1a;第一种既作用主请求又作用子请求、只作用主请求、只作用子请求。我们默认选中间的仅作用主请求即可。 3、测试字段和匹配规则 测试字段一般选择响应文本即可&am…
阅读更多...
备战蓝桥杯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…
阅读更多...
前端学习之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;纳米制剂能够被动或主动靶向到肿瘤部位。而纳米载体也被用于提高药物的…
阅读更多...
HTTP（2）

HTTP（2）

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

静态路由综合实验

一.实验拓扑图 二.实验要求 1、R6为ISP&#xff0c;接口IP地址均为公有地址&#xff0c;该设备只能配置IP地址&#xff0c;之后不能再对其进行任何配置&#xff1b; 2、R1-R5为局域网&#xff0c;私有IP地址192.168.1.0/24&#xff0c;请合理分配&#xff1b; 3、R1、R2、R…
阅读更多...
亚马逊云科技《生成式 AI 精英速成计划》

亚马逊云科技《生成式 AI 精英速成计划》

最近亚马逊云科技推出了「生成式AI精英速成计划」&#xff0c;获取包含&#xff1a;免费学习热门生成式AI课程、技能证书、人力主管的面试辅导、云计算国际认证、免费去往北美参加全球用户大会等&#xff5e; 针对开发者和企业非技术专业人士&#xff0c;了解如何使用大模型平台…
阅读更多...
OpenCV学习笔记（十一）——利用Sobel算子计算梯度

OpenCV学习笔记（十一）——利用Sobel算子计算梯度

Sobel算子是基于一阶导数的离散差分算子&#xff0c;其中Sobel对于像素值的变化是十分敏感的&#xff0c;在进行边缘检测的时候&#xff0c;Sobel算子常用于对周围像素的重要性进行检测。 Sobel算子包括检验水平方向的算子和检测竖直方向的算子 计算机梯度值的操作如下&#x…
阅读更多...
Java设计模式 | 抽象工厂模式

Java设计模式 | 抽象工厂模式

抽象工厂模式 工厂方法模式中考虑的是一类产品的生产&#xff0c;如幼儿园只培养小朋友&#xff0c;鞋厂只生产鞋子。这些工厂只生产同种类产品&#xff0c;同种类产品称为同等级产品&#xff0c;即工厂方法模式只考虑生产同等级的产品&#xff0c;但是在现实生活中许多工厂都…
阅读更多...
【计算机网络】计算机网络概述

【计算机网络】计算机网络概述

文章目录 一、计算机网络的概念二、 计算机网络的功能1. 数据通信2. 资源共享3. 分布式处理4. 提高可靠性5. 负载均衡 补充&#xff1a; 计算机的发展阶段小结三、计算机网络的组成1. 组成部分2. 工作方式3. 功能组成 四、 计算机网络的分类1. 按分布范围2. 按使用者3. 按交换技…
阅读更多...
Docker 【通过Dockerfile构建镜像】【docker容器与镜像的关系】

Docker 【通过Dockerfile构建镜像】【docker容器与镜像的关系】

文章目录 前言一、前期的准备工作二、上手构建一个简单的镜像三、DcokerFile1 指令总览2 指令详情 四、Dockerfile文件规范五、docker运行build时发生了什么?六、调试手段1. 修改镜像打包后&#xff0c;如何验证新内容已更新至镜像 七、Dockerfile优化方案 前言 docker构建镜…
阅读更多...
JavaEE-文件操作和IO

JavaEE-文件操作和IO

我们先来认识狭义上的⽂件(file)。针对硬盘这种持久化存储的I/O设备&#xff0c;当我们想要进⾏数据保存时&#xff0c;往往不是保存成⼀个整体&#xff0c;⽽是独⽴成⼀个个的单位进⾏保存&#xff0c;这个独⽴的单位就被抽象成⽂件的概念&#xff0c;就类似办公桌上的⼀份份真…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023