OpenLayers实战，WebGL图层根据Feature要素的变量动态渲染多种颜色、不同长度和不同透明度的长方形（矩形）图形，适用于大量矩形图形渲染

原创 已于 2023-11-23 14:03:57 修改 · 1.1k 阅读 · 2 ·
CC 4.0 BY-SA版权
本博客所有文章、代码和作品版权归博主eguid所有，未经博主允许不得私自改编和转载，侵权必究。关注博主微信公众号：eguid
文章标签：

#webgl #图形渲染 #前端 #javascript #OpenLayers #case运算符 #webgl图层样式动态生成

于 2023-11-22 14:13:12 首次发布
本文介绍如何使用OpenLayers的WebGL图层，根据Feature的变量动态渲染不同颜色、长度和透明度的矩形图形。通过运算符和逻辑运算符，实现大量矩形的高效展示，并提供了代码实现和运行效果演示。

专栏目录：
OpenLayers实战进阶专栏目录

前言

本章使用OpenLayers根据Feature要素的变量动态渲染多种颜色、不同长度和不同透明度的矩形（长方形、四边形和正方形）图形。
通过一个WebGL图层生成四种不同颜色、不同大小和不同透明度的矩形图形要素，适用于WebGL图层根据大量点要素区分颜色、区分不同大小和区分透明度显示矩形的需求。

本文使用case运算符结合逻辑运算符生成透明度，match运算符生成多种颜色和interpolate插值运算符生成长度

openlayers

WebGL图层样式运算符详解系列

了解本专栏 订阅专栏 解锁全文
182：vue+openlayers 使用d3实现地图区块呈现不同颜色的效果
大剑师兰特的GIS世界
12-05 1411
本示例的目的是介绍演示如何在vue+openlayers中加载解析geojson文件，同时利用d3的颜色功能，使得美国每个州呈现出不同的颜色区块，方便识别。直接复制下面的 vue+openlayers源代码，操作2分钟即可运行实现效果； 注意如果OpenStreetMap无法加载，请加载其他来练习vue-cli本身是不能够load geojson数据的。需要另外添加loader。在最外层目录中添加 vue.config.js 文件，配置loader。 配置方式 1）查看基础设置：https://xiaozh
OpenLayers实战，WebGL图层根据Feature要素的变量动态渲染多种颜色和不同直径大小的圆形和圆点图形，适用于大量圆形圆点渲染不同颜色不同大小
GIS技术方向，GIS地图技术分享(GIS入门、Openlayers教程、Leaflet教程)，做最好的GIS地图开发教程。关注博主公众号：eguid
11-22 713
本章使用OpenLayers根据Feature要素的变量动态渲染不同颜色和不同直径大小的圆形和圆点图形。通过一个WebGL图层生成四种不同颜色和不同大小的圆形圆点图形要素，适用于WebGL图层需要根据大量点要素区分颜色区分不同大小显示圆形圆点的需求。
OpenLayers基础教程——WebGLPoints图层样式的设置方法
HerryDong的博客
03-25 3915
前一篇博客介绍了如何在中使用加载海量数据点的方法，这篇博客就来介绍一下图层的样式设置问题。在图层中，我们只需要创建一个对象即可，则不同，它并不是基于进行绘制，因此其样式渲染不能直接使用，取而代之的是使用样式运算符进行渲染。 2.2、数学运算符 2.3、变换运算符 2.4、逻辑运算符 2.5、转换运算符 3、简单渲染 简单颜色渲染很简单，只需要使用即可，第一个参数为固定值，后面的参数依次为红、绿、蓝、透明度。下面的代码会将要素渲染为红色点： 运行结果如下图所示：测试数据中的字段将要素分成了类，即：。现
openlayers6【十五】地图样式 Style类详解
热门推荐
@必意玲
07-17 1万+
文章目录1. 写在前面2. ol.style 属性及子类3. ol.style使用栗子 1. 写在前面 地图样式是由 style 类控制的，其包含了地图样式的方方面面，例如，填充色、图标样式、图片样式、规则图形样式、边界样式、文字样式等，样式一般针对矢量要素图层。 了解更多矢量图层可以参考：openlayers6【十三】地图矢量图层 Vector 详解 2. ol.style 属性及子类 1.1 可以配置的选项 /* * @typedef {{ * geometry: (undefined|
openlayers2渐变色渲染
weixin_30379973的博客
07-05 1056
概述在前文中，讲到了oL2中唯一值渲染的实现方式，在本文讲述ol2中渐变色渲染的实现方式。效果代码<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>openlayers map</title> <link...
OpenLayers实战，WebGL图层根据Feature要素的变量动态渲染多种颜色的三角形，适用于大量三角形渲染不同颜色
GIS技术方向，GIS地图技术分享(GIS入门、Openlayers教程、Leaflet教程)，做最好的GIS地图开发教程。关注博主公众号：eguid
11-21 921
本章使用OpenLayers根据Feature要素的变量动态渲染不同颜色的三角形。通过一个WebGL图层生成四种不同颜色的图形要素，适用于WebGL图层需要根据大量点要素区分颜色显示的需求。更多的WebGL图层使用运算符动态生成样式的内容将会陆续更新。## WebGL图层样式运算符详解OpenLayers入门，OpenLayers6的WebGLPointsLayer图层样式运算符详解。
Openlayers：海量图形渲染之WebGL渲染
最新发布
m0_52912501的博客
04-08 1280
最近由于在工作中涉及到了海量图形渲染的问题，因此我开始研究相关的解决方案。我在网络上寻找相关的解决方案时发现许多的文章都提到利用Openlayers中的类，可以实现渲染海量的点，之后我又了解到利用类可以渲染其它的图形。
Openlayers 教程 04 - 图形要素对象 Feature 的移动和编辑
非科班Java出身GISer的博客
06-05 5199
Openlayers 开发中经常会遇到需要操作图形要素 Feature，本示例介绍单体要素 Feature 和 矢量图层所有要素的编辑和平移操作。
OpenLayers6入门，OpenLayers点聚合（聚散点）动态样式，根据周围聚集数量不同切换多种颜色显示，点击聚集点散开和地图放大后显示要素图片
GIS技术方向，GIS地图技术分享(GIS入门、Openlayers教程、Leaflet教程)，做最好的GIS地图开发教程。关注博主公众号：eguid
01-16 769
OpenLayers入门，OpenLayers点聚合（聚散点）功能，地图缩小显示聚集数量，点击聚集点散开和地图放大后显示要素图片》，我们已经实现了简单的点聚合功能。本章在上一章基础上增加更多动态效果，如根据周围聚集数量不同切换多种颜色显示功能。
Openlayers 教程 05 - feature（图形要素）点击和双击事件
非科班Java出身GISer的博客
09-08 4404
Openlayers 教程 - feature（图形要素）点击和双击事件。
基于openlayers实现点密度、分级渲染等专题图
10-16
基于openlayers实现点密度、比例符号、分级渲染等专题图，效果还不错，里面附带演示数据。
ol3-dem, OpenLayers 3用于地形数据 使用webgl渲染数字高程模型.zip
10-10
ol3-dem, OpenLayers 3用于地形数据 使用webgl渲染数字高程模型 ##ol3-dem 不再被维护： 基于ol3-dem的弹性地形图 。这是一个 fork 3.1.1的实验，用于呈现计划斜面的数字高程模型。特性平面斜浮雕Hypsometric染色Waterbody检测山麓阴影演示查看现
openlayers结合原生webgl 图像的动态绘制tin数据保持清晰度
q1025387665a的博客
03-25 2038
前言：此文章的内容涉及两个部分内容，主体为webgl内容，主要提供一个思路、解决方案。相关的需求是这么回事： 地图放大缩小时，图像不能失真。即： 缩放有图像颜色的那一部分时，不可以失真。也就是说不能贴一张静态的图片，而需要监听地图的缩放、拖拽，动态的绘制当前视口内的图像。下图为实际效果。 转载请著名出处。 原生webgl绘制tin数据 一个webgl的渲染环境 应该包含：着色器的设置、缓冲数据的设置、根据数据绘制，渲染该图像。 着色器设置 以下代码做了： 1、将着色器的代码赋给shader。2、编译
Vue.js与OpenLayers结合实现圆形的径向渐变填充色
CodeWhizZ的博客
09-03 439
以上就是使用Vue.js和OpenLayers绘制带有径向渐变填充色的圆形的完整过程。通过Vue.js的组件化开发和OpenLayers强大的地图功能，我们可以轻松实现丰富多样的地图可视化效果。Vue.js和OpenLayers是目前非常流行的前端开发框架和地图库，它们各自有着强大的功能和灵活性。在本文中，我们将探讨如何使用Vue.js和OpenLayers来绘制带有径向渐变填充色的圆形。首先，我们需要创建一个基于Vue.js的项目，并在其中引入OpenLayers库。至此，我们已经完成了代码的编写。
252：vue+openlayers 绘制锥形渐变填充色的圆形
大剑师兰特的GIS世界
01-17 796
本示例的目的是介绍如何在vue+openlayer中绘制带有锥形渐变填充色的圆形。
Openlayers记录（四）同一图层设置不同的点符号（大小、颜色等）。
qq_42590021的博客
07-13 3394
Openlayers记录（四）同一图层设置不同的点符号（大小、颜色等），弹窗显示。 1.实现效果 1.1点符号设置 1.2弹窗效果 2.实现的符号设置代码 /*****************标记部分****************************/ var features1 = []; for (var i = 0; i < dataSource.items.length; i++) { var coordinate = [lat[i], lon[i
40-OpenLayers6入门，使用webgl图层叠加大量Point点要素，解决叠加超过一百万数据量点位导致浏览器卡住变慢的问题
fxshy的博客
06-02 490
40-OpenLayers6入门，使用webgl图层叠加大量Point点要素，解决叠加超过一百万数据量点位导致浏览器卡住变慢的问题
openlayer6修改地图颜色
weixin_44959346的博客
05-31 963
有位老哥需要先拍在这，完事更新细节，重点是中间的函数 this.tileLayer = new TileLayer({ source: new XYZ({ url: this.urlTiandi + this.keyTiandi, layer: 'img', style: 'default', matrixSet: 'c', format: 'tiles', wrapX: false, tileLoadFunction: function(im.
openlayer 渐变线
josiecici的博客
04-24 1351
// 渐变色 // 基础线样式参考默认样式即可 function lineStyle() { //渐变色线 let styleLine = []; let steps = 10; // 渐变色原理，其实就是多个样式共同使用 for (let i = 0; i < steps; i++) { styleLine.push( new ol.styl...
openlayers给不同Feature 设置颜色
03-13
嗯，用户问的是如何在OpenLayers中给不同的Feature设置颜色。我需要先回顾一下OpenLayers的相关知识。首先，Feature在OpenLayers中通常表示地图上的元素，比如点、线、面。要设置颜色，应该涉及到样式（Style）的...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

汤姆猫不是猫

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值