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

news2024/11/19 6:15:58

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、结语

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

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

【QT+QGIS跨平台编译】之九十:【QGIS_Crashhandler+Qt跨平台编译】(一套代码、一套框架,跨平台编译)

文章目录 一、QGIS_Crashhandler介绍二、QGIS下载三、文件分析四、pro文件五、编译实践一、QGIS_Crashhandler介绍 QGIS_Crashhandler模块是QGIS中的一个重要组成部分,它提供了QGIS程序的错误崩溃处理与跟踪。 二、QGIS下载 QGIS网址: QGIS Source Download 获取最新版本的…

iOS UIFont-新增第三方字体

背景 在项目中添加三方字体&#xff0c;是在开发中比较常见的需求&#xff0c;每次新增字体&#xff0c;都会遗忘其中某个步骤&#xff0c;又要去百度一下才能把字体添加使用成功。每次这样有点浪费时间和打击自信&#xff0c;于是便想着&#xff0c;自己好好来理一理新增字体…

ubuntu arm qt 读取execl xls表格数据

一&#xff0c;ubuntu linux pc编译读取xls的库 1&#xff0c;安装libxls(读取xls文件 电脑版) 确保你已经安装了基本的编译工具&#xff0c;如gcc和make。如果没有安装&#xff0c;可以使用以下命令安装&#xff1a; sudo apt-update sudo apt-get install build-essentia…

康奋威科技邀您到场参观2024长三角快递物流展

参展企业介绍 杭州康奋威科技股份有限公司创立于2005年&#xff0c;由国家“万人计划”专家任天挺先生创立并担任法人&#xff0c;是一家专业从事智能装备研发与制造的国家级高新技术企业。专注于自动化控制、机械设计、信息化方面的技术研究&#xff0c;主要为太阳能光伏、智…

深入理解Redis的Sentinel机制

Sentinel简述 Sentinel为了解决什么问题&#xff1f; Sentinel&#xff08;哨岗、哨兵&#xff09;是Redis的高可用性&#xff08;high availability&#xff09;解决方案。 我们知道Redis 的主从复制模式可以将主节点的数据改变同步给从节点&#xff0c;这样从节点就可以起…

C/C++之内存旋律:星辰大海的指挥家

个人主页&#xff1a;日刷百题 系列专栏&#xff1a;〖C/C小游戏〗〖Linux〗〖数据结构〗 〖C语言〗 &#x1f30e;欢迎各位→点赞&#x1f44d;收藏⭐️留言&#x1f4dd; ​ ​ 一、C/C内存分布 我们先来了解一下C/C内存分配的几个区域&#xff0c;以下面的代码为例来看…

Cmake和opencv环境安装

1 Cmake下载及安装 Download CMake 根据需要下载&#xff0c;历史版本下载方法如下 CMake 的版本号中的后缀 "rc1" 和 "rc2" 表示 Release Candidate 1 和 Release Candidate 2&#xff0c;它们都是候选版本&#xff0c;用于测试新功能和修复 bug。通常情…

目标检测的指标评估

目标检测模型的评价指标主要用于衡量模型的性能&#xff0c;特别是它在定位和识别目标方面的准确性。以下是一些常见的评价指标&#xff1a; 1. 精确度 (Precision): 表示检测到的目标中&#xff0c;正确检测到的目标所占的比例。精确度高意味着模型产生的误报&#xff08;错误…

精神暴力的来源与解药

导致人生病的&#xff0c;不仅是病毒或细菌&#xff0c;也有精神暴力。与病毒破坏物理肌体、摧毁生命不同&#xff0c;精神暴力是让人们在过度的自我狂热中燃尽自我、而毁灭自身的。 21世纪以来&#xff0c;精神方面的疾病越来越多&#xff0c;为什么这样呢&#xff1f;大的背景…

fiddler过滤器使用,隐藏图片、js、css请求

如果抓包过程中不想查看图片、js、css请求&#xff0c;或者只想抓某个ip或者某个网页下的请求&#xff0c;可以在过滤器中设置。 &#xff08;1&#xff09;没有开启过滤器 可以看出所有的请求都会抓取&#xff0c;cs、js、图片请求都有 &#xff08;2&#xff09;开启过滤器 …

代码随想录算法训练营Day55 ||leetCode 583. 两个字符串的删除操作 || 72. 编辑距离

583. 两个字符串的删除操作 这道题的状态方程比上一题简单一些 初始化如下 class Solution { public:int minDistance(string word1, string word2) {vector<vector<int>> dp(word1.size() 1, vector<int>(word2.size() 1));for (int i 0; i < word1…

Kotlin零基础入门到进阶实战

教程介绍 Kotlin现在是Google官方认定Android一级开发语言&#xff0c;与Java100%互通&#xff0c;并具备诸多Java尚不支持的新特性&#xff0c;每个Android程序员必备的Kotlin课程&#xff0c;每个Java程序员都需要了解的Kotlin&#xff0c;掌握kotlin可以开发Web前端、Web后…

计算机网络:物理层下的传输媒体概览

✨✨ 欢迎大家来访Srlua的博文&#xff08;づ&#xffe3;3&#xffe3;&#xff09;づ╭❤&#xff5e;✨✨ &#x1f31f;&#x1f31f; 欢迎各位亲爱的读者&#xff0c;感谢你们抽出宝贵的时间来阅读我的文章。 我是Srlua小谢&#xff0c;在这里我会分享我的知识和经验。&am…

基于springboot和vue的旅游资源网站的设计与实现

环境以及简介 基于vue, springboot旅游资源网站的设计与实现&#xff0c;Java项目&#xff0c;SpringBoot项目&#xff0c;含开发文档&#xff0c;源码&#xff0c;数据库以及ppt 环境配置&#xff1a; 框架&#xff1a;springboot JDK版本&#xff1a;JDK1.8 服务器&#xf…

【暴刷力扣】11. 盛最多水的容器

11. 盛最多水的容器 题目 给定一个长度为 n 的整数数组 height 。有 n 条垂线&#xff0c;第 i 条线的两个端点是 (i, 0) 和 (i, height[i]) 。 找出其中的两条线&#xff0c;使得它们与 x 轴共同构成的容器可以容纳最多的水。 返回容器可以储存的最大水量。 说明&#xf…

pytest之fixture结合conftest.py文件使用+断言实战

pytest之fixture结合conftest.py文件使用 conftest.py--存放固件固件的优先级pytest执行流程pytest之断言实战pytest结合allure-pytest插件生成美观的报告 conftest.py–存放固件 在一个项目的测试中&#xff0c;大多数情况下会有多个类、模块、或者包要使用相同的测试夹具。这…

更改默认的网络状态页面

目录 网络状态码 概念 分类 详解 页面更改 场景 步骤 网络状态码 概念 当浏览者访问一个网页时&#xff0c;浏览者的浏览器会向网页所在服务器发出请求。当浏览器接收并显示网页前&#xff0c;此网页所在的服务器会返回一个包含HTTP状态码的信息头用以响应浏览器的请求…

阿里云效流水线—发布公用jar到Maven私仓

后端项目发布 1.选择流水线 2.新建流水线 3.选择模板 4.选择代码仓库 5.调整构建命令 添加mvn install 重新构建项目 6.添加镜像 在wms-app目录下新建Dockerfile文件(Dockerfile文件名中的D一定要是大写的&#xff09;文件&#xff0c;重新推送项目 #基础镜像 FROM openjd…

公司调研 | 空间机械臂GITAI | 日企迁美

最近做的一些公司 / 产品调研没有从技术角度出发&#xff0c;而更关注宏观发展&#xff1a;主营方向、产品介绍、商业化落地情况、融资历程、公司愿景、创始人背景等。部分调研放在知乎上&#xff0c;大部分在飞书私人链接上 最近较关注人形Robot的发展情况&#xff0c;欢迎感兴…

kali安装docker(亲测有效)

第一步&#xff1a;添加Docker官方的GPG密钥 curl -fsSL https://download.docker.com/linux/debian/gpg | sudo apt-key add - 第二步&#xff1a; 第二步更新源 echo deb https://download.docker.com/linux/debian stretch stable> /etc/apt/sources.list.d/docker.list…