OpenLayers基础教程——WebGLPoints设置不同图标样式的方法

1、前言

OpenLayers中,WebGLPointsVectorLayer设置不同图标样式的方法有所不同。本文就来介绍一下如何在WebGLPoints图层中根据要素类型设置不同的图标样式。

2、ol.layer.Vector的实现方法

ol.layer.Vector设置不同图标的样式很简单,直接上代码:

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</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 vectorLayer = new ol.layer.Vector({source: new ol.source.Vector({features: [new ol.Feature({geometry: new ol.geom.Point(ol.proj.transform([120.00, 30.00], "EPSG:4326", "EPSG:3857")),type: 1}),new ol.Feature({geometry: new ol.geom.Point(ol.proj.transform([120.02, 30.02], "EPSG:4326", "EPSG:3857")),type: 2}),new ol.Feature({geometry: new ol.geom.Point(ol.proj.transform([120.04, 30.04], "EPSG:4326", "EPSG:3857")),type: 3}),new ol.Feature({geometry: new ol.geom.Point(ol.proj.transform([120.06, 30.06], "EPSG:4326", "EPSG:3857")),type: 4}),new ol.Feature({geometry: new ol.geom.Point(ol.proj.transform([120.08, 30.08], "EPSG:4326", "EPSG:3857")),type: 5})]}),style: function (feature, resolution) {var type = feature.get("type");var src = "";if (type == 1) {src = "img/1.png";} else if (type == 2) {src = "img/2.png";} else if (type == 3) {src = "img/3.png";} else if (type == 4) {src = "img/4.png";} else {src = "img/5.png";}return new ol.style.Style({image: new ol.style.Icon({src: src})});}})// 创建地图var map = new ol.Map({target: "map",layers: [vectorLayer],view: new ol.View({projection: "EPSG:3857",center: ol.proj.transform([120, 30], "EPSG:4326", "EPSG:3857"),zoom: 10,minZoom: 7,maxZoom: 18})});</script>
</body>
</html>

运行结果如下图所示:

在这里插入图片描述

3、ol.layer.WebGLPoints的实现方法

WebGLPoints采用样式表达式的方法来渲染要素,所以很多同志都会想到:用match表达式来做不就行了吗?所以有如下错误代码:

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</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 vectorLayer = new ol.layer.WebGLPoints({source: new ol.source.Vector({features: [new ol.Feature({geometry: new ol.geom.Point(ol.proj.transform([120.00, 30.00], "EPSG:4326", "EPSG:3857")),type: 1}),new ol.Feature({geometry: new ol.geom.Point(ol.proj.transform([120.02, 30.02], "EPSG:4326", "EPSG:3857")),type: 2}),new ol.Feature({geometry: new ol.geom.Point(ol.proj.transform([120.04, 30.04], "EPSG:4326", "EPSG:3857")),type: 3}),new ol.Feature({geometry: new ol.geom.Point(ol.proj.transform([120.06, 30.06], "EPSG:4326", "EPSG:3857")),type: 4}),new ol.Feature({geometry: new ol.geom.Point(ol.proj.transform([120.08, 30.08], "EPSG:4326", "EPSG:3857")),type: 5})]}),style: {symbol: {symbolType: "image",src: ["match", ["get", "type"],1, "img/1.png",2, "img/2.png",3, "img/3.png",4, "img/4.png",5, "img/5.png","img/1.png",],size: [32, 32]}}})// 创建地图var map = new ol.Map({target: "map",layers: [vectorLayer],view: new ol.View({projection: "EPSG:3857",center: ol.proj.transform([120, 30], "EPSG:4326", "EPSG:3857"),zoom: 10,minZoom: 7,maxZoom: 18})});</script>
</body>
</html>

运行结果如下图所示:

在这里插入图片描述
很明显,通过match表达式无法得到我们想要的结果,此时就需要使用textureCoord属性了。之前的代码使用532x32图片来分别表示不同的要素类型,如下图所示:

在这里插入图片描述
现在将这5张图片拼接成1张大图,这张大图的尺寸就是160x32,如下图所示:

在这里插入图片描述
1个图标占据的位置可表示为:[0/160, 0/32, 32/160, 32/32],也就是[0.0, 0.0, 0.2, 1.0],以此类推,这5个图标占据的位置如下所示:

第1个图标:[0.0, 0.0, 0.2, 1.0]
第2个图标:[0.2, 0.0, 0.4, 1.0]
第3个图标:[0.4, 0.0, 0.6, 1.0]
第4个图标:[0.6, 0.0, 0.8, 1.0]
第5个图标:[0.8, 0.0, 1.0, 1.0]

然后使用textureCoord属性,代码如下:

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</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 vectorLayer = new ol.layer.WebGLPoints({source: new ol.source.Vector({features: [new ol.Feature({geometry: new ol.geom.Point(ol.proj.transform([120.00, 30.00], "EPSG:4326", "EPSG:3857")),type: 1}),new ol.Feature({geometry: new ol.geom.Point(ol.proj.transform([120.02, 30.02], "EPSG:4326", "EPSG:3857")),type: 2}),new ol.Feature({geometry: new ol.geom.Point(ol.proj.transform([120.04, 30.04], "EPSG:4326", "EPSG:3857")),type: 3}),new ol.Feature({geometry: new ol.geom.Point(ol.proj.transform([120.06, 30.06], "EPSG:4326", "EPSG:3857")),type: 4}),new ol.Feature({geometry: new ol.geom.Point(ol.proj.transform([120.08, 30.08], "EPSG:4326", "EPSG:3857")),type: 5})]}),style: {symbol: {symbolType: "image",src: "img/big.png",size: [32, 32],textureCoord: ["match",["get", "type"],1, [0.0, 0.0, 0.2, 1.0],2, [0.2, 0.0, 0.4, 1.0],3, [0.4, 0.0, 0.6, 1.0],4, [0.6, 0.0, 0.8, 1.0],5, [0.8, 0.0, 1.0, 1.0],[0.0, 0.0, 0.2, 1.0]],}}})// 创建地图var map = new ol.Map({target: "map",layers: [vectorLayer],view: new ol.View({projection: "EPSG:3857",center: ol.proj.transform([120, 30], "EPSG:4326", "EPSG:3857"),zoom: 10,minZoom: 7,maxZoom: 18})});</script>
</body>
</html>

运行结果如下图所示:

在这里插入图片描述

4、结语

本文主要介绍了WebGLPoints图层中设置不同图标样式的方法。本质上就是把小图标合成一张大图,最后按照纹理位置读取即可。

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

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

相关文章

浅谈Kubernetes(K8s)之RC控制器与RS控制器

1.RC控制器 1.1RC概述 Replication Controller 控制器会持续监控正在运行的Pod列表&#xff0c;并保证相应类型的Pod的数量与期望相符合&#xff0c;如果Pod数量过少&#xff0c;它会根据Pod模板创建新的副本&#xff0c;反之则会删除多余副本。通过RC可实现了应用服务的高可用…

es 3期 第14节-全文文本分词查询

#### 1.Elasticsearch是数据库&#xff0c;不是普通的Java应用程序&#xff0c;传统数据库需要的硬件资源同样需要&#xff0c;提升性能最有效的就是升级硬件。 #### 2.Elasticsearch是文档型数据库&#xff0c;不是关系型数据库&#xff0c;不具备严格的ACID事务特性&#xff…

如何保证消息队列的高可用?(RabbitMQ)

RabbitMQ 是基于主从&#xff08;非分布式&#xff09;做高可用性的&#xff0c;RabbitMQ 有三种模式&#xff1a;单机模式、普通集群模式、镜像集群模式 1、单机模式&#xff1a;一般没人生产用单机模式 2、普通集群模式&#xff1a; 普通集群模式用于提高系统的吞吐量&…

CAPL如何设置或修改CANoe TCP/IP协议栈的底层配置

在CANoe中创建网络节点作为以太网主机时,可以给其配置独立的TCP/IP Stack。 配置的协议栈有一些底层配置参数可以在界面上设置或修改,比如: MTU上图中MTU显示500只是图形界面显示错误,正确值是1500。 TCP延迟确认这些参数也可以通过CAPL动态配置,甚至CAPL还可以配置很多界…

Linux中vi和vim的区别详解

文章目录 Linux中vi和vim的区别详解一、引言二、vi和vim的起源与发展三、功能和特性1、语法高亮2、显示行号3、编辑模式4、可视化界面5、功能扩展6、插件支持 四、使用示例1、启动编辑器2、基本操作 五、总结 Linux中vi和vim的区别详解 一、引言 在Linux系统中&#xff0c;vi和…

如何将自己的PHP类库发布到composer仓库

将自己的 PHP 类库发布到 Composer 仓库&#xff0c;需要经过一系列的准备和操作步骤&#xff0c;以下是详细说明&#xff1a; 准备工作 创建类库项目&#xff1a;确保你的 PHP 类库项目具有清晰的目录结构&#xff0c;遵循 PSR-4 等 PHP 编码规范。通常&#xff0c;类文件应…

android——录制屏幕

录制屏幕 1、界面 2、核心代码 import android.app.NotificationChannel import android.app.NotificationManager import android.app.PendingIntent import android.app.Service import android.content.Context import android.content.Intent import android.graphics.Bi…

自学高考的挑战与应对:心理调适、学习方法改进与考试技巧提升

一、自学参加高考的成功条件 &#xff08;一&#xff09;报名条件 基本要求 自学参加高考&#xff0c;首先需严格遵守国家的法律法规&#xff0c;这是参与高考的基本前提。具备高中同等学力是核心要素之一&#xff0c;意味着考生需通过自学掌握高中阶段的知识体系与学习能力…

SQL语句错误号:Incorrect integer value: ‘‘ for column ‘poi_id‘ at

SQL语句错误号&#xff1a;Incorrect integer value: for column poi_id at通用解决方案 在MySQL 5.7中&#xff0c;如果你遇到 Incorrect integer value: for column poi_id at row 1 错误&#xff0c;这通常意味着你尝试将一个空字符串插入到需要整数值的字段中。以下是几…

【密码学】SM4算法

一、 SM4算法简介 SM4算法是中国国家密码管理局于2012发布的一种分组密码算法&#xff0c;其官方名称为SMS4&#xff08;SMS4.0&#xff09;&#xff0c;相关标准为GM/T 0002-2012《SM4分组密码算法》。SM4算法的分组长度和密钥长度均为128比特,采用非平衡Feistel结构。采用32…

Qt Xlsx安装教程

Qt Xlsx安装教程 安装perl 如果没有安装perl&#xff0c;请参考perl Window安装教程 下载QtXlsxWriter源码 下载地址 ming32-make编译32 lib库 C:\Qt\Qt5.12.12\5.12.12\mingw73_32>d: D:\>cd D:\Code\QtXlsxWriter-master\QtXlsxWriter-master D:\Code\QtXlsxWrit…

1. 机器学习基本知识(3)——机器学习的主要挑战

1.5 机器学习的主要挑战 1.5.1 训练数据不足 对于复杂问题而言&#xff0c;数据比算法更重要但中小型数据集仍然很普遍&#xff0c;获得额外的训练数据并不总是一件轻而易举或物美价廉的事情&#xff0c;所以暂时不要抛弃算法。 1.5.2 训练数据不具有代表性 采样偏差&#…

通配符SSL证书申请

一、通配符SSL证书点击DV类型通配符SSL证书 二、点击立即生成证书&#xff0c;可以自己在线生成CSR提交&#xff0c;生成的时候私钥代码保存一下。 三、点击继续【建议选择DNS&#xff0c;DNS是指域名解析方式认证】 四、然后去域名注册商添加解析&#xff0c;解析如果可以设置…

个人ffmpeg笔记(一)

环境安装 QT环境安装 运行qt…run安装 下载地址&#xff1a;https://download.qt.io/archive/qt/ 下载地址&#xff1a;https://download.qt.io/archive/qt/5.12/5.12.10/ sudo apt install --reinstall libxcb-xinerama0 解决xcb问题 Ubuntu16.04打开Qt显示/home/user/.co…

JavaEE之多线程的风险以及如何避免

上文我们了解了单线程以及线程的一些基本常见方法&#xff0c;但是多线程在一些方面会存在安全问题&#xff0c;此文我们来为多线程的安全 保驾护航&#xff01;&#xff01; 详情请见下文 1. 多线程带来的风险——线程安全 1.1 观察线程不安全 /*** 使用两个线程&#xff0c…

LoViT: 用于手术阶段识别的长视频Transformer|文献速递-生成式模型与transformer在医学影像中的应用

Title 题目 LoViT: Long Video Transformer for surgical phase recognition LoViT: 用于手术阶段识别的长视频Transformer 01 文献速递介绍 快速发展的手术数据科学&#xff08;SDS&#xff09;领域旨在通过先进利用手术室&#xff08;OR&#xff09;内医疗设备采集的数据…

pika:适用于大数据量持久化的类redis组件|简介及安装(一)

文章目录 0. 引言1. pika简介2. pika安装3. pika设置开机自启4. pika主从搭建5. pika哨兵模式实现自动容灾总结 0. 引言 最近因为公司中用到pika组件&#xff0c;于是将研究过程和理解进行系统记录&#xff0c;以供后续参考。 1. pika简介 pika是360开发的一款国产类redis的…

LNMP和Discuz论坛

文章目录 LNMP和Discuz论坛1 LNMP搭建1.1 编译安装nginx服务1.1.1 编译安装1.1.2 添加到系统服务 1.2 编译安装MySQL服务1.2.1 准备工作1.2.2 编辑配置文件1.2.3 设置路径环境变量1.2.4 数据库初始化1.2.5 添加mysqld系统服务1.2.6 修改mysql的登录密码 1.3 编译安装PHP服务1.3…

Yocto 项目运行超出 BitBake 范围的内容

尽管 Yocto 项目依赖 BitBake 解析和调度元数据来完成构建&#xff0c;但在实际开发中&#xff0c;可能需要执行超出 BitBake 直接管理范围的任务。例如&#xff0c;调用外部脚本或工具完成一些特定的处理逻辑&#xff0c;如生成配置文件、执行硬件初始化脚本或调用第三方构建工…

SpringBoot+OSS文件(图片))上传

SpringBoot整合OSS实现文件上传 以前,文件上传到本地(服务器,磁盘),文件多,大,会影响服务器性能 如何解决? 使用文件服务器单独存储这些文件,例如商业版–>七牛云存储,阿里云OSS,腾讯云cos等等 也可以自己搭建文件服务器(FastDFS,minio) 0 过程中需要实名认证 … 1 开…