OpenLayers实战，WebGL图层根据Feature要素的变量动态渲染多种颜色和不同直径大小的圆形和圆点图形，适用于大量圆形圆点渲染不同颜色不同大小

已于 2023-11-23 14:03:36 修改
阅读量386 收藏 1
点赞数 2
分类专栏： Vue+OpenLayers6入门到实战 # Vue+OpenLayers6实战 OpenLayers6一本通 文章标签： webgl GIS vue OpenLayers webgl运算符 不同颜色不同大小
于 2023-11-22 10:09:06 首次发布
本博客所有文章、代码和作品版权归eguid所有，未经博主允许不得私自改编和转载，侵权必究。
本文链接：https://blog.csdn.net/eguid/article/details/134546707
版权
OpenLayers6一本通 同时被 3 个专栏收录
132 篇文章 10 订阅 ¥159.90 ¥99.00
订阅专栏
Vue+OpenLayers6入门到实战
121 篇文章 64 订阅 ¥119.90 ¥99.00
订阅专栏
Vue+OpenLayers6实战
53 篇文章 34 订阅 ¥69.90 ¥99.00
订阅专栏

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

前言

本章使用OpenLayers根据Feature要素的变量动态渲染不同颜色和不同直径大小的圆形和圆点图形。
通过一个WebGL图层生成四种不同颜色和不同大小的圆形圆点图形要素，适用于WebGL图层需要根据大量点要素区分颜色区分不同大小显示圆形圆点的需求。

openlayers

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

了解本专栏 订阅专栏 解锁全文
汤姆猫不是猫
关注
  • 2
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 6
    评论
专栏目录
订阅专栏
OpenLayers入门，webgl图层叠加大量Icon图片到地图，解决叠加超大数据量图片导致浏览器卡住变慢的问题
GIS地图技术分享(GIS入门、Openlayers教程、Leaflet教程)，做最好的GIS地图开发教程
04-13 1334
上一章中《OpenLayers入门，使用webgl图层叠加大量点要素，解决OpenLayers地图中叠加大量点导致浏览器卡住变慢的问题》已经讲了如何地图中如何添加大量点到webgl图层优化大量点浏览器页面卡顿的问题，本章补充一下叠加图片图标到地图的情况下。
Openlayers layer 基础及重点内容讲解
大剑师兰特的GIS世界
07-19 1283
图层就像是含有文字或图形等元素的图片，一张张按顺序叠放在一起，组合起来形成页面的最终效果。在 openlayers 中，图层是使用 layer 对象表示的，主要有 WebGLPoints Layer、热度图(HeatMap Layer)、图片图层(Image Layer)、切片图层(Tile Layer)和 矢量图层(Vector Layer)五种类型，它们都是继承 Layer 类的。
OpenLayers WebGL瓦片图层和样式
GIS小虫的博客
03-24 3489
OpenLayers WebGL瓦片图层简介和样式
【openlayers系统学习】3.5colormap详解（颜色映射）
weixin_45213317的博客
05-23 998
在openlayers中通过 colormap 包定义图层样式的颜色表达式。并详细介绍colormap 的使用。
OpenLayers基础教程——WebGLPoints图层样式的设置方法
HerryDong的博客
03-25 2133
前一篇博客介绍了如何在中使用加载海量数据点的方法，这篇博客就来介绍一下图层的样式设置问题。在图层中，我们只需要创建一个对象即可，则不同，它并不是基于进行绘制，因此其样式渲染不能直接使用，取而代之的是使用样式运算符进行渲染。 2.2、数学运算符 2.3、变换运算符 2.4、逻辑运算符 2.5、转换运算符 3、简单渲染 简单颜色渲染很简单，只需要使用即可，第一个参数为固定值，后面的参数依次为红、绿、蓝、透明度。下面的代码会将要素渲染为红色点： 运行结果如下图所示：测试数据中的字段将要素分成了类，即：。现
openlayers点图元渲染及画圆
苟冬新
03-31 1349
下面是openlayers点图元渲染效果图及在4326坐标系中画圆效果图。 因为功能需要所以写的可能有点麻烦，只截取了方法实现的代码。 // 渲染点图标及画圆 renderIcon(rows) { let rows = {}; rows.centerPoint = "116.64560693, 40.05946214"; let self = this; self.vectorSource = new VectorSource(); // 图元数据源 self
Openlayers根据geojson格式数据渲染聚合图
01-06
geojson作为webGIS较常用的数据格式，没有给定如何将geojson格式渲染为聚合图的示例，因此本示例将Openlayers官网提供的geojson格式数据加载示例与聚合图渲染示例结合，形成根据geojson格式数据渲染聚合图的示例。
OpenLayers实现图层切换控件
10-14
在OpenLayers中，图层切换控件是用于让用户在多个图层之间自由切换的重要功能。由于OpenLayers库本身并未直接提供这样的控件，开发者需要自定义来实现这一功能。本文将详细介绍如何利用OpenLayers创建一个图层切换...
ol-games:适用于Openlayers的游戏资料，由HTML5，canvas，javascript和Openlayers提供支持
05-04
该项目旨在测试和添加Openlayers（ol）中的游戏机制。 它绝不是一个完整的游戏或完整的游戏引擎，但您应该在使用Openlayers的地图上找到一些可以玩游戏的东西。 依存关系 该项目使用和 。 在发展了Hexagnol网格...
Openlayers+EasyUI Tree动态实现图层控制
10-14
在本文中，我们将深入探讨如何使用OpenLayers和EasyUI Tree组件动态实现图层控制。OpenLayers是一个强大的JavaScript库，用于创建交互式地图应用，而EasyUI Tree则是一个基于jQuery的UI组件，提供树形结构的界面，...
天地图开发实战：Vue结合OpenLayers实现动态点位地图
最新发布
06-06
通过这个实战案例，读者将学习到如何集成天地图服务，并在地图上动态展示和更新点位信息。 主要内容： OpenLayers库的引入：文章首先介绍了如何导入OpenLayers的核心模块，包括地图(Map)、视图(View)、图层(Layer)...
OpenLayers_2.10_Beginners_Guide_Code
10-23
OpenLayers_2.10_Beginners_Guide_Code OpenLayers 初学者手册教程中附带的代码
四、OpenLayer图层样式设置及图层控制
qq_39330397的博客
08-18 1545
样式设置一般都是矢量图层vectorlayer。我喜欢用这种回调函数的方式设置，因为可以根据要素特定的值去灵活改变。当然也可以直接= new Style()具体的大家可以去看api文档，跟css一样有很多丰富的样式。图层控制的方法很简单，就一笔带过了。注意的是直接设置图层属性是不管用的。
openlayers 使用iconfont作为字体图标 来表示大量记录时会出现卡顿
chpswg的专栏
04-20 916
上一篇讲过openlayers 可以使用iconfont来表示图标，好处是可以任意修改图标图片的颜色，但是如果是来表示大量要素时，存在卡顿现象，如在航班监控时，全国有1000多架航班同时在飞，系统每隔5秒刷新一次，由于用iconfont是用canvas来实时生成的，1000多架航班刷新会很卡，所以这时候应该用图片来表示图标，即将全国航班监控提取出来，单独用图片表示。 /** * 功能：航班样...
Openlayers使用WebGL加载多种自定义图标矢量点
qq_40236953的博客
12-14 2954
使用OpenLayers的WebGLPointsLayer加载海量矢量点（100W），并使用多种自定义图标样式。
openlayers聚合打点并显示多种图标
m0_57968888的博客
10-18 1383
公司项目中存在一个业务场景，在地图上显示多种图标，但是由于坐标太多就不能使用简单的打点的做法，就希望使用聚合打点效果，首先我们想到是写一个方法有几种图标就执行几次，将图标名称设置为变量就可以达到地图上显示多种图标的效果，但是随后我们发现清除或者隐藏就变成了一个问题。我们将所有需要展示的图标的图层放在同于层级上面，用zIndex当中判断条件，我们遍历出对应的图层就可以设置隐藏或者移除啦。但实际情况是当图层名称一致时候他只会清除最底层的那个图层，并没达到完全隐藏或者移除图层的效果。这个时候事情就很简单了。
OpenLayers6入门，使用webgl图层叠加超大量Point点要素，解决叠加超过一百万数据量点位导致浏览器卡住变慢的问题
GIS地图技术分享(GIS入门、Openlayers教程、Leaflet教程)，做最好的GIS地图开发教程
04-13 2950
OpenLayers地图中当叠加超过几千以上要素点就开始变慢，一万以上的要素点的时候，浏览器页面就开始卡顿或直接卡死，甚至浏览器会弹出是否等待页面加载的提示。这时候要怎么优化？OpenLayers官方是推荐使用webgl图层方式对这种大量点渲染进行优化。当然webgl图层并不是没有缺点，使用webgl图层优点是渲染大量点很快，缺点就是style风格样式不能根据要素（Feature）的风格样式（style）自定义设置，只能用图层（layer）的风格样式（style）。
230：vue+openlayers使用WebGLPoints显示数据，根据某属性值的不同阈值显示不同颜色点
大剑师兰特的GIS世界
04-07 641
第230个本示例的目的是介绍演示如何在vue+openlayers项目中使用WebGLPoints显示数据，根据某属性值的不同阈值显示不同颜色点。这里面最重要的是featureStyle()这个函数。
openlayers和webgl有什么关系
05-25
OpenLayers是一个开源的JavaScript库，用于在Web上创建交互式地图应用程序。它提供了一组功能强大的API，使得...通过使用WebGL，OpenLayers可以更加流畅地显示大量的地图标记和图层，并提供更加交互式的用户体验。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 6
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

打赏作者

汤姆猫不是猫

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

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

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

打赏作者

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

抵扣说明：

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

余额充值